## Why React? If you've been learning JavaScript and building small UI projects with HTML, CSS, and vanilla JS, you've probably reached a point where your code starts to feel... messy. Event handlers are scattered everywhere. Managing dynamic updates is hard. Your code grows, but it doesn’t scale. That’s where **React** comes in. --- ### What is React? React is a **JavaScript library for building user interfaces**, specifically, interfaces that are interactive, dynamic, and component-based. It was created at Facebook (now Meta) and is now used by companies all over the world, including: - Netflix - Airbnb - Shopify - Instagram - Uber - Discord - Meta itself > React helps you build apps where the UI updates *automatically* in response to user actions and data changes. Without you having to imperatively update the DOM. --- ### What Makes React Special? React introduced a few revolutionary ideas when it came out, and they’re still the core of what makes it powerful today: #### 1. **Declarative UI** You don’t tell the browser *how* to update the DOM step-by-step. You just declare what the UI should look like **based on state**, and React handles the updates. ```js ``` If `count` changes, React re-renders that button. You don’t need `document.querySelector()` or manual DOM manipulation. --- #### 2. **Component-Based Architecture** Everything in React is a **component**, a small, reusable piece of UI. You can think of components like: - Functions that return HTML (in the form of JSX) - Lego blocks that can be reused and combined - Independent, testable units of interface logic This means you can: - Break down large UIs into small, manageable parts - Reuse components across your app - Compose complex interfaces from simple primitives --- #### 3. **Unidirectional Data Flow** React data flows in one direction: **from parent to child**. This makes apps more predictable and easier to debug than traditional “2-way binding” frameworks. --- #### 4. **Rich Ecosystem & Community** React isn’t just a library. it’s an ecosystem of tools, patterns, and libraries that make it the go-to solution for frontend development. React has: - DevTools for debugging - Component libraries (like MUI, Shadcn, Chakra, etc.) - Frameworks (like **Next.js**, Remix) - Strong TypeScript support - Thousands of open-source resources and community packages --- ### What Can You Build with React? React is incredibly versatile. You can build: - Dashboards and admin panels - E-commerce stores - Mobile apps (with React Native) - Single Page Applications (SPAs) - Component libraries and design systems - AI-driven interfaces - Internal tools and forms - Blogs, portfolios, and marketing sites - Full-stack apps (with Next.js, Firebase, Supabase, etc.) If it involves UI and user interaction, React can build it. --- ### Why Learn React in 2025? React is still the **most widely adopted frontend library** in the JavaScript ecosystem. Even if you go on to learn Vue, Angular, or Svelte. Understanding React gives you a solid foundation in **declarative, component-based thinking**. It also opens doors for: - Frontend jobs (React is often listed in job descriptions) - Freelancing or contracting (most clients ask for React) - Open source contribution - Full-stack development with frameworks like Next.js or Remix And with the rise of AI-driven UIs, interactive apps, and component-based design systems, React remains highly relevant. --- ### Prerequisites Before You Start You’ll get the most out of React if you’re already comfortable with: - Basic HTML and CSS - Modern JavaScript (ES6+): `let/const`, arrow functions, `map`, `filter`, `forEach`, template literals - Functions and basic DOM manipulation - Understanding of modules and importing/exporting If you're still working on those, take a brief detour. Then come back here and this guide will feel a lot smoother. --- ### ✅ What You'll Learn in This Guide This isn’t just a “Hello World” tutorial. You’ll learn: - How to create, structure, and reuse components - How to manage state and props - How to use hooks like `useState`, `useEffect`, and custom hooks - How to build forms, fetch data, and debounce inputs - How to manage real-world logic like loading states, filtering, and error handling - How to structure and scale your code - How to practice React through real problems and challenges --- Let’s jump in and get hands-on. In the next section, we’ll walk you through how to set up your React project and write your very first component. --- ## Part 2: Getting Started with React So you're ready to write your first React app, but where do you begin? In this section, we'll walk through: - The best way to set up a modern React project - What files and folders matter - How JSX works (and why it's not HTML) - How to write your first component --- ### Setting Up a React Project (The Modern Way) There are two popular ways to start a React project: #### ✅ Option 1: Vite (Recommended) [Vite](https://vitejs.dev/) is the modern frontend build tool that’s faster and simpler than older tools like Webpack. ```bash npm create vite@latest my-react-app -- --template react cd my-react-app npm install npm run dev ``` That’s it. you’ll have a blazing-fast React dev environment running at `http://localhost:5173`. ✅ Fast ✅ Clean file structure ✅ Uses modern ES modules ✅ Easy to configure #### ❌ Option 2: Create React App (Older, but still common) ```bash npx create-react-app my-app cd my-app npm start ``` While still widely used in tutorials, **CRA is being phased out** in favor of Vite and Next.js. Use it only if you’re working on legacy projects or tutorials that require it. --- ### File Structure Breakdown After creating your project with Vite, you’ll see a structure like: ``` my-react-app/ ├── index.html ├── package.json ├── src/ │ ├── main.jsx │ ├── App.jsx │ └── App.css ``` Let’s break this down: | File | Purpose | |------------------|---------| | `index.html` | The root HTML file where React mounts | | `main.jsx` | Entry point: where React is initialized and `App` is rendered | | `App.jsx` | Your root component (the heart of your UI) | | `App.css` | Styles for your app (optional or replaceable) | --- ### What is JSX? React uses **JSX**, a syntax extension that looks like HTML inside JavaScript: ```jsx function Hello() { return

Hello, world!

; } ``` But it’s not HTML. It compiles to JavaScript like this: ```js React.createElement("h1", null, "Hello, world!"); ``` > JSX lets you write UI in a way that feels natural, but still lives entirely inside JavaScript. --- ### JSX Quick Rules 1. **Only one parent element** JSX must return a single root element: ```jsx // ✅ return (

Title

Paragraph

); // ❌ This will break return (

Title

Paragraph

); ``` 2. **Use `className` instead of `class`** JSX uses `className` because `class` is a reserved JS keyword. 3. **Self-closing tags are required** Tags like `` or `` must be self-closing: `` 4. **JS expressions inside `{}`** Use `{}` to embed dynamic values: ```jsx const name = "Alice"; return

Hello, {name}

; ``` --- ### Your First Component Let’s create a simple greeting component. ```jsx // App.jsx function App() { const name = "Developer"; return (

Welcome, {name}!

This is your first React component.

); } export default App; ``` Run the dev server (`npm run dev`), open your browser, and you’ll see: ``` Welcome, Developer! This is your first React component. ``` You just rendered your first dynamic UI with React! --- ### What’s Happening Behind the Scenes? ```jsx import React from 'react'; // (with older setups) import ReactDOM from 'react-dom/client'; ReactDOM.createRoot(document.getElementById('root')).render(); ``` - React uses `ReactDOM` to mount the component tree to your actual HTML. - It renders your virtual DOM (React’s lightweight copy of the real DOM), and keeps it in sync with changes. --- ### Cleanup: Removing Boilerplate You can remove unnecessary default code in `App.css`, `App.jsx`, etc., and start fresh: ```jsx function App() { return (

