Day -1

Day 1 of Learning React: My First App

Today marks the beginning of my React journey, and I built my very first app! 🎉 Let me walk you through what I learned, the code I wrote, and the concepts that clicked for me.

Understanding Components

In React, everything revolves around components. A component is basically a function that returns UI elements. But here’s the catch:

• A component can only return one parent element.

• If you want multiple elements, you need to wrap them inside a single parent (like a <div>), or use React.Fragment shorthand (<>...</>).

Example:

<>
  <div>Hey</div>
  <div>Hy</div>
</>

🔄 State vs Variables

This was a big “aha!” moment for me.

• A variable changes its value, but the UI doesn’t automatically update.

• A state is special: when it changes, React re-renders the component so the UI reflects the new value.

That’s why React gives us the useState hook.

⚡ My First State Hook

Here’s how I used useState:

const [sum, setSum] = useState(0);

• sum → the current value of state.

• setSum → the function to update it.

🖱️ Handling Events (Batch updation issue)

I created a button that increments the number when clicked. At first, I tried:

setSum(sum + 1); // setSum(0 + 1)
setSum(sum + 1); // setSum(0 + 1)

But React batches updates, so both calls used the same old value of sum. Result → only +1 instead of +2.

The fix? Use the functional updater:

jsx

setSum(prev => prev + 1); // setSum(0 => 0 + 1)
setSum(prev => prev + 1); // setSum(1 => 1 + 1)

Now each update uses the latest value, so the button click adds +2.

🖥️ The Final App

Here’s the complete code:

import { useState } from "react";

function App() {
  const [sum, setSum] = useState(0);

  function inCrease() {
    setSum(prev => prev + 1);
    setSum(prev => prev + 1);
  }

  return (
    <div>
      <h1>Hello World {sum}</h1>
      <button onClick={inCrease}>Click me {sum}</button>
      <p>This is my first React App!</p>
    </div>
  );
}

export default App;

🌟 Key Takeaways

• React components must return a single parent element.

• State (useState) makes UI dynamic, unlike plain variables.

• Always use the functional updater when new state depends on the old state.

• Event handlers like onClick make apps interactive.

👉 That’s it for Day 1! I built a simple app, learned about state, and understood why React is so powerful. Tomorrow, I’ll dive deeper into props and component reusability.