codeharborhub · ajay-dhangar · Mar 4, 2026 · Mar 4, 2026
@@ -0,0 +1,8 @@
+{
+  "label": "React",
+  "position": 6,
+  "link": {
+    "type": "generated-index",
+    "description": "Master the fundamentals of React.js. Learn about components, JSX, props, and state to build modern, interactive web applications."
+  }
+}
@@ -0,0 +1,112 @@
+---
+sidebar_position: 6
+title: "Hooks: Powering Up with useState"
+sidebar_label: "6. The useState Hook"
+description: "Learn how to make your components interactive by managing state with the useState hook."
+---
+
+Imagine you are building a **Counter** app. You have a button that says "Click Me," and you want a number on the screen to go up every time you click it.
+
+In plain JavaScript, you would have to find the HTML element and manually change its text. In React, we use the `useState` hook to tell React: *"Hey, keep track of this number, and whenever it changes, update the screen for me automatically!"*
+
+## 🤔 What is a Hook?
+
+Hooks are special functions that let you "hook into" React features. Think of them as **Power-Ups** for your components. 
+* **Regular Function:** Just displays data.
+* **Function with Hooks:** Can remember things, perform actions, and react to user input.
+
+## The Anatomy of useState
+
+When you use `useState`, it always gives you back **two things** in an array:
+
+1.  **The Current State:** The current value stored in memory (e.g., `0`).
+2.  **The Setter Function:** A special function used to update that value (e.g., `setCount`).
+
+```javascript
+const [count, setCount] = useState(0);
+```
+
+* `count` is the value.
+* `setCount` is the remote control to change that value.
+* `0` is the starting point (Initial State).
+
+## Live Interactive: Your First State
+
+Try clicking the button below! Watch how React instantly re-renders the component every time the `count` changes.
+
+```jsx live
+function App() {
+  // 1. Import (implicitly) and initialize state
+  // We start at 0
+  const [count, setCount] = React.useState(0);
+
+  return (
+    <div style={{ 
+      textAlign: 'center', 
+      padding: '20px', 
+      border: '2px solid #61dafb',
+      borderRadius: '15px',
+      backgroundColor: '#282c34',
+      color: 'white'
+    }}>
+      <h2>The Click-O-Meter</h2>
+      <h1 style={{ fontSize: '4rem', margin: '10px 0' }}>{count}</h1>
+
+      <button 
+        onClick={() => setCount(count + 1)}
+        style={{
+          padding: '10px 20px',
+          padding: '5px',
+          fontSize: '1.2rem',
+          backgroundColor: '#61dafb',
+          border: 'none',
+          borderRadius: '5px',
+          cursor: 'pointer',
+          fontWeight: 'bold'
+        }}
+      >
+        Increase Count +
+      </button>
+
+      <button 
+        onClick={() => setCount(count - 1)}
+        style={{
+          padding: '10px 20px',
+          padding: '5px',
+          fontSize: '1.2rem',
+          backgroundColor: '#ff6b6b',
+          border: 'none',
+          borderRadius: '5px',
+          cursor: 'pointer',
+          fontWeight: 'bold',
+          marginLeft: '10px'
+        }}
+      >
+        Decrease Count -
+      </button>
+    </div>
+  );
+}
+
+```
+
+## The Golden Rule of State
+
+**Never change state directly:** 
+* `count = count + 1` (React won't notice, and the screen won't update).
+* `setCount(count + 1)` (React notices, updates the memory, and refreshes the UI).
+
+:::tip Want to dive deeper?
+
+`useState` is just the beginning! React has many other hooks like `useEffect` (for fetching data) and `useContext` (for global themes).
+
+👉 **Explore the full Hook library:** For a detailed breakdown of all React Hooks, check out our [Comprehensive Hooks Guide](https://codeharborhub.github.io/tutorial/category/hooks).
+
+:::
+
+## Summary Checklist
+
+* [x] I know that Hooks start with the word `use`.
+* [x] I understand that `useState` returns a value and a function to change it.
+* [x] I know that I must use the **Setter Function** to update the UI.
+* [x] I successfully built a working counter!
@@ -0,0 +1,143 @@
+---
+sidebar_position: 1
+title: "Why React? The Smart Way to Build"
+sidebar_label: "1. Intro to React"
+description: "A beginner's guide to why React is the world's favorite tool for building websites."
+---
+
+Welcome to the **React** era! If you've already learned HTML, CSS, and JavaScript, you might be wondering: *"Why do I need a library? Can't I just use plain JavaScript?"*
+
+The answer is: **Efficiency.**
+
+In plain JavaScript, if you wanted to update a user's notification count, you would have to manually find the element, change the text, and make sure everything else on the page didn't break. In React, you just change the **Data**, and React magically updates the **UI** for you.
+
+:::note
+If HTML is the **Skeleton** and JavaScript is the **Brain**, then **React** is the **Architect**. 
+
+React is a JavaScript library created by Facebook to make building user interfaces (UIs) easier, faster, and more organized. Instead of telling the browser every tiny step to take, you just describe what you want the screen to look like.
+:::
+
+## The Mental Shift: How React Thinks
+
+React acts like a **Smart Assistant**. Instead of you giving "Step-by-Step" instructions (Imperative), you just describe what you want the final result to look like (Declarative).
+
+### The Visualization: Traditional vs. React
+
+```mermaid
+graph TD
+    subgraph "Traditional Way (Harder)"
+    A[Data Changes] --> B[Find <br /> HTML Element]
+    B --> C[Manually <br /> Update Text]
+    C --> D[Check if <br /> other parts broke]
+    end
+
+    subgraph "React Way (Smarter)"
+    E[Data Changes] --> F{React Virtual DOM}
+    F -->|Only updates <br /> what changed| G[UI Updates <br /> Instantly]
+    end
+```
+
+## The "Big Three" Features
+
+Why did React win the "Web Library Wars"? Because of these three superpowers:
+
+### 1. Components (The LEGO Mindset)
+
+In React, you don't build "Pages." You build **Components**. A Navbar is a component. A Button is a component. You build them once and reuse them everywhere.
+
+* **Benefit:** Fix a bug in the "Button" component, and it's fixed across your entire website instantly!
+
+:::info 🧱 The Lego Mindset: Components
+
+The biggest shift in React is thinking in **Components**.
+
+Instead of one giant `index.html` file, you build small, independent pieces of code. You can reuse these pieces anywhere, just like LEGO bricks.
+
+```mermaid
+graph TB
+    subgraph "Your Website"
+    A[Navbar]
+    B[Sidebar]
+    C[Main Feed]
+    D[Footer]
+    end
+
+    C --> E[Post Card]
+    C --> F[Post Card]
+    C --> G[Post Card]
+
+    E --> H[Like Button]
+    E --> I[Comment Box]
+```
+:::
+
+### 2. The Virtual DOM (The Fast Copy)
+
+React keeps a lightweight "Ghost Copy" of your website in its memory.
+
+* When something changes, React compares the "Ghost Copy" with the "Real Page."
+* It finds the **exact** spot that changed and only updates that tiny piece.
+* **Analogy:** If you get a haircut, React doesn't replace your whole body; it just updates your hair!
+
+:::info The Virtual DOM (in other way)
+React keeps a "hidden copy" of your website in its memory. This is called the **Virtual DOM**. 
+
+When something changes, React follows these steps:
+1. It updates the **Virtual DOM** (which is lightning fast).
+2. It compares the Virtual DOM to the **Real DOM** (the one the user sees).
+3. It **only** changes the tiny piece that is different.
+
+```mermaid
+graph TD
+    A[Data Changes] --> B[Update Virtual DOM]
+    B --> C[Compare with Real DOM]
+    C --> D{What changed?}
+    D -->|Only the Button| E[Update Button Only]
+    D -->|Whole Page| F[Old Way: Refresh Everything]
+    style E fill:#00d8ff,stroke:#333,stroke-width:2px,color:#333
+```
+
+:::
+
+### 3. Declarative UI (The Menu)
+
+React is like a restaurant. You look at the menu and say, *"I want a Burger."* You don't go into the kitchen and tell the chef how to flip the patty. You describe the **State** (the burger), and React serves it.
+
+## When should you use React?
+
+You don't need React for a simple one-page resume. But you **definitely** need it for:
+
+* **Social Media:** (Like/Comment counts updating live).
+* **Dashboards:** (Graphs and data changing in real-time).
+* **E-commerce:** (Adding items to a cart without refreshing the page).
+
+## Why Beginners Love React
+
+1. **Speed:** Your apps feel "snappy" because they don't refresh the whole page.
+2. **Reusability:** Write a `Button` component once, use it 100 times.
+3. **Job Demand:** Almost every modern tech company uses React. Learning this opens doors to professional careers.
+
+
+:::tip Vocabulary Check
+**SPA (Single Page Application):** A website that feels like a desktop app because it never refreshes the page while you click around. React is the king of SPAs!
+:::
+
+## Quick Knowledge Check
+
+| Feature | Plain JS (Vanilla) | React.js |
+| --- | --- | --- |
+| **Updates** | Slow (Re-renders whole sections) | Fast (Only updates changed parts) |
+| **Logic** | Manual (You do everything) | Automated (React handles the DOM) |
+| **Code** | Can get messy (Spaghetti) | Organized (Components) |
+
+## Summary Checklist
+
+* [x] I understand that React is for building **User Interfaces (UI)**.
+* [x] I know that **Components** are reusable building blocks.
+* [x] I understand the **Virtual DOM** makes websites feel fast.
+* [x] I'm ready to stop writing "Pages" and start building "Components."
+
+:::tip Fun Fact / info
+* React is a free and open-source JavaScript library for building user interfaces (UIs), particularly for single-page applications. It is developed and maintained by Meta (formerly Facebook) and a large community of developers and companies.
+* React was created by **Jordan Walke**, a software engineer at Facebook. It was first used on Facebook’s Newsfeed in 2011 and later on Instagram!
+:::