Hello, React!

Let’s build something awesome.

); } ``` --- ### Pro Tip: Use .jsx or .tsx? - Use `.jsx` for plain JavaScript React components. - Use `.tsx` if you're writing React with **TypeScript**. Both work the same way, just with different type safety features. --- ### ✅ Summary: Getting Started with React | Concept | You Learned… | |--------------------------|--------------------------------------------| | Vite Setup | How to quickly scaffold a React app | | JSX | HTML-like syntax inside JavaScript | | File Structure | What each file does in a new React project | | Your First Component | How to return JSX and render dynamic UI | | JSX Rules | Key syntax differences from plain HTML | --- Now that your project is set up and you’ve written your first component, it’s time to dive deeper into **how components work** and how to build truly reusable ones. Let’s move on to **Part 3: Components in React**. --- ## Part 3: Components in React: The Building Blocks of UI If React is the library, **components** are the bricks. Everything you build in React, from a button to an entire , is made up of components. This section explains: - What components are - How to write and structure them - How to reuse and nest them - How they differ from traditional HTML + JS approaches --- ### What Is a Component? A **component** in React is a JavaScript function that returns UI, typically written in JSX. ```jsx function Greeting() { return

Hello, React!

; } ``` That’s it. Simple, but powerful. Every time you write a component, you’re creating a **reusable piece of UI logic and structure**. --- ### Reusable Components Let’s say you want to show multiple users: ```jsx function UserCard() { return (

Alice

Engineer

); } ``` If you need to show more users, you can just reuse it: ```jsx function App() { return (

); } ``` But... all of these show the same data. That's where **props** come in (we’ll cover that next). For now, understand that **you can reuse components like functions**. --- ### Functional vs Class Components In modern React, we use **function components** almost exclusively. ```jsx // ✅ Function Component (Modern) function Welcome() { return

Welcome!

; } ``` Class components look like this: ```jsx // ❌ Class Component (Legacy) class Welcome extends React.Component { render() { return

Welcome!

; } } ``` Functional components are **shorter**, **easier to test**, and support **hooks**, which we’ll learn soon. --- ### Nesting Components Components can render other components, just like nesting functions. ```jsx function Header() { return

My App

; } function Footer() { return ; } function App() { return (

Welcome to my React app.

); } ``` You can organize your UI in layers: - High-level layout components (App, Page) - Mid-level section components (Header, Footer, Sidebar) - Low-level UI components (Button, Card, Input) --- ### Organizing Components As your app grows, create a `components/` folder: ``` src/ components/ Header.jsx Footer.jsx UserCard.jsx ``` Stick to **one component per file**. This makes it easier to find, read, test, and reuse. Each file can follow this basic structure: ```jsx function MyComponent() { return

...

; } export default MyComponent; ``` --- ### Component Naming Conventions Follow these best practices: - Component names must start with a **capital letter** - Use **PascalCase** (e.g., `UserCard`, `MainHeader`) - File names should match component names - Keep components small and focused Bad: ```jsx function usercard() { ... } // ❌ lowercase ``` Good: ```jsx function UserCard() { ... } // ✅ starts with capital ``` --- ### Best Practices ✅ Keep components small and focused ✅ One component = one clear job ✅ Use consistent naming and file structure ✅ Split layout from logic and UI ✅ Avoid deeply nested components unless necessary ✅ Reuse components. don’t repeat yourself --- ### ✅ Summary: What You Learned | Concept | Description | |----------------------|----------------------------------------------| | Components | Reusable UI blocks written in JSX | | Function vs Class | Function components are the modern standard | | Reuse & Nesting | Components can contain and reuse others | | File Structure | Keep components in `components/` folder | | Naming | Use PascalCase for all component names | --- Now that you know how components work, it’s time to pass **dynamic data** and make them flexible and reusable. Let’s move on to **Part 4: Props in React**. --- ## Part 4: Props in React: Making Components Dynamic Until now, our components have been static: hardcoded data, fixed output. That’s not very flexible. **Props** (short for "properties") are how you pass **dynamic data** into a component. They make components reusable and configurable. Let’s dive deep. --- ### What Are Props? Props are **inputs** to a component. You pass them in like HTML attributes: ```jsx ``` And inside the component, you access them through a parameter: ```jsx function UserCard(props) { return (

{props.name}

{props.role}

); } ``` Now you can reuse the same component with different data: ```jsx ``` --- ### Destructuring Props Instead of writing `props.name`, `props.role`, etc., you can **destructure** props in the function parameter: ```jsx function UserCard({ name, role }) { return (

{name}

{role}

); } ``` Cleaner. Shorter. Easier to read. --- ### Props Can Be Any Type You’re not limited to strings. You can pass numbers, arrays, objects, even functions or components as props: ```jsx alert("Added to cart!")} /> ``` Inside the component: ```jsx function ProductCard({ title, price, tags, onAddToCart }) { return (

{title}

${price}

{tag}

); } ``` --- ### Props vs State | Feature | Props | State | |--------|-------|-------| | Passed from parent? | ✅ Yes | ❌ No | | Can be changed by component? | ❌ No | ✅ Yes | | Use for initial config/data? | ✅ | ✅ | | Use for interactivity? | ❌ | ✅ | - Props: **External**, read-only, controlled by parent - State: **Internal**, read/write, controlled by the component itself --- ### Parent to Child Communication Props allow the parent to send data or behavior to child components: ```jsx function App() { return ; } function Greeting({ name }) { return

Hello, {name}!

; } ``` You can also pass down functions to allow children to **call back** to the parent: ```jsx function App() { const sayHello = () => alert("Hi from child!"); return ; } function Child({ onGreet }) { return ; } ``` --- ### Default Props You can give props default values using default parameters: ```jsx function Welcome({ name = "Guest" }) { return

Welcome, {name}!

; } ``` Now even if no prop is passed, it still works: ```jsx // "Welcome, Guest!" ``` --- ### ✅ Prop Type Checking (Optional) React doesn’t enforce prop types by default, but you can add runtime checks using the `prop-types` package: ```bash npm install prop-types ``` ```jsx import PropTypes from 'prop-types'; function UserCard({ name, age }) { return

{name} is {age} years old.

