React

What's inside

Lessons go from the basics to advanced topics. Read them in order, or jump to what you need.

1. 01

   Chapter 1

   Getting Started

   • 1React IntroductionReact is a JavaScript library for building user interfaces from small, reusable components. Discover its declarative style, the virtual DOM, single-page apps, and how to run React examples right here.
   • 2Setting Up React with ViteCreate a real React project on your computer with Vite: install Node.js, run npm create vite@latest, explore the project files and start the development server.
   • 3Your First ComponentWrite your first React component: a JavaScript function that returns JSX. Learn the naming rule, how to use one component inside another, and how components are exported and imported in real projects.
   • 4React JSXJSX lets you write HTML-like markup inside JavaScript. Learn its rules: one root element, closing every tag, className, camelCase attribute names, and embedding JavaScript expressions in curly braces {}.
   • 5Rendering ElementsLearn how a React app appears on the page: createRoot() connects React to an HTML element, render() displays your components, and StrictMode helps you catch bugs during development. See how React updates only what changed.
2. 02

   Chapter 2

   Components

   • 6Components and CompositionComponents are the building blocks of every React app. Learn the two ways to write them, how to build a full page by composing small components, when to split a UI into components, and why components must be pure.
   • 7React PropsProps let you pass data from a parent component to a child, just like HTML attributes. Learn how to pass and read props, use destructuring and default values, and why props are read-only.
   • 8The children PropWhatever you put between a component's opening and closing tags arrives in a special prop called children. Use it to build flexible wrappers such as cards, alerts, dialogs and page layouts.
   • 9Conditional RenderingShow different UI depending on conditions. Learn if with early return, the ternary operator ? :, the logical && operator, returning null, and how to avoid the famous 0 bug.
   • 10Lists and KeysRender lists of data with the map() array method, filter them with filter(), and give every item a unique, stable key so React can recognize it. See with your own eyes what goes wrong when you use the index as a key.
   • 11Styling React ComponentsStyle React components with inline style objects, CSS classes through className, and CSS Modules that keep class names local to each component. Learn conditional styles and when to choose each approach.
   • 12Handling EventsRespond to clicks, typing and form submissions with event handlers. Learn to pass a function without calling it, pass arguments, use the event object, prevent default behavior, stop propagation and pass handlers as props.
3. 03

   Chapter 3

   State & Hooks

   • 13State With useStateState is a component's memory: data that changes over time and updates the screen. Learn the useState hook, why regular variables aren't enough, state as a snapshot, updater functions, and how to update objects and arrays without mutating them.
   • 14Forms and Controlled InputsBuild forms the React way with controlled inputs: the input shows the value stored in state, and every change updates that state. Handle text fields, selects, checkboxes and radio buttons, manage many fields with one object, and validate data before submitting.
   • 15Lifting State UpWhen two components need the same data, move the state up to their closest common parent and pass it down with props. Learn this pattern, the single source of truth, and how children update the parent's state through callback props.
   • 16Effects With useEffectEffects let a component synchronize with things outside React: timers, the browser window, subscriptions and network requests. Learn when effects run, the dependency array, cleanup functions and the common mistakes to avoid.
   • 17Refs With useRefuseRef gives a component a box that remembers a value between renders without causing a re-render. Use it to reach DOM elements directly, such as focusing an input, and to store values that aren't shown on screen, like a timer ID.
   • 18Context With useContextContext lets a parent share data with every component below it, however deep, without passing props through each level. Learn createContext, the Provider and useContext, and when context is the right tool.
   • 19Managing State With useReducerWhen state logic grows, move it into a reducer: a pure function that takes the current state and an action and returns the new state. Learn useReducer, dispatch and action objects, and when to choose it over useState.
   • 20Custom HooksCustom hooks let you move logic that uses state and effects into reusable functions whose names start with use. Build useToggle, useWindowWidth and useCounter, learn the rules, and see a useLocalStorage hook for real projects.
   • 21useMemo and useCallbackuseMemo remembers the result of an expensive calculation, and useCallback remembers a function between renders. Learn how they work with memo, how to see their effect with your own eyes, and why you should use them only when they really matter.
   • 22Fetching DataLoad data from a server with useEffect, and always handle its three states: loading, success and error. Practice with a simulated API built from a Promise and setTimeout, then see the real fetch version and learn about race conditions.
4. 04

   Chapter 4

   Building Apps

   • 23Routing With React RouterAdd multiple pages to a single-page app with React Router: install react-router-dom, define routes, navigate with Link and NavLink, read URL parameters with useParams, navigate in code with useNavigate, and build nested layouts with Outlet.
   • 24React Project StructureOrganize a growing React project so it stays easy to navigate: folders for components, pages, hooks, context and services, a feature-based structure for big apps, naming conventions, and path aliases and environment variables in Vite.
   • 25React With TypeScriptTypeScript adds types to your React code, so mistakes are caught while you type, before anything runs. Create a React + TypeScript project with Vite, then type props, children, state, events, refs, reducers and generic components in .tsx files.
   • 26Performance TipsKeep React apps fast: understand what causes re-renders, keep state close to where it's used, don't store what you can calculate, keep the UI responsive with useDeferredValue and useTransition, split your code with lazy and Suspense, and measure before you optimize.
   • 27Project: A To-Do AppPut everything together and build a complete to-do app: add tasks, mark them done, edit and delete them, filter them, show how many are left and clear the completed ones. Then see how to split it into files and save tasks in a real project.
   • 28Next StepsYou've mastered the React fundamentals. Review what you've learned, then explore your roadmap: TypeScript, Next.js, data-fetching and state libraries, styling, testing and deployment, plus project ideas for your portfolio.