⚛️

React Fundamentals

Learn React from scratch — components, JSX, props, state, and effects — building live, interactive UIs right in your browser. The library behind Facebook, Instagram, and most modern web apps.

Prerequisites:🚀Modern JavaScript ⚙️Function Factory 🔌DOM Connector

What is React (and Why It Exists)

Understand the problem React solves: keeping a complex UI in sync with changing data, without hand-writing DOM updates.

Your First Render

Load React from a CDN and put your first component on the screen with ReactDOM.createRoot and root.render.

JSX: HTML Inside JavaScript

Write markup that lives inside JavaScript, embed live values with curly braces, and learn why React uses className instead of class.

Components: Reusable Pieces of UI

Build your own components — functions that return JSX — and reuse them to compose a page, the way every real app is built.

Props: Passing Data to Components

Make one component show different data by passing it props — the mechanism behind every reusable card, button, and list item.

State: Making Components Remember

Use the useState hook to give a component memory that survives between renders — and watch React re-render automatically when it changes.

Handling Events

Respond to clicks and typing with onClick and onChange, and learn the #1 beginner gotcha: pass the handler, don't call it.

Showing Things Conditionally

Render different UI depending on state using the && operator and the ternary — the pattern behind every toggle, spinner, and empty state.

Rendering Lists with map and keys

Turn an array of data into a list of elements with .map(), and learn why React needs a key on every list item.

Side Effects with useEffect

Run code that reaches outside React — timers, the document title, subscriptions — after a render, and control when it runs with the dependency array.

Capstone: A Live Tip Calculator

Combine state, events, props of derived values, and live rendering into one real component — a tip calculator that updates as you type.

Codelab: Build a Todo App

Put state, lists, keys, and events together to build a working todo list — add, display, and delete tasks, all in React.

Graduating to a Real Toolchain

Understand why the CDN + in-browser Babel setup doesn't scale, and what a build tool like Next.js gives you instead.