; } UserCard.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number }; ``` This adds dev-time safety in non-TypeScript projects. --- ### Best Practices for Props ✅ Use destructuring in components ✅ Use clear, descriptive prop names ✅ Document expected props (via comments, or PropTypes/TypeScript) ✅ Don’t mutate props. they’re read-only ✅ Prefer simple props over deeply nested ones ✅ Pass functions to child components for behavior --- ### One-Way Data Flow React's **unidirectional data flow** means: - Parents pass props down to children - Children can't modify parent props - State "lives" at the top and flows down via props This makes your UI predictable and easy to trace. --- ### ✅ Summary: What You Learned | Concept | Description | |------------------|--------------------------------------------------| | Props | Inputs passed into a component | | Destructuring | Cleanly extract values from props | | Any type | Props can be strings, numbers, arrays, functions | | Parent/Child | Props allow communication and reuse | | Best practices | Use defaults, don’t mutate, prefer clarity | --- Next, we’ll take props to the next , by introducing **state**, and making our components dynamic and interactive. Let’s move on to **Part 5: State in React**. --- ## Part 5: State in React: Making Components Interactive So far, your components can **display data** passed from a parent using props. But what if the data needs to change **inside** the component? That’s what **state** is for. State allows components to “remember” things, like user input, toggles, counters, or anything that changes over time. --- ### What Is State? State is **internal data** that a component manages by itself. It can change during the lifetime of , and when it changes, **React re-renders** the component to reflect the update. For example: - A counter that goes up or down - Whether a modal is open or closed - The current value of a form input - The selected tab in a tab list --- ### useState: The State Hook React gives us a special function called `useState` to add state to a component. ```jsx import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return (

Count: {count}

); } ``` #### What’s happening here? ```js const [count, setCount] = useState(0); ``` - `count` is the current state value - `setCount` is a function used to update it - `0` is the **initial value** When you call `setCount`, React re-renders the component with the new value. --- ### ✅ Rules of useState 1. `useState` must be called **at the top level** of your component (not inside loops or conditions) 2. You can call `useState` **multiple times** for different pieces of state 3. State updates are **asynchronous**. React batches them for performance --- ### Handling Multiple States ```jsx function Form() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); return ( ); } ``` Each call to `useState()` manages a separate piece of internal memory. --- ### ⚠️ Avoid Direct State Mutation Never do this: ```js count++; // ❌ bad state.items.push(x) // ❌ don't mutate arrays/objects ``` Always use `setState` to update things in an **immutable way**: ```js setCount(count + 1); setItems([...items, newItem]); // ✅ new array ``` Why? Because React relies on **detecting changes** through new references. Direct mutation won’t trigger a re-render. --- ### Derived Values from State Avoid duplicating state. If something can be **calculated** from state, don't store it. Just compute it when needed. ```jsx function Stats({ scores }) { const total = scores.reduce((a, b) => a + b, 0); // derive it return

Total: {total}

