React for Beginners

React for Beginners is a Breni path on building user interfaces with React, and it assumes you already know JavaScript functions, arrays, objects and modules. Its 8 courses cover how React works, components and props, state and events, effects and data fetching, more hooks, routing and forms, styling and testing, and a final project. Learners finish able to build a multi-page app that fetches data, manages state and is deployed online. State is taught before effects, and every course opens after the one before it.

  • 8 courses
  • 12 learning objectives
  • Level: intermediate
  • Language: English
  • Price: Subscription, free trial

What you will be able to do

  • Build a page from reusable components that pass data through props
  • Manage form input and user events with useState
  • Fetch data from an API with useEffect, handling loading and errors
  • Share state across an app with context and a custom hook
  • Add multiple pages to an app with React Router
  • Test a component and deploy a finished app

Full curriculum

Part 1 · React basics

1. How React Works: Core Concepts

Explain what React does and set up a first project. Units, in order: Why React exists; Components and the virtual DOM; Setting up a project with Vite; JSX syntax; React developer tools; How React re-renders a page.

  • — Why React Exists
    Learn why React helps build web pages fast.
    • Web Apps Before React
    • Declarative UI Design
  • — Components and Virtual DOM
    Discover building blocks and how React updates fast.
    • UI as Small Parts
    • The Virtual DOM
  • — Setting Up With Vite
    Create your first modern React project using Vite.
    • Tools for React
    • Your First Vite App
  • — Understanding JSX Syntax
    Write HTML code inside JavaScript safely.
    • HTML in JavaScript
    • Using JavaScript Variables
  • — React Developer Tools
    Inspect your React components and debug apps.
    • Browser Extensions
    • Inspecting Components
  • — How Re-Rendering Works
    See how React updates the screen for changes.
    • Triggering Updates
    • The Diffing Process

2. Components and Props

Build interfaces out of small reusable components. Units, in order: Function components; Passing data with props; Children and composition; Rendering lists with keys; Conditional rendering; Splitting a page into components.

3. State and Events

Make components respond to user input. Units, in order: useState; Handling events; Controlled form inputs; Lifting state up; Updating arrays and objects in state; Sharing state between sibling components.

Part 2 · Hooks and data

4. Effects and Data Fetching

Load data and sync with the outside world using effects. Units, in order: useEffect; Fetching from an API; Loading and error states; Cleaning up effects; When you do not need an effect.

5. More React Hooks

Use refs, context and custom hooks to share logic. Units, in order: useRef; useContext; useReducer; Writing custom hooks; useMemo and useCallback.

6. Routing and Forms

Build multi-page apps with routing and solid forms. Units, in order: React Router basics; Route parameters; Nested layouts; Form validation; Submitting data to an API; Protecting routes behind a login.

Part 3 · Shipping React

7. Styling and Testing React Apps

Style components and test that they work. Units, in order: CSS modules; Tailwind CSS; Accessible components; Testing with React Testing Library; Debugging common React errors.

8. React Project and Deployment

Build and deploy a complete React app. Units, in order: Planning the components for an app; Managing app-wide state; Performance basics; Building for production; Deploying to a hosting service.

Sample: How React Works: Core Concepts

The opening tier, (Why React Exists). Learn why React helps build web pages fast.

Web Apps Before React

See how old web pages took much manual work.

Declarative UI Design

Learn to describe what you want to see instead.

Questions about React for Beginners

Do I need to know JavaScript before React?

Yes. React is JavaScript, so take JavaScript for Beginners on Breni first if functions, arrays and modules are new to you.

How long does it take to learn React?

With solid JavaScript, the basics take a few weeks of regular practice.

Does the path use class components?

No. It teaches modern function components and hooks, which is how most new React code is written.

Is React a framework or a library?

React is a library for building interfaces. Frameworks such as Next.js add routing and server features on top of it.

Do I get a certificate in React?

Completing all 8 courses earns a Breni certificate of completion.

Related learning paths

Start React for Beginners

Get Breni on Google Play and start React for Beginners Download on the App Store