Day - 2

Day-2 of Learning React.js

1. Imports

import React, { useState } from "react";

• import React → brings React library so you can use JSX (HTML-like code in JavaScript).

• { useState } → a special React hook that lets you add state (data that changes) inside a function component.

2. Function Component

function App() {

• App is a function component.

• In React, components are like building blocks of your UI.

• This one is the main component of your app.

3. useState Hook

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

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

• value → holds the current state (whatever is typed in the input box).

• setValue → function to update/change the state.

👉 Think of it like:

• value = box where data is stored.

• setValue = tool to put new data inside the box.

4. Form Submit Function

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

• submitForm runs when you press the submit button.

• e.preventDefault() → stops the default form behavior (like refreshing the page or redirecting).

• alert(value) → shows a popup with the text you typed.

• setValue("") → clears the input box after submitting.

5. JSX (UI Part)

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

• <form onSubmit={submitForm}> → form element that calls submitForm when submitted.

• <input ... />

  • onChange={(e) => setValue(e.target.value)} → updates value whenever you type.

  • value={value} → makes the input a controlled component (its value is controlled by React state).

• <div>{value}</div> → shows live text as you type (because it reads from value).

• <button>submit</button> → button to submit the form.

6. Export

export default App;

• export default → means you are exporting the whole file/component.

• When another file imports this, it gets the App component.

• If you used just export, you could export multiple things individually.

7. Your Comments

// export default ka matalb entire file
// export ka matalb indivusual
// we wrap the js code in {} curly brases

• ✅ Correct!

• export default → one main thing from file.

• export → many individual things.

• {} curly braces → used in JSX and also when importing named exports.

📝 Key Notes in Simple Words

• React → library to build UI with components.

• Component → function that returns UI (JSX).

• useState → lets you store and change data inside a component.

• Controlled Component → input field whose value is managed by React state.

• preventDefault() → stops form’s natural behavior (refresh/redirect).

• alert() → shows popup message.

• export default → send out one main thing from file.

• export → send out multiple things individually.

• {} curly braces → used to run JavaScript inside JSX.