; } ``` --- ### Real Example: Toggle Button ```jsx function Toggle() { const [on, setOn] = useState(false); return ( ); } ``` This tiny component is fully interactive, self-contained, and demonstrates: - A boolean state - A dynamic label - An event handler that updates state --- ### Functional Updates Sometimes you need the **previous** state value to compute the new one: ```jsx setCount(prev => prev + 1); ``` This is especially useful if multiple updates are batched together. --- ### Practice: Build a Counter Try this challenge: - A counter with increment and decrement - Disable the “Decrement” button if count is zero - Add a “Reset” button to bring it back to zero ```jsx function Counter() { const [count, setCount] = useState(0); const increment = () => setCount(prev => prev + 1); const decrement = () => setCount(prev => Math.max(prev - 1, 0)); const reset = () => setCount(0); return (

Count: {count}

); } ``` --- ### ✅ Summary: What You Learned | Concept | Description | |-------------------|---------------------------------------------| | State | Internal data that changes over time | | useState | Hook for managing component state | | setState | Updates state and triggers re-render | | Multiple useState | Track multiple pieces of independent data | | Avoid mutation | Use new copies of objects/arrays | | Derived state | Don’t duplicate, compute when needed | | Functional update | Use `(prev) => next` to safely update state | --- Now that your components can manage their own data and respond to user input, it's time to move on to **side effects**, anything that happens *outside* of the render cycle. Let’s continue to **Part 6: useEffect and Side Effects in React**. --- ## Part 6: useEffect and Side Effects in React So far, your components can: - Render UI - Manage their own state - Respond to user input But what about things like: - Fetching data from an API? - Subscribing to a WebSocket? - Listening to window scroll events? - Updating the document title? These are called **side effects**: actions that interact with the outside world or cause something *outside* the React component to change. To handle them, React gives us the `useEffect()` hook. --- ### What is a Side Effect? A **side effect** is any operation that: - Reaches outside the component - Impacts something external - Needs to be cleaned up Examples: - Fetching data (`fetch`, `axios`) - Using timers (`setTimeout`, `setInterval`) - Listening to events (`addEventListener`) - Directly manipulating the DOM - Analytics, logging, browser APIs --- ### What is `useEffect()`? `useEffect()` lets you run side-effect logic **after the component renders**. ```jsx import { useEffect } from "react"; useEffect(() => { // Run some code here }); ``` You put your “effect” logic inside the callback, and React runs it **after the DOM is updated**. --- ### Basic Example: Logging on Mount ```jsx function Example() { useEffect(() => { console.log("Component mounted"); }, []); return

Hello!

; } ``` The `[]` is the **dependency array**. With an empty array: - The effect only runs **once** after the first render (like `componentDidMount`). --- ### Example: Fetch Data on Load ```jsx function UserList() { const [users, setUsers] = useState([]); useEffect(() => { async function loadUsers() { const res = await fetch("https://api.example.com/users"); const data = await res.json(); setUsers(data); } loadUsers(); }, []); // Run once return (

{user.name}

); } ``` ✅ `useEffect` triggers the fetch ✅ The component re-renders after `setUsers` is called ✅ This happens **only once** when the component mounts --- ### Dynamic Dependencies You can run an effect **when certain values change** by putting them in the dependency array: ```jsx useEffect(() => { console.log(`Count changed: ${count}`); }, [count]); ``` Now the effect runs: - After the first render - Every time `count` changes --- ### Cleaning Up Effects Some effects (like subscriptions or timers) need **cleanup** to avoid memory leaks: ```jsx useEffect(() => { const interval = setInterval(() => { console.log("tick"); }, 1000); // Cleanup function return () => { clearInterval(interval); }; }, []); ``` > The return function runs when the component unmounts or before the effect re-runs (if dependencies change). --- ### Common Cleanup Examples | Use Case | Cleanup Action | |------------------------|----------------------------------| | `setInterval`, `setTimeout` | `clearInterval`, `clearTimeout` | | Event listener | `removeEventListener` | | WebSocket | `socket.close()` | | API subscription | `unsubscribe()` or abort logic | --- ### Common Mistakes 1. **Missing dependency array** ```js useEffect(() => { fetchData(); // runs on EVERY render ❌ }); ``` 2. **Incorrect dependency array** ```js useEffect(() => { doSomething(); }, [someObject]); // ⚠️ will re-run every time object reference changes ``` 3. **State changes inside useEffect in a loop** Don't create infinite loops by calling `setState()` on every re-render. --- ### useEffect vs useLayoutEffect - `useEffect`: runs **after** the browser paints - `useLayoutEffect`: runs **before** paint (used for layout measurement) Unless you’re writing low-level layout code (e.g., measuring width/height), **stick with `useEffect`**. --- ### Multiple useEffects You can (and should) split effects by purpose: ```jsx useEffect(() => { // fetch data }, []); useEffect(() => { // update document title document.title = `Count: ${count}`; }, [count]); ``` This keeps your logic clean and easier to test/debug. --- ### ✅ Summary: What You Learned | Concept | Description | |--------------------|-----------------------------------------------| | Side Effects | Tasks that touch the outside world | | useEffect | React hook for handling effects after render | | Dependency array | Controls when the effect runs | | Cleanup function | Runs on unmount or before next effect run | | Gotchas | Avoid infinite loops and unnecessary re-runs | | Split effects | Separate concerns using multiple useEffects | --- Now that you’ve learned to handle side effects like fetching data and reacting to changes, let’s go one step further: In the next section, you’ll learn how to **build custom hooks** to encapsulate and reuse logic like this in clean, elegant ways. Let’s move on to **Part 7: Custom Hooks in React**. --- ## Part 7: Custom Hooks in React: Reusable Logic Made Simple So far you’ve learned about built-in React hooks like: - `useState` for state - `useEffect` for side effects But what happens when: - You repeat the same logic in multiple components? - You want to encapsulate a behavior like debouncing or fetching? - You want to organize your effects and state into smaller, testable units? That’s where **custom hooks** come in. --- ### What Is a Custom Hook? A **custom hook** is simply a **JavaScript function** that: - Starts with the word `use` - Can call other hooks (`useState`, `useEffect`, etc.) - Returns reusable logic, state, or functions It’s not magic. It’s just a way to extract and reuse component logic cleanly. --- ### Why Use Custom Hooks? ✅ Encapsulate complex logic ✅ Keep components clean and focused ✅ Share logic across components ✅ Improve testability ✅ Organize effects, timeouts, localStorage access, etc. --- ### Example 1: useToggle Let’s say you need a toggle switch in many components: ```jsx function useToggle(initial = false) { const [value, setValue] = useState(initial); const toggle = () => setValue(v => !v); return [value, toggle]; } ``` Usage: ```jsx function ToggleButton() { const [isOn, toggle] = useToggle(); return ( ); } ``` ✅ Now you can reuse `useToggle()` in any component. ✅ It’s small, testable, and abstracts the toggle logic away. --- ### Example 2: useLocalStorage Let’s build a custom hook that **syncs state with localStorage**: ```jsx function useLocalStorage(key, initialValue) { const [value, setValue] = useState(() => { const saved = localStorage.getItem(key); return saved ? JSON.parse(saved) : initialValue; }); useEffect(() => { localStorage.setItem(key, JSON.stringify(value)); }, [key, value]); return [value, setValue]; } ``` Usage: ```jsx function UsernameInput() { const [username, setUsername] = useLocalStorage("username", ""); return ( setUsername(e.target.value)} placeholder="Enter your name" /> ); } ``` ✅ Persistent state ✅ Works across page reloads ✅ Reusable in any component --- ### Custom Hook Naming Convention All custom hooks **must start with `use`** so React can correctly track the hook's behavior (especially rules of hooks like order and call count). ✅ `useCounter`, `useUser`, `useIsVisible` ❌ `toggleHook`, `storeUserData` --- ### Real-World Examples You can build custom hooks for: - `useWindowSize()` – get window dimensions on resize - `useOnClickOutside()` – close modal when clicking outside - `useFetch()` – fetch data with loading/error state - `useDebounce()` – debounce values (see next section) - `useOnlineStatus()` – track network connectivity --- ### Pattern: Return What You Need You can return: - A value (`[state, setState]`) - An object (`{ loading, error, data }`) - A single function Choose the shape based on the hook’s purpose. ```js const [value, setValue] = useToggle(); const { data, loading, error } = useFetch(url); const debounced = useDebounce(value, 300); ``` --- ### Custom Hook Best Practices ✅ Keep them pure. don’t touch the DOM or global state directly ✅ Use them to organize logic, not just to move code ✅ Prefer composition over configuration ✅ Combine other hooks inside them freely ✅ Avoid nesting them inside conditions/loops --- ### Practice Challenge: useCounter Write a hook called `useCounter()` that handles: - `count` state - `increment()`, `decrement()`, and `reset()` functions ```js function useCounter(initial = 0) { const [count, setCount] = useState(initial); const increment = () => setCount((c) => c + 1); const decrement = () => setCount((c) => c - 1); const reset = () => setCount(initial); return { count, increment, decrement, reset }; } ``` Usage: ```jsx function Counter() { const { count, increment, decrement, reset } = useCounter(5); return ( <>

Count: {count}

); } ``` --- ### ✅ Summary: What You Learned | Concept | Description | |---------------------|---------------------------------------------------| | Custom Hook | A function that starts with `use` and uses hooks | | Why use them | To reuse and encapsulate logic | | Examples | `useToggle`, `useLocalStorage`, `useCounter` | | Naming | Must start with `use` | | Best practices | Keep them pure, composable, and reusable | --- In the next section, we’ll build on this by creating a **debounce hook**, a common pattern used in forms, search fields, and performance tuning. Let’s continue to **Part 8: Debouncing in React**. --- ## Part 8: Debounce in React: Controlling Rapid Input As your React app grows more dynamic and interactive, you’ll start working with: - Text inputs - Live search - Form validation - Scroll or resize events And often, you’ll want to **delay running a function** until the user stops typing, moving, or interacting for a brief moment. That’s what **debouncing** is for. --- ### What is Debouncing? **Debouncing** is a performance optimization technique that: - Waits for a period of inactivity before executing a function - Cancels any in-progress function calls if the input changes too quickly > It’s like saying: “Only run this function after the user *stops* typing for 300ms.” --- ### Debounce vs Throttle | Concept | When to Use | Example | |-----------|----------------------------------------|------------------------------| | Debounce | Wait until the user stops triggering | Live search, input validation| | Throttle | Limit how often a function runs | Scroll, resize, mouse move | In React apps, **debounce is ideal for input fields**, especially when tied to API calls. --- ### Real Example: Without Debounce Imagine you want to fetch search results every time the user types: ```jsx useEffect(() => { fetch(`/api/search?q=${query}`); }, [query]); ``` This works, but it sends a request **every single keystroke**. That’s wasteful and can overload your backend. --- ### ✅ Solution: useDebounce Hook Let’s create a custom `useDebounce` hook that delays updating a value until the user stops typing. ```jsx import { useState, useEffect } from "react"; function useDebounce(value, delay = 300) { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const timeout = setTimeout(() => { setDebouncedValue(value); }, delay); return () => clearTimeout(timeout); }, [value, delay]); return debouncedValue; } ``` --- ### Usage Example: Debounced Search ```jsx function Search() { const [query, setQuery] = useState(""); const debouncedQuery = useDebounce(query, 500); useEffect(() => { if (!debouncedQuery) return; fetch(`/api/search?q=${debouncedQuery}`) .then(res => res.json()) .then(data => console.log("Results:", data)); }, [debouncedQuery]); return ( setQuery(e.target.value)} placeholder="Search..." /> ); } ``` ✅ The API call is delayed until the user pauses ✅ Only meaningful, stable values are sent ✅ Performance-friendly, user-friendly --- ### How It Works - Every time `value` changes, a timer starts - If `value` changes again before the delay finishes, the old timer is cleared - Only when the value **stops changing** for `delay` ms is it committed --- ### Real-World Use Cases - **Live search** boxes with backend filtering - **Auto-save** features with minimal writes - **Validation** that doesn’t run on every keystroke - **Scroll listeners** to show/hide navigation bars - **Window resizing** handlers --- ### Tips for Debouncing ✅ Use for values that trigger expensive actions ✅ Adjust the delay to feel responsive (200–500ms is common) ✅ Debounce at the **value level**, not the effect logic ✅ Keep `useDebounce` pure and predictable --- ### ✅ Summary: What You Learned | Concept | Description | |---------------|-----------------------------------------------------| | Debouncing | Delays a function call until user stops interacting | | useDebounce | Custom hook to manage debounced values | | Input + fetch | Avoids wasteful API calls on every keystroke | | Cleanup | Uses `clearTimeout` to cancel pending changes | --- Now that you know how to debounce input and control when things happen, let’s take things further and explore how React handles **forms**, one of the most critical aspects of modern apps. Let’s move on to **Part 9: Forms in React**. --- ## Part 9: Forms in React: Handling Input Like a Pro Forms are how users **interact** with your app: submitting data, searching, filtering, logging in, signing up, and more. And while HTML gives you the basic form elements (``, `

