Learn React.
The most-used frontend library.
React is how modern web apps are built. Every major company — Meta, Netflix, Airbnb, Uber, Shopify — uses it. Components, state, hooks, and the mental model that makes UIs predictable. This track teaches all of it, with real code and working examples. Every lesson assumes you already know JavaScript — if you don't, complete that track first.
Prerequisite: JavaScript. React is JavaScript. If you don't understand functions, arrays, objects, arrow functions, closures, and the DOM, learning React becomes memorization. Spend 2-3 months on the JavaScript track first. Every React tutorial assumes this foundation, and skipping it is the #1 reason beginners give up.
What you'll learn: components, JSX, props, state, hooks (useState, useEffect, useRef, useContext), routing, forms, and the mental model that makes React apps predictable. Every example has working code you can preview.
Why React
Every interactive website needs to update its UI when data changes. In vanilla JavaScript, you manipulate the DOM manually — querySelector, createElement, appendChild. As apps grow, this becomes unwieldy. React's insight was that the UI should be a function of state: when state changes, React computes what changed and updates only what's necessary. No more manual DOM tracking.
That's why it won. React didn't win because it's fast (Vue and Svelte are faster). It won because it made large apps tractable. When your app has 100 components, 20 shared states, and 50 user interactions, React's mental model — state flows down, events flow up — is what makes the codebase possible to reason about. The syntax is learnable in a week; the mental model is what you spend months mastering.
The payoff is real. React is the most-in-demand frontend skill in job listings. It's the foundation of React Native (mobile apps), Next.js (full-stack apps), and Remix. Learning React isn't just learning a library — it's learning the way modern frontend works.
🗺️ The 6-week path
Follow these in order. Each phase builds on the one before it.
Setup & first component
Install Vite, create a project, write your first component. Understand JSX — how HTML-like syntax compiles to JavaScript. See how React renders a component to the DOM. This is the entire setup — modern tooling makes it 3 commands.
Props & composition
Props pass data from parent to child. Children compose — a component can contain other components. This is how you build UIs: small pieces, combined into bigger pieces. The mental model: data flows down, functions flow up (as callbacks).
State with useState
State is data that changes over time. useState gives function components local state. When state changes, React re-renders. This is the core of React — understanding when and why re-renders happen is the skill.
Events & forms
React events look like HTML but work like JavaScript. Forms need controlled inputs — state that mirrors input value. Submit handlers, validation, and the difference between controlled and uncontrolled inputs. This is where most real apps spend their complexity.
useEffect & side effects
useEffect runs code after render — data fetching, subscriptions, timers. The dependency array controls when it runs. This is the hook most beginners misuse, so we'll make it clear. Once you understand useEffect, you understand most of React.
Lists & keys
Rendering arrays of items is the most common React pattern. Keys tell React which item is which when the list changes. Getting keys right is the difference between smooth updates and mysterious bugs.
Build something
Pick a project from the list below. Build it. Break it. Rebuild it. The project is where the mental model clicks — everything before this is preparation. Two weeks of building will teach you more than two months of tutorials.
🎯 The 5 concepts that matter most
If you only truly understand five things about React, make it these.
1. UI is a function of state
You don't tell React what to change — you tell it what state is, and it figures out the DOM updates. This is declarative vs imperative. Once you stop trying to "update the DOM" and start "changing state," React becomes simple.
2. Props flow down, events flow up
Parent passes data to child via props. Child communicates back by calling functions the parent passed down. That's the entire data flow. No two-way binding, no global state in the component tree.
3. State lives at the closest common ancestor
If two components need the same state, put it in their nearest common parent. Pass it down via props. This is "lifting state up" — and it's the standard pattern for shared state.
4. Every render is a snapshot
When React re-renders, it's not "updating" — it's calling your component function again with current state and comparing the result. Understanding this makes effects, closures, and stale state make sense.
5. Effects are for external sync
useEffect runs after render to sync with things outside React — APIs, subscriptions, the DOM. If you're updating state in useEffect, you probably want a derived value or event handler instead.
🎬 See it in action
The classic counter — the simplest React component. State, event, render.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
{count}
);
}
export default Counter;
Three things are happening in this component. (1) useState(0) creates a state variable count initialized to 0. (2) The render function uses count to display the value. (3) The buttons call setCount to change state, which triggers a re-render. That's React: state, render, update. Every component you'll ever write follows this pattern.
⚠️ Common mistakes (from real beginners)
Each of these will cost you hours if you don't know it.
The #1 reason beginners fail. If you don't understand arrow functions, destructuring, map/filter, and closures, every React tutorial becomes memorization. Complete the JavaScript track first.
items.push(x) or user.name = 'Bob' doesn't trigger re-renders — React compares state by reference. Fix: use setters that return new values: setItems([...items, x]).
Rendering an array without keys produces console warnings and buggy updates. Fix: {items.map(item => . Use stable IDs, not array indices.
If items reorder, delete, or insert, index keys cause wrong components to keep wrong state. Fix: use a stable unique ID from your data. Generate one with crypto.randomUUID() if needed.
Missing dependencies cause stale closures. Extra dependencies cause infinite loops. Fix: install the eslint-plugin-react-hooks plugin — it catches both automatically.
If you compute values in useEffect and store them in state, you have a bug waiting to happen. Fix: compute derived values in the render function directly. useEffect is for external sync, not for computing.
Passing props through 5 components that don't use them is a smell. Fix: use Context or component composition (pass children, not props).
if (x) { useState(...) } breaks React — hooks must be called in the same order every render. Fix: call hooks at the top of the component, unconditionally.
🔨 Projects by difficulty
Build these in order. Each one uses only concepts from the phases before it.
Counter
Increment, decrement, reset. Uses useState + events. The hello world of React.
To-do list
Add, complete, delete items. Uses state + lists + keys. The classic first real project.
Color picker
Pick a color, see it applied. Uses controlled inputs + state. First form.
Weather app
Fetch from an API, show current weather. Uses useEffect + async/await + loading states. First data-fetching app.
Movie search
Search box with debouncing, results grid, loading + error states. Uses everything so far. Looks like a real app.
Full blog
Multi-page with routing, forms, CRUD against localStorage. Uses React Router + forms + all hooks. Ship-ready.
❓ Frequently asked questions
Do I need to know JavaScript before React?
Yes — absolutely. React is a JavaScript library. If you don't understand functions, arrays, objects, arrow functions, and closures, learning React becomes memorization instead of understanding. Spend 2-3 months on JavaScript first. Complete the JavaScript track on this site, then come back to React.
What is React?
React is a JavaScript library for building user interfaces. Instead of manipulating the DOM directly, you describe what the UI should look like as a function of state, and React updates the DOM efficiently when state changes.
What is JSX?
JSX is a syntax extension that lets you write HTML-like code inside JavaScript. Instead of createElement('div', ...), you write
What is the difference between props and state?
Props are data passed from a parent component to a child — they're read-only. State is data that a component owns and can change over time. When state changes, the component re-renders. The mental model: props flow down, state lives inside a component.
What is a hook in React?
A hook is a function that lets a component 'hook into' React features. useState adds state to a function component. useEffect runs side effects after render. useContext reads context. useRef holds a mutable value across renders. Hooks were introduced in React 16.8 (2019) and replaced class components as the standard way to write React.
What is the difference between a class component and a function component?
Function components are the modern standard. They're just JavaScript functions that return JSX. Class components use ES6 classes and lifecycle methods. Function components with hooks are shorter, easier to test, and align with functional programming.
Do I need a build tool to use React?
Not strictly. You can use React via CDN with Babel in the browser. But for real projects, use Vite (the modern standard) or Next.js (for server-rendered apps). Vite is the easiest starting point — three commands and you're running.
What should I build after this course?
A to-do list (learn state + events), a weather app (learn API fetching + loading states), a movie search (learn debouncing + rendering lists), a full blog (learn routing + forms), a dashboard (learn complex state + layouts). Each project teaches a specific skill. Build at least three before calling yourself a React developer.