React

A JavaScript library for building user interfaces from components.

React lets you build a user interface out of small components, each describing what the screen should show for the current data. It was released by Facebook in 2013 and is now the most widely used front-end library.

  • Intermediate
  • 12 lessons
Not started yet
Start lesson 1

Lessons

  1. Hello, React!You will write your first React component: a function that returns JSX, which looks like HTML but is JavaScript. Every React app is built from components like this.
  2. Props & CompositionYou will learn how to pass data from a parent component to a child with props, and how to nest components using children. Props are how components share data.
  3. State & useStateYou will learn how to give a component its own changing data with `useState`. When state changes, React updates the screen to match.
  4. useEffect & Side EffectsYou will learn how to use `useEffect` for work outside rendering, such as fetching data, timers and subscriptions, and how to clean it up. Getting this right avoids leaks and duplicate requests.
  5. Custom HooksYou will learn how to write custom hooks: functions that start with `use` and call other hooks. They let you reuse the same stateful logic in several components.
  6. Context & State ManagementYou will learn how to share data such as the current user or theme across many components with Context, without passing props through every level. You will also see when a state library is a better fit.
  7. Mini Project: Weather DashboardYou will build a weather dashboard that uses components, props, state, effects and a custom hook for fetching data. It puts the earlier lessons together in one small app.
  8. Lists, Keys & Conditional RenderingYou will learn how to render lists and show content conditionally, and how to avoid two common bugs: missing keys and a stray 0 appearing on the page.
  9. Forms & User InputYou will learn how to build forms whose inputs are driven by state, using one state object and one change handler. This pattern covers most forms you will write.
  10. useReducer & State PatternsYou will learn how to manage related pieces of state with useReducer, which keeps every update in one function. This stops separate useState calls from getting out of sync.
  11. Performance: memo, useMemo & useCallbackYou will learn how to use memo, useMemo and useCallback to avoid unnecessary re-renders. React is fast by default, so use these only where you have measured a problem.
  12. React CheatsheetComponents, hooks, and patterns on one page.

Install it on your own computer

Install Node.js first, then create a new React project with Vite. Vite sets up everything you need to start writing components.

Bash
# Using Vite (recommended):
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

# Or with TypeScript:
npm create vite@latest my-app -- --template react-ts

What people build with React

Learn the basics first, then pick up these tools when a project needs them.

Practical uses

  • Build component-based web interfaces
  • Create dashboards and admin systems
  • Power server-rendered and static sites
  • Share UI concepts with native mobile apps

Projects to try

  1. Recipe organizer
  2. Accessible component library
  3. Analytics dashboard
  4. Realtime collaborative editor

Common tools and packages

Next.jsReact RouterTanStack QueryZustandRedux ToolkitStorybookTesting LibraryReact Hook Form

Well-known software

FacebookInstagramNetflixAirbnbShopify AdminDiscord