`, etc.), **React manages these very differently** using state.

In this section, we’ll break it all down so you can build clean, reliable, and user-friendly forms with ease.

---

### Controlled vs Uncontrolled Inputs

React supports **two types** of form inputs:

| Type          | Who controls the value?       | When to use               |
|---------------|-------------------------------|---------------------------|
| **Controlled**   | React via `useState`            | Most common, recommended  |
| **Uncontrolled** | DOM (`ref` + direct access)     | Legacy, niche use cases   |

We’ll focus on **controlled inputs**, which let you keep form values in sync with React state.

---

### Controlled Inputs

A controlled input’s value is bound to React state:

```jsx
function NameInput() {
  const [name, setName] = useState("");

return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="Enter your name"
    />
  );
}
```

- The input’s value comes **from state**
- Any change triggers `onChange`, which updates state
- State and UI are always in sync

✅ Predictable  
✅ Easy to validate  
✅ Works well with custom components  
✅ Essential for reusable logic

---

### Handling Multiple Inputs

Use a **single state object** and dynamic key names:

```jsx
function SignupForm() {
  const [form, setForm] = useState({ name: "", email: "" });

const handleChange = (e) => {
    setForm({
      ...form,
      [e.target.name]: e.target.value,
    });
  };

return (
    <>
      <input
        name="name"
        value={form.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        name="email"
        value={form.email}
        onChange={handleChange}
        placeholder="Email"
      />
    </>
  );
}
```

✅ Scalable  
✅ Easy to manage forms with many fields

---

### Handling Form Submission

Use a `<form>` with an `onSubmit` handler:

```jsx
function ContactForm() {
  const [form, setForm] = useState({ name: "", message: "" });

const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

const handleSubmit = (e) => {
    e.preventDefault(); // prevent default reload
    console.log("Form submitted:", form);
  };

return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={form.name} onChange={handleChange} />
      <textarea name="message" value={form.message} onChange={handleChange} />
      <button type="submit">Send</button>
    </form>
  );
}
```

---

### ✅ Controlled Inputs Summary

| Element      | `value` bound to state? | Has `onChange` handler? |
|--------------|--------------------------|--------------------------|
| Controlled   | ✅ Yes                   | ✅ Yes                   |
| Uncontrolled | ❌ No                    | ❌ No (uses `ref`)       |

---

### Prevent Default!

Remember: HTML forms try to **reload the page** by default on submit.

Always use:

```js
e.preventDefault();
```

…to stop that behavior and handle the form in JavaScript.

---

### Real-World Features

Forms often need more than just collecting input. Let’s explore…

#### ✅ Required Fields + Simple Validation

```jsx
if (!form.name || !form.email) {
  alert("All fields are required!");
  return;
}
```

You can also conditionally show error messages:

```jsx
{form.name === "" && <p className="error">Name is required</p>}
```

---

#### Resetting the Form

After submission, reset state:

```js
setForm({ name: "", email: "" });
```

Or use the native form reset:

```js
e.target.reset();
```

(useful for uncontrolled or hybrid forms)

---

### Bonus: Checkbox, Select, and Radio Buttons

#### ✅ Checkbox

```jsx
<input
  type="checkbox"
  checked={isChecked}
  onChange={(e) => setIsChecked(e.target.checked)}
/>
```

#### ✅ Select Dropdown

```jsx
<select value={fruit} onChange={(e) => setFruit(e.target.value)}>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>
```

#### ✅ Radio Buttons

```jsx
<input
  type="radio"
  name="role"
  value="admin"
  checked={role === "admin"}
  onChange={(e) => setRole(e.target.value)}
