Hey devs! 👋

I've decided to start a small habit:
Each day, I’ll build a simple React task—just to revisit the main concepts and also explore what’s new in React 19.

I’ll be sharing my daily learnings here in case anyone finds them helpful (or wants to join me on this React refresh ride 🚀).

📌 Task 1: Tabs Component

I started with something simple but practical—a Tabs component.
It displays either a person's info or their address, and I can switch between them by clicking on the corresponding tab.

💡 The Core Concept: useState

The most important concept I used today is useState.
This hook lets us add state to functional components without needing class components.

✍️ Syntax:
const [state, setState] = useState(initialValue);

  • state: holds the current value
  • setState: updates the state
  • initialValue: the initial value assigned

🧠 How I Used It:

const [open, setOpen] = useState(true);

  • If open is true → the Person tab is active
  • If false → the Address tab is shown

I used a ternary condition to decide which component to render based on the state, and I toggled between tabs using onClick events.

💻 Code Preview

Here’s a snippet of the component:

`const Tabs = () => {
const [open, setOpen] = useState(true);

return (


  • setOpen(true)}>Person
  • setOpen(false)}>Address
  {open ? (
    

      
Name: John Doe

      
Age: 32

      
Occupation: Developer

    

  ) : (
    

      
Street: 1234 Main St

      
City: San Francisco

      
State: CA

      
Zip: 94107

    

  )}