React Explained

React. It's everywhere. Powering Netflix, Facebook, Instagram, and probably your favorite indie app too. But if you've stared at the docs and thought, 'This is JavaScript... on steroids?', you're not alone. React isn't magic. It's a system. And once you get the rhythm of components and hooks, it starts to feel less like rocket science and more like building with LEGO bricks that happen to be insanely powerful.

Let's start simple: why does React exist? Before React, building UIs meant wrestling with DOM manipulation, janky state updates, and code that looked like it was written by a committee. React flips the script: it treats your UI as a function of state. Change the state, the UI updates. No manual fiddling. That's the promise. But to unlock it, you need to understand two core ideas: components and hooks.

Components: Your UI's Building Blocks

Think of components as reusable chunks of your UI. A button? Component. A nav bar? Component. Your entire app? A tree of components. They're functions (or classes, but functions are the modern way) that return JSX, what React uses to describe what the UI should look like.

Here's the key: components are declarative. You describe *what* you want (e.g., 'show a list of users'), not *how* to build it (e.g., 'loop through the array and append DOM nodes'). React handles the 'how' - diffing changes, updating the DOM efficiently, all that jazz.

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// Usage:
<UserList users={userData} />;

See? Clean. No loops, no manual DOM updates. But components alone are static. Enter hooks.

Hooks: The Secret Sauce of State and Side Effects

Hooks are functions that let you 'hook into' React features like state and lifecycle methods, without classes. Before hooks, you needed class components for anything beyond basic rendering. Hooks made functional components powerful enough to handle everything.

The big ones? `useState` and `useEffect`. `useState` gives you local state. `useEffect` handles side effects (like fetching data or setting timers). They're simple, but they make components dynamic.

• `useState`: For when your component needs to remember things. Like a counter: `const [count, setCount] = useState(0);`. Change `count`, React re-renders.
• `useEffect`: For when your component needs to *do* things. Like fetching data: `useEffect(() => { fetchUsers(); }, []);`. The empty array means 'run once on mount'.

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]); // Re-run if userId changes

  if (loading) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

Boom. State + side effects in a functional component. No `this.setState`, no `componentDidMount`. Hooks keep related logic together, making code easier to read and reuse.

Why It All *Clicks*

The magic happens when you see React as a *data flow*. Props flow down from parent to child. State lives in components. Effects handle the outside world. Hooks are the glue. They let you pull in state and effects exactly where you need them.

Once it clicks, building UIs feels intuitive. Want a form? `useState` for inputs. Need data? `useEffect` for fetching. Reusable logic? Custom hooks. No more class confusion, no more lifecycle headaches.

• Components: Describe your UI.
• Hooks: Add state and behavior.
• Result: Clean, reusable, predictable code.

React isn't about memorizing APIs. It's about thinking in components and hooks. Start small: build a counter, fetch some data, pass props around. It'll click. And when it does? You'll wonder how you ever built UIs without it. We have a React course you could get into for a deeper dive. Check it out on our /Learn page.

Next up: Dive into a real project. Grab a simple app idea and code it. The 'aha' moments are in the doing.