Day - 3

Day-3 of Learning React.js

📘 Step-by-Step Explanation

1. Imports

import React, { useState } from "react";

• React → allows you to write JSX (HTML-like code inside JavaScript).

• useState → a React hook that lets you store and update data inside a function component.

2. Function Component

function App() {

• App is a function component.

• Components are like building blocks of your UI.

• This one is the main component of your app.

3. useState Hook

const [theme, setTheme] = useState("dark");

• theme → state variable that stores the current theme ("dark" by default).

• setTheme → function used to change the theme.

• useState("dark") → initializes the state with "dark".

👉 Think of it like:

• theme = box holding the current theme.

• setTheme = tool to replace what’s inside the box.

4. Toggle Function

const toggleTheme = () => {
  const newTheme = (theme === "dark") ? "light" : "dark";
  setTheme(newTheme);
};

• This function switches between "dark" and "light".

• (condition ? true : false) → called ternary operator.

  • If theme === "dark", then newTheme = "light".

  • Otherwise, newTheme = "dark".

• setTheme(newTheme) → updates the state with the new theme.

5. JSX (UI Part)

return (
  <div className={"main " + theme}>
    <button onClick={toggleTheme}>
      {theme}
    </button>
    <p>Lorem ipsum...</p>
  </div>
);

• <div className={"main " + theme}>

  • Adds a CSS class dynamically.

  • Example: if theme = "dark", class becomes "main dark".

  • If theme = "light", class becomes "main light".

• <button onClick={toggleTheme}>

  • Button that runs toggleTheme when clicked.

  • Inside button → {theme} shows current theme text (dark or light).

• <p>...</p> → just a sample paragraph.

6. Export

export default App;

• export default → sends out the whole component so other files can use it.

• 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 to run JavaScript code inside HTML-like structure.

📝 Key Notes in Simple Words

• React → library for building UI with components.

• Component → function that returns UI.

• useState → lets you store and change data.

• Ternary Operator → short way to write if...else.

• Dynamic className → changes CSS class based on state.

• Controlled UI → React decides what to show based on state.

• export default → export one main thing.

• {} curly braces → run JavaScript inside JSX.