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 (
  

    
      {theme}
    
    
Lorem ipsum...
  
);

• <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.