Day 2 of learning react js

Day 2 of Learning React.js: useState, Controlled Inputs & Form Handling

Topic: Breaking down your first React form — imports, function components, the useState hook, controlled inputs, form submission, and exports — explained simply for absolute beginners.

Yesterday you got React set up and understood what JSX is. Today things get interactive. By the end of this post you'll understand how React remembers what you type, how to handle a form submission without the page refreshing, and what "controlled component" actually means — one of the most important concepts in React.

Let's go through the code piece by piece.

The Full Code — Read This First

import React, { useState } from "react";

function App() {
  const [value, setValue] = useState("");

  const submitForm = (e) => {
    e.preventDefault();
    alert(value);
    setValue("");
  };

  return (
    <form onSubmit={submitForm}>
      <input
        onChange={(e) => setValue(e.target.value)}
        value={value}
      />
      <div>{value}</div>
      <button>submit</button>
    </form>
  );
}

export default App;

Now let's understand every single line.

1. Imports

import React, { useState } from "react";

Two things are being imported here:

• React — brings the React library into this file. You need it to write JSX (the HTML-looking code inside JavaScript). Without this, the browser won't understand <form>, <input>, or <div> written inside a .js file.

• { useState } — a React Hook. Hooks are special functions that let you add features to your component. useState specifically lets you store data that can change over time — like whatever the user is currently typing.

💡 Notice useState is inside curly braces {} — that's because it's a named export from the React library. More on curly braces vs default exports in Section 6.

2. Function Component

function App() {

App is a function component — the modern way to write React UIs. Think of a component as a reusable building block. Your entire app is made of these blocks stacked together.

A few rules to remember:

• Component names must start with a capital letter — App, not app. React uses this to tell the difference between HTML tags (<div>) and your custom components (<App />).

• A component is just a JavaScript function that returns JSX — HTML-like code that describes what the UI should look like.

3. The useState Hook

const [value, setValue] = useState("");

This is one of the most important lines in React. Let's break it apart:

• useState("") — creates a state variable with an initial value of "" (empty string).

• value — the current value of the state. Right now it's "", but it'll update as the user types.

• setValue — the function you call to change the state. You never modify value directly.

Think of it like a whiteboard:

• value is what's written on the whiteboard right now.

• setValue is the marker — the only tool you're allowed to use to change what's written.

Why can't you just do value = "something" directly?

Because React wouldn't know the data changed, so it wouldn't re-render (update) the screen. Calling setValue("something") tells React: "the data changed, please update the UI."

💡 The [value, setValue] syntax is called array destructuring. useState returns an array of two things — the current value and the updater function — and you're unpacking them into two named variables in one line.

4. Form Submit Function

const submitForm = (e) => {
  e.preventDefault();
  alert(value);
  setValue("");
};

submitForm runs every time the user clicks the submit button or presses Enter inside the form.

• e — the event object. React automatically passes this when the form is submitted. It contains information about what happened.

• e.preventDefault() — this is critical. By default, submitting an HTML form refreshes the page and loses all your data. preventDefault() stops that default behavior so React stays in control.

• alert(value) — shows a browser popup with whatever the user typed. In a real app, you'd send this to a server or update a list instead.

• setValue("") — resets the input back to empty after submission. Because the input is controlled by React state (Section 5), clearing the state automatically clears the visible input box too.

5. JSX — The UI

return (
  <form onSubmit={submitForm}>
    <input
      onChange={(e) => setValue(e.target.value)}
      value={value}
    />
    <div>{value}</div>
    <button>submit</button>
  </form>
);

This is the visual part — what actually appears on screen.

<form onSubmit={submitForm}> Attaches the submitForm function to the form's submit event. Whenever the form is submitted (button click or Enter key), React calls submitForm.

<input onChange={(e) => setValue(e.target.value)} value={value} />

This is a controlled component — the most important concept on this page.

• onChange fires every time you type a character. It takes the current input value (e.target.value) and passes it to setValue, which updates React state.

• value={value} ties the input's displayed value to the React state. The input shows whatever is in value — nothing more, nothing less.

This means React is always in charge of the input. If value is "", the box is empty. If value is "hello", the box shows "hello". The UI and the data are always perfectly in sync.

<div>{value}</div>

The {} curly braces here are JSX syntax for running JavaScript inside HTML. This <div> reads directly from value — so as you type, the text appears in real time below the input, without any button click. This is live two-way data binding in action.

<button>submit</button>

A plain button. Because it's inside a <form>, clicking it triggers the form's onSubmit event automatically.

6. Export

export default App;

This makes the App component available to other files that want to import it.

There are two ways to export in JavaScript:

Since App is the main — and only — thing this file exports, export default is the right choice. When another file imports it, they can even rename it: import MyComponent from "./App" works fine with default exports.

Your comment said it perfectly: export default = entire file's main thing. export = individual things. ✅

7. Curly Braces {} — Two Different Jobs

Curly braces appear in two different contexts in React and it's easy to confuse them:

In JSX — they mean "run JavaScript here":

<div>{value}</div>         // display the value variable
<div>{2 + 2}</div>         // shows 4
<div>{user.name}</div>     // access object property

In imports — they mean "named export":

import { useState } from "react";     // named export
import { useEffect, useRef } from "react";   // multiple named exports
import React from "react";            // default export — no curly braces

Same symbol, two completely different purposes. Once you internalize this, a lot of React code becomes much easier to read.

Key Concepts Summary

What's Happening When You Type — Step by Step

1. You type "h" in the input box

2. onChange fires → calls setValue("h")

3. React updates state: value = "h"

4. React re-renders the component

5. <input value={value} /> now shows "h"

6. <div>{value}</div> now shows "h" below the input

7. You type "i" → same process, now value = "hi"

This cycle — event → setState → re-render — is the heartbeat of every React application.

Also Explore These Topics

• Day 1 of Learning React

• Day 3 of Learning React.js

• Deep Dive into React Hooks

• Controlled vs Uncontrolled Components

• Understanding Props in React

• useState — Deep Dive

• Node.js — Day 1