/>
```

---

### Best Practices for Forms

✅ Use controlled components for all fields  
✅ Manage state with objects if many inputs  
✅ Validate before submit  
✅ Prevent default reload  
✅ Clear form after success  
✅ Use `type="submit"` on buttons inside `<form>`

---

### Pro Tips

- Use `name` attributes that match your state keys
- Use `trim()` or `toLowerCase()` to sanitize input
- Use `disabled` and `aria-*` attributes for accessibility
- Combine with `useDebounce()` to delay validation
- Group logic in custom hooks (e.g. `useForm()`)

---

### ✅ Summary: What You Learned

| Concept              | Description                                       |
|----------------------|---------------------------------------------------|
| Controlled input     | Value + state + onChange                          |
| Form state           | Use single object to hold all input values        |
| onSubmit             | Handle form submit with custom logic              |
| Field types          | Checkboxes, radios, selects all supported         |
| Validation/reset     | Validate before submit, reset after success       |
| Best practices       | Keep inputs simple, state-driven, and accessible  |

---

In the next part, we’ll take this even further and focus on **fetching data**: how to load content from APIs, handle loading/error states, and structure your fetch logic the right way.

Let’s continue to **Part 10: Fetching Data in React**.

---

## Part 10: Fetching Data in React: From API to UI

Most real-world React apps depend on **external data**: from APIs, databases, or backends.

That means you need to master:
- How to fetch data on component load
- How to handle loading, success, and error states
- How to avoid race conditions and memory leaks
- How to structure your logic for reuse and clarity

Let’s break it all down.

---

### When to Fetch Data?

You typically want to fetch data:
- When a component **mounts**
- When **props or state change** (e.g. search query, filters, pagination)
- On **form submit** or user interaction

React doesn’t fetch anything for you. You do it manually using JavaScript (often inside `useEffect`).

---

### Basic Data Fetching Pattern

```jsx
import { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

useEffect(() => {
    async function loadUsers() {
      try {
        const res = await fetch("https://api.example.com/users");
        if (!res.ok) throw new Error("Failed to fetch");
        const data = await res.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

loadUsers();
  }, []);

if (loading) return <p>Loading users...</p>;
  if (error) return <p>Error: {error}</p>;

return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}
```

---

### Explanation

| State         | Purpose                                  |
|---------------|------------------------------------------|
| `users`       | The fetched data                         |
| `loading`     | Controls UI while data is loading        |
| `error`       | Stores any fetch error for the user      |

✅ `useEffect` runs **once** on mount  
✅ We handle errors with try/catch  
✅ `finally` ensures loading is set to false whether success or error

---

### ⚠️ Don’t Forget: async in useEffect

You **can’t** make `useEffect` itself async:

```js
// ❌ wrong
useEffect(async () => {
  ...
}, []);
```

Instead, define and call an `async` function inside it:

```js
useEffect(() => {
  async function fetchData() {
    ...
  }
  fetchData();
}, []);
```

---

### What If Props Change?

Suppose you pass in a `userId` prop and want to load that user’s info:

```jsx
useEffect(() => {
  async function loadUser() {
    const res = await fetch(`/api/user/${userId}`);
    const data = await res.json();
    setUser(data);
  }

loadUser();
}, [userId]);
```

Now it re-fetches **every time `userId` changes**.

---

### Cleanup and Abort

If a component unmounts mid-fetch, it can cause **memory leaks** or errors.

To prevent that, use an `AbortController`:

```jsx
useEffect(() => {
  const controller = new AbortController();

async function fetchData() {
    try {
      const res = await fetch("/api/data", { signal: controller.signal });
      const data = await res.json();
      setData(data);
    } catch (e) {
      if (e.name !== "AbortError") {
        setError(e.message);
      }
    }
  }

fetchData();

return () => controller.abort(); // cleanup
}, []);
```

✅ No race conditions  
✅ Safe cleanup on unmount

---

### When to Fetch vs Store in State?

| Situation                  | Use `useState` + `useEffect` |
|----------------------------|-------------------------------|
| One-off fetch on mount     | ✅ Yes                        |
| Data that changes often    | ✅ Yes                        |
| Data shared across pages   | ❌ Use global state/context   |
| Server-rendered or cached  | ❌ Use Next.js or React Query |

---

### Optional: Axios for Simpler Fetching

Axios is a popular HTTP client:

```bash
npm install axios
```

```js
import axios from "axios";

const res = await axios.get("/api/data");
setData(res.data);
```

✅ Shorter syntax  
✅ Built-in error handling  
✅ Automatic JSON parsing  
✅ Support for interceptors and abort tokens

---

### Bonus: useFetch Custom Hook

To reuse fetch logic:

```js
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

useEffect(() => {
    let ignore = false;

async function fetchData() {
      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error("Fetch failed");
        const json = await res.json();
        if (!ignore) setData(json);
      } catch (e) {
        if (!ignore) setError(e.message);
      } finally {
        if (!ignore) setLoading(false);
      }
    }

fetchData();

return () => {
      ignore = true;
    };
  }, [url]);

return { data, loading, error };
}
```

Usage:

```jsx
const { data, loading, error } = useFetch("/api/users");
```

---

### Best Practices for Fetching

✅ Always handle loading and error states  
✅ Use `try/catch` for async functions  
✅ Abort fetch if component unmounts  
✅ Debounce dynamic queries (see Part 8)  
✅ Consider a custom hook or library for shared fetch logic

---

### ✅ Summary: What You Learned

| Concept         | Description                                       |
|------------------|---------------------------------------------------|
| useEffect + fetch | How to load API data into your component         |
| Loading/Error    | Always handle all states for a complete UX       |
| Dependencies     | Add props/state that trigger re-fetches          |
| Cleanup          | Abort requests to avoid memory leaks             |
| useFetch hook    | Reuse logic across multiple components            |
| Axios            | An alternative to fetch with additional features |

---

Next up: let’s take everything you’ve learned and apply it to **filtering and transforming data**, a core skill for any interactive React UI.

Let’s continue to **Part 11: Filtering and Searching Data**.

---

## Part 11: Filtering and Searching Data in React

Whether you're building a to-do list, an admin dashboard, or a massive product catalog, you'll often need to:
- Filter data based on user input
- Implement dynamic search
- Display only the relevant items based on filters, tags, or keywords

Let’s explore how to handle that cleanly in React.

---

### Core Concept: Filtering = Deriving State

React doesn’t have a built-in “filter” tool, but since state is just data, you can **derive filtered results** from your state using regular JavaScript methods like `.filter()`, `.includes()`, `.toLowerCase()` and so on.

> You don’t store “filtered items” in state. You compute them from your data + filters.

---

### Example: Basic Text Search Filter

```jsx
function SearchableList({ items }) {
  const [query, setQuery] = useState("");

const filteredItems = items.filter(item =>
    item.toLowerCase().includes(query.toLowerCase())
  );

return (
    <>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}
```

✅ The list is filtered dynamically  
✅ Input is controlled via `useState`  
✅ Filtering logic is derived from `query` and `items`

---

### Real-World Example: Search Users by Name or Email

```jsx
function UserSearch({ users }) {
  const [query, setQuery] = useState("");

const filtered = users.filter(user =>
    user.name.toLowerCase().includes(query.toLowerCase()) ||
    user.email.toLowerCase().includes(query.toLowerCase())
  );

return (
    <>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search users"
      />
      {filtered.length === 0 && <p>No users found.</p>}
      <ul>
        {filtered.map(user => (
          <li key={user.id}>{user.name} – {user.email}</li>
        ))}
      </ul>
    </>
  );
}
```

---

### Filtering with Multiple Conditions

You can stack conditions inside `.filter()`:

```js
const filtered = data.filter(item =>
  item.active && item.age > 18 && item.tags.includes("premium")
);
```

Or dynamically based on user-selected filters:

```js
const filtered = data.filter(item => {
  if (selectedCategory && item.category !== selectedCategory) return false;
  if (!item.available) return false;
  return true;
});
```

---

### Performance Tips

- ✅ Use `.toLowerCase()` for case-insensitive matching
- ✅ Use `.trim()` to sanitize input
- ✅ Avoid storing filtered lists in state (derive it)
- ✅ Debounce input (see `useDebounce()` in Part 8)
- ✅ Use `useMemo()` if data is large and filtering is expensive

```jsx
const filteredItems = useMemo(() => {
  return items.filter(item => item.includes(query));
}, [items, query]);
```

---

### ✅ Bonus: Search + Pagination + Sort

You can **compose filters** for more advanced UIs:

```jsx
const filtered = data
  .filter(/* ... */)
  .sort(/* ... */)
  .slice(pageStart, pageEnd);
```

React makes it easy to apply filters, sorting, pagination, all in one pipeline.

---

### Practice Challenge

Build a searchable product list:
- Each product has a name and category
- Text input should filter by name
- A `<select>` dropdown should filter by category
- Bonus: Add a checkbox to filter by availability

---

### Best Practices for Filtering

✅ Keep data in raw form in state  
✅ Apply filters with `.filter()` + `.includes()`  
✅ Use `useMemo()` for performance if needed  
✅ Avoid re-rendering large lists unnecessarily  
✅ Always show a fallback UI when no results match  
✅ Combine filters cleanly to support advanced scenarios

---

### ✅ Summary: What You Learned

| Concept          | Description                                         |
|------------------|-----------------------------------------------------|
| Filtering logic  | Derive from state using `.filter()`                |
| Controlled input | Use `useState()` to track search or filter values  |
| Performance      | Use `useMemo()` and `useDebounce()` for large data |
| Multiple filters | Stack conditions or combine filters dynamically    |
| Composability    | Combine filters with sort/pagination               |

---

Now that you know how to filter and search through data responsively, we’re ready to build fully interactive apps.

Let’s take that further with **coding exercises and challenges** that help reinforce all of this.

But first, we need to explore how **React handles promises and async operations** under the hood.

Let’s continue to **Part 12: Promises and Async Logic in React**.

---

## Part 12: Promises and Async Logic in React: Handling the Unexpected

Asynchronous logic is everywhere in modern web apps:
- Fetching data from APIs
- Waiting for user actions
- Responding to third-party services (like Firebase or Stripe)
- Uploading files or submitting forms

In React, you’ll need to master how to **orchestrate async operations** cleanly and safely using:
- Promises
- `async`/`await`
- Lifecycle hooks like `useEffect`

---

### What Is a Promise?

A **Promise** is an object representing the eventual result of an asynchronous operation.

It can be:
- `pending` (still running)
- `fulfilled` (resolved successfully)
- `rejected` (an error occurred)

```js
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));
```

---

### ✅ `async` / `await`: Cleaner Promise Handling

React components often use `async/await` to write promise-based code more clearly:

```js
async function getData() {
  try {
    const res = await fetch('/api/data');
    const json = await res.json();
    console.log(json);
  } catch (err) {
    console.error("Failed to fetch:", err);
  }
}
```

---

### Where Async Happens in React

You’ll commonly run async code inside:
- `useEffect()` → fetch data, set up subscriptions
- `event handlers` → form submits, button clicks
- `custom hooks` → abstracted behavior (`useFetch`, `useDebounce`)
- Third-party service callbacks

---

### Example: Fetch Data on Button Click

```jsx
function ManualFetch() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

return (
    <div>
      <button onClick={fetchData}>Load Info</button>
      {loading && <p>Loading...</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}
```

✅ Clean async call  
✅ Loading feedback  
✅ Error safety  
✅ No side effects. runs only on button click

---

### Async in useEffect

React discourages making `useEffect` itself async, but you can define and call an async function inside it:

```jsx
useEffect(() => {
  const loadData = async () => {
    try {
      const res = await fetch('/api');
      const data = await res.json();
      setData(data);
    } catch (e) {
      console.error(e);
    }
  };

loadData();
}, []);
```

> Why not make `useEffect` async? Because it expects the return value to be a cleanup function: not a Promise.

---

### Avoid Race Conditions with Cleanup

Imagine this scenario:
- User navigates away
- The fetch completes *after* the component unmounts
- Now you’re calling `setState` on an unmounted component = ⚠️ memory leak

To fix that:

```jsx
useEffect(() => {
  let ignore = false;

const fetchData = async () => {
    const res = await fetch('/api');
    const data = await res.json();
    if (!ignore) setData(data);
  };

fetchData();

return () => {
    ignore = true;
  };
}, []);
```

✅ Safe from race conditions  
✅ Will not update state after unmount

---

### Bonus: Promise.all for Parallel Fetches

If you need to fetch multiple things at once:

```js
const [usersRes, postsRes] = await Promise.all([
  fetch('/api/users'),
  fetch('/api/posts')
]);

const users = await usersRes.json();
const posts = await postsRes.json();
```

✅ Runs in parallel  
✅ Waits until all promises complete

---

### Bonus: Handle Rejected Promises Gracefully

Always wrap your `await` calls in try/catch:

```js
try {
  const res = await fetch('/api');
  if (!res.ok) throw new Error("Bad response");
  const data = await res.json();
  setData(data);
} catch (err) {
  setError(err.message);
}
```

✅ No unhandled promise rejections  
✅ Clear error state in the UI

---

### Best Practices for Async in React

✅ Always handle loading and error states  
✅ Never make `useEffect` async directly  
✅ Use `AbortController` or flags to avoid memory leaks  
✅ Abstract reusable logic into hooks  
✅ Clean up long-running or overlapping operations  
✅ Keep the UI responsive (loading indicators, disable buttons)

---

### ✅ Summary: What You Learned

| Concept             | Description                                      |
|---------------------|--------------------------------------------------|
| Promises            | Represent async operations                       |
| async/await         | Cleaner syntax for Promises                      |
| useEffect async     | Wrap async calls in nested functions             |
| Race conditions     | Prevent updates after unmount using flags        |
| Parallel fetches    | Use `Promise.all()` for multiple calls           |
| Error handling      | Always use try/catch and validate response codes |

---

Now that you’ve learned how React interacts with Promises and asynchronous flows, we can wrap all this knowledge together with **interactive coding challenges and real use-case patterns**.

Let’s continue to **Part 13: Coding Challenges and Practice Problems for React Beginners**.

---

## Part 13: Coding Challenges and Practice Problems for React Beginners

Knowing concepts is one thing. **Applying them in code is another.**

This section includes a curated set of **practical mini-challenges** that cover core topics like:
- State & props
- useEffect & fetching data
- Filtering lists
- Controlled inputs & forms
- Building reusable custom hooks

Each challenge has:
- A **prompt** (what to build)
- **Hints** and tips
- A **starter approach**
- A link to expand it into a real-world feature

Let’s sharpen your skills

---

### ✅ Challenge 1: Toggle Component

**Prompt:** Build a toggle button that switches between “ON” and “OFF”.

**Core Concepts:**
- `useState`
- JSX conditionals

```jsx
function Toggle() {
  const [isOn, setIsOn] = useState(false);

return (
    <button onClick={() => setIsOn(prev => !prev)}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
}
```

**Bonus:** Add a prop called `label` and display: `"{label}: ON"`.

---

### ✅ Challenge 2: Counter with Controls

**Prompt:** Build a counter component with:
- +1
- -1
- Reset

**Core Concepts:**
- `useState`
- Event handling

```jsx
function Counter() {
  const [count, setCount] = useState(0);

return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <button onClick={() => setCount(c => c - 1)}>-</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </>
  );
}
```

**Bonus:** Disable “-” when count is 0.

---

### ✅ Challenge 3: Search Filter

**Prompt:** Create an input that filters a list of names.

**Core Concepts:**
- `useState`
- `.filter()`
- Controlled inputs

```jsx
const names = ["Alice", "Bob", "Charlie", "David"];

function NameFilter() {
  const [query, setQuery] = useState("");

const filtered = names.filter(name =>
    name.toLowerCase().includes(query.toLowerCase())
  );

return (
    <>
      <input
        placeholder="Search names"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {filtered.map(name => <li key={name}>{name}</li>)}
      </ul>
    </>
  );
}
```

**Bonus:** Show “No results found” when the list is empty.

---

### ✅ Challenge 4: Debounced Search

**Prompt:** Modify the above to debounce the search input using a custom hook.

**Core Concepts:**
- `useDebounce` custom hook
- useEffect
- API-like behavior

**Hint:** Use your debounce hook to delay the filter logic.

---

### ✅ Challenge 5: Fetch and Display Users

**Prompt:** Fetch a list of users from an API and display their names in a list.

**Core Concepts:**
- `useEffect`
- `useState`
- async/await

**Mock API:** https://jsonplaceholder.typicode.com/users

```jsx
function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

useEffect(() => {
    async function fetchUsers() {
      const res = await fetch("https://jsonplaceholder.typicode.com/users");
      const data = await res.json();
      setUsers(data);
      setLoading(false);
    }

fetchUsers();
  }, []);

return loading ? (
    <p>Loading...</p>
  ) : (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}
```

**Bonus:** Add error handling with a fallback message.

---

### ✅ Challenge 6: Controlled Form Input

**Prompt:** Build a form with an input and a submit button. Log the name when submitted.

**Core Concepts:**
- Controlled form
- `onSubmit`
- `useState`

```jsx
function NameForm() {
  const [name, setName] = useState("");

const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Submitted:", name);
    setName("");
  };

return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter name"
      />
      <button type="submit">Submit</button>
    </form>
  );
}
```

**Bonus:** Disable submit if the input is empty.

---

### ✅ Challenge 7: Custom Hook: useOnlineStatus

**Prompt:** Build a custom hook that tells if the user is online or offline.

**Core Concepts:**
- `window.addEventListener`
- `useEffect` cleanup
- Custom hooks

```js
function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

useEffect(() => {
    const goOnline = () => setIsOnline(true);
    const goOffline = () => setIsOnline(false);

window.addEventListener("online", goOnline);
    window.addEventListener("offline", goOffline);

return () => {
      window.removeEventListener("online", goOnline);
      window.removeEventListener("offline", goOffline);
    };
  }, []);

return isOnline;
}
```

Usage:

```jsx
function StatusIndicator() {
  const isOnline = useOnlineStatus();
  return <p>{isOnline ? "🟢 Online" : "🔴 Offline"}</p>;
}
```

---

### Stretch Goal: Combine Multiple Concepts

**Challenge:** Build a full search app that:
- Fetches users from an API
- Debounces the search input
- Filters users by name or email
- Shows loading, empty, and error states

> This is a real-world test of your understanding of: useEffect, state, custom hooks, controlled input, conditional rendering, and derived state.

---

### ✅ Summary: What You Practiced

| Skill                     | Example Used                            |
|---------------------------|------------------------------------------|
| `useState`                | Toggle, Counter, Form                    |
| Controlled Inputs         | NameForm, SearchFilter                   |
| Filtering Data            | Search + filter challenges               |
| Async / `useEffect`       | User fetch, debounce                     |
| Custom Hooks              | useDebounce, useOnlineStatus             |
| Derived State             | Filtering lists                          |
| Event Handling            | Form submission, button click            |

---

In the next part, we’ll wrap up the guide by giving you **bonus project ideas**, links to learning resources, and a recap of everything you've built so far.

Let’s continue to **Part 14: Summary, Learning Resources, and Project Ideas**.

---

## Part 14: Summary, Learning Resources, and Project Ideas

You've just completed a **deep-dive crash course into React fundamentals**, and if you've followed along, you’ve not only read theory but also built working components, practiced patterns, and explored real use cases.

This guide has taken you from the absolute basics of **JSX** and **components** all the way through:
- Props and reusable UI patterns
- State management and dynamic behavior
- Side effects and lifecycle with `useEffect`
- Custom hooks and local logic reuse
- Debouncing, filtering, and fetching real data
- Controlled forms and async UI flows
- Practical challenges to reinforce your skills

---

### What You Now Know

You can now confidently:
- Build clean, stateful UI components
- Pass data and functions via props
- Manage side effects and loading states
- Fetch data from APIs and handle async logic
- Filter and display dynamic lists
- Handle forms, inputs, and user-driven changes
- Create and reuse custom hooks
- Write debounced, efficient components
- Avoid common React pitfalls like memory leaks

Whether you’re prepping for your first React job, improving a personal project, or just trying to build something cool, these are the **core patterns** you’ll use again and again.

---

### Recommended Learning Resources

Here’s a carefully curated list of helpful resources to continue your learning:

#### Official Docs (Start Here!)
- [React.dev](https://react.dev) – The new React docs (interactive and excellent)
- [Beta Docs: Hooks at a Glance](https://react.dev/learn)

#### Free Courses
- [Codecademy’s Intro to React](https://www.codecademy.com/learn/react-101)
- [freeCodeCamp’s React Track](https://www.freecodecamp.org/learn/front-end-development-libraries/)

#### Intermediate Content
- [Kent C. Dodds: Epic React](https://epicreact.dev/)
- [Josh Comeau's Blog](https://www.joshwcomeau.com/)
- [usehooks.com](https://usehooks.com/) – Library of useful custom React hooks

#### YouTube Channels
- [Fireship](https://www.youtube.com/@Fireship)
- [The Net Ninja](https://www.youtube.com/@NetNinja)
- [Traversy Media](https://www.youtube.com/@TraversyMedia)

---

### Bonus: Beginner Project Ideas

Now that you know the fundamentals, here are a few **real-world mini projects** that’ll help you solidify your learning:

---

#### 1. To-Do App with Local Storage
- Add tasks, mark complete, delete
- Persist state using `useLocalStorage` hook

#### 2. GitHub User Search
- Fetch from GitHub’s API
- Use debounce to avoid spamming the endpoint
- Show user cards with profile info

#### 3. Weather App
- Form to input a city
- Fetch data from a public weather API
- Handle loading, error, empty states

#### 4. Shopping Cart
- Add/remove items
- Show total price
- Update quantities with state

#### 5. Flashcard Quiz App
- Display flashcards from an API or JSON
- Track correct/incorrect answers
- Add score logic

---

### Next Steps

Once you're confident with these basics, consider exploring:
- **React Router** – for navigation and routing
- **Context API** – for global state sharing
- **TypeScript with React** – for safer code
- **React Query / SWR** – for advanced data fetching
- **Testing with Jest + React Testing Library**
- **State libraries** like Redux, Zustand, or Jotai

---

### Final Thoughts

React is more than just a framework. it's a way of thinking about **how data flows through UI**. Once you master the core patterns, the rest becomes intuitive.

You don’t need to learn everything at once. Start small. Build something useful. Improve it. Refactor it. Repeat.

By sticking with it, you’ll move from **copy/paste learner** to a **real UI engineer** who knows how to think in components, state, and hooks.

Keep building.

---

Now go write some React.
</article></body></html>

React 101: The Ultimate Beginner's Guide