CodeBlanks Logo Icon CodeBlanks
Login Register
Free 4 levels

React

Learn React 18+ with JSX, hooks, context, Next.js and modern React architectures through projects.

The React course covers all levels with functional components, hooks, context, performance, React Router, Next.js, Server Components and concurrent features.

  • 252 lessons
  • 18 h 40 min
  • 11 projects
Start for free View curriculum

No account needed, you can start right away. To save your progress, create a free account

Levels

The React course goes from zero to expert in four levels. Start at any level you like.
Not sure of your level? Take the placement test
Beginner

Learn the building blocks of React: JSX, components, props, state and hooks to write real small apps.

  • React intro
  • JSX basics
  • Components
  • Props
84 lessons · 6 h 11 min See lessons →
Intermediate

Build intermediate skills with custom hooks, performance, React Router, error boundaries, Suspense, portals and testing.

  • Custom hook basics
  • Advanced custom hooks
  • Context deep dive
  • useReducer pattern
80 lessons · 5 h 55 min See lessons →
Advanced

Write production-grade apps with Next.js, SSR/SSG, API routes, data fetching, state libraries, forms, animation, accessibility and CI/CD.

  • Next.js basics
  • SSR and SSG
  • API routes
  • Data fetching
56 lessons · 4 h 9 min See lessons →
Expert

Dive deep into React with the React Compiler, Server Components, streaming SSR, concurrent features, fiber and custom renderers.

  • React Compiler
  • Server Components
  • Streaming SSR
  • Concurrent features
32 lessons · 2 h 25 min See lessons →

Projects you will build

At every level you combine what you learned into a real page.
Profile card Beginner · 4 lessons Shopping list Beginner · 4 lessons Counter app Beginner · 4 lessons Todo app Beginner · 4 lessons Cart management Intermediate · 4 lessons Performance project Intermediate · 4 lessons Multi-page app Intermediate · 4 lessons Dashboard project Intermediate · 4 lessons Next.js store Advanced · 4 lessons State project Advanced · 4 lessons Micro frontend and design system Expert · 4 lessons

How does it work?

Short explanation

Each lesson explains one concept in a few short cards; no long videos or walls of text.

Try it right away

Multiple choice, fill-in-the-blank and matching exercises lock in what you just learned.

Write it yourself

You write real code in the in-browser editor; it is checked instantly and you see the result live.

Curriculum

62 groups · 252 lessons · 18 h 40 min

Learn the building blocks of React: JSX, components, props, state and hooks to write real small apps.

1
React intro
4 lessons · 17 min
  1. 1 What is React? Learn that React is a component-based library and why it is so common on the web. 4 min
  2. 2 Setup and Vite Start a new React project with Vite and get to know the project structure. 4 min
  3. 3 Your first component Write a functional component and render it on the screen. 4 min
  4. 4 Summary - React intro Combine the basic flow by opening a Vite project and adding your first component. 5 min
2
JSX basics
4 lessons · 17 min
  1. 1 What is JSX? Learn that JSX lets you describe UI with an HTML-like syntax. 4 min
  2. 2 Expressions and curly braces Learn to put variables and expressions inside curly braces. 4 min
  3. 3 Attributes and className Learn how attributes are written in JSX and that className replaces class. 4 min
  4. 4 Summary - JSX basics Combine JSX expressions, attributes and styles to write a welcome card. 5 min
3
Components
4 lessons · 17 min
  1. 1 Component logic Learn that a component is a function that returns JSX. 4 min
  2. 2 Component tree Learn that components nest inside each other to form a tree. 4 min
  3. 3 Naming rules Learn that component names start with a capital letter and why it matters. 4 min
  4. 4 Summary - Components Assemble a page skeleton by composing several small components. 5 min
4
Profile cardProject
4 lessons · 19 min
  1. 1 Project: Profile card Review the goal and steps of the profile card project. 4 min
  2. 2 Avatar component Write the avatar component and show a name and role. 5 min
  3. 3 Info list Collect the profile details into a list. 5 min
  4. 4 Assemble the card Combine the avatar and info list into a ProfileCard component. 5 min
5
Props
5 lessons · 21 min
  1. 1 What are props? Learn that props pass data into a component from outside. 4 min
  2. 2 Reading props Learn to take the props object apart with destructuring. 4 min
  3. 3 Children prop Learn that the children prop carries the content inside a component. 4 min
  4. 4 Default props Learn to use a default value when a prop is missing. 4 min
  5. 5 Summary - Props Write a reusable button component using props. 5 min
6
Conditional rendering
5 lessons · 21 min
  1. 1 What is conditional rendering? Learn that you can show different content based on a condition. 4 min
  2. 2 Ternary operator Learn to write short conditional rendering with condition ? a : b. 4 min
  3. 3 Logical AND (&&) Learn the condition && element pattern and its pitfalls. 4 min
  4. 4 Early return Learn to return null or fallback content early from a component. 4 min
  5. 5 Summary - Conditional rendering Write a banner that shows a different heading for logged-in and guest users. 5 min
7
List rendering
5 lessons · 21 min
  1. 1 What is list rendering? Learn how to map an array into JSX. 4 min
  2. 2 The key attribute Learn why every list item needs a unique key. 4 min
  3. 3 Array to components Learn to produce custom components from an array of data. 4 min
  4. 4 Filtering and sorting Learn to render an array after filtering and sorting it. 4 min
  5. 5 Summary - List rendering Write a storefront that sorts a product list by price and shows it. 5 min
8
Shopping listProject
4 lessons · 19 min
  1. 1 Project: Shopping list Review the goal and steps of the shopping list project. 4 min
  2. 2 Item component Write the ListItem component that shows a single shopping item. 5 min
  3. 3 List body Write the ListBody component that renders items from an array. 5 min
  4. 4 Empty state Add code that shows a fallback message when the list is empty. 5 min
9
Events
4 lessons · 17 min
  1. 1 Events Learn to pass a function to event attributes like onClick. 4 min
  2. 2 The event object Learn to use the event object that comes to the handler. 4 min
  3. 3 Form events Learn to catch input change and form submit events. 4 min
  4. 4 Summary - Events Write a simple panel where a click on a button increases a counter. 5 min
10
useState
5 lessons · 21 min
  1. 1 What is state? Learn that state is data inside a component that can change. 4 min
  2. 2 The useState call Learn that useState returns a value and a setter. 4 min
  3. 3 Updating state Learn to update state with the setter and use the previous value. 4 min
  4. 4 Multiple state values Learn to use several useState calls in one component. 4 min
  5. 5 Summary - useState Practice state by writing a collapsible accordion component. 5 min
11
Counter appProject
4 lessons · 19 min
  1. 1 Project: Counter app Review the goal and steps of the counter app project. 4 min
  2. 2 Number and buttons Add the number display and the increment button. 5 min
  3. 3 Decrement and reset Add the decrement and reset buttons. 5 min
  4. 4 Boundary control Prevent the number from going below zero. 5 min
12
Forms
4 lessons · 17 min
  1. 1 Controlled input Learn to write a controlled component by binding input value to state. 4 min
  2. 2 Form submission Learn to catch form submission and read the data. 4 min
  3. 3 Multiple fields Learn to manage several form fields with one state. 4 min
  4. 4 Summary - Forms Write a short contact form with a name input. 5 min
13
Styling
4 lessons · 17 min
  1. 1 Styling with CSS Learn to style with className from an external CSS file. 4 min
  2. 2 CSS Modules Learn to create local class names with CSS Modules. 4 min
  3. 3 Inline styles Learn to write inline styles with the style attribute as an object. 4 min
  4. 4 Summary - Styling Write a styled price tag component with CSS Modules. 5 min
14
styled-components
4 lessons · 17 min
  1. 1 What is styled-components? Learn the basics of writing styles inside JS with styled-components. 4 min
  2. 2 Styling with props Learn to pass a prop to a styled component to change its style. 4 min
  3. 3 Using themes Learn to share theme values across components with ThemeProvider. 4 min
  4. 4 Summary - styled-components Write a themed button family (primary, ghost) with styled-components. 5 min
15
useReducer
4 lessons · 17 min
  1. 1 What is useReducer? Learn to move state updates into a function with useReducer. 4 min
  2. 2 Action and state Learn to define state transitions with action objects. 4 min
  3. 3 useState vs useReducer Learn when to prefer useReducer over useState. 4 min
  4. 4 Summary - useReducer Write a multi-action counter reducer and connect it to a component. 5 min
16
useEffect
4 lessons · 17 min
  1. 1 What is useEffect? Learn to perform side effects after render with useEffect. 4 min
  2. 2 Dependency array Learn that the dependency array controls when the effect runs. 4 min
  3. 3 Cleanup function Learn to clean up with the function an effect returns. 4 min
  4. 4 Summary - useEffect Write a hook that listens to window resize. 5 min
17
Context
4 lessons · 17 min
  1. 1 What is context? Learn that context is a way to share data instead of prop drilling. 4 min
  2. 2 createContext Learn to create a context with createContext and a default value. 4 min
  3. 3 Provider and useContext Learn to provide data with a Provider and read it with useContext. 4 min
  4. 4 Summary - Context Set up a theme (dark/light) context and connect two buttons. 5 min
18
useRef
4 lessons · 17 min
  1. 1 What is useRef? Learn to store a value without re-rendering with useRef. 4 min
  2. 2 DOM access Learn to reach a DOM node through a ref. 4 min
  3. 3 Timer example Learn to store a timer id with useRef. 4 min
  4. 4 Summary - useRef Write a form that focuses an input automatically when a button is pressed. 5 min
19
Todo appProject
4 lessons · 19 min
  1. 1 Project: Todo app Review the goal and steps of the todo app project. 4 min
  2. 2 Todo entry form Write a controlled form to add a new todo. 5 min
  3. 3 Todo list Render todos with map and toggle their done state. 5 min
  4. 4 Filter and summary Add active/completed filters and the remaining count. 5 min
20
Beginner finalFinal
4 lessons · 24 min
  1. 1 Challenge: Weather card Write a component that takes a city name prop and shows temperature and condition. 6 min
  2. 2 Challenge: Cart summary Write a summary component that computes the total price from a product list. 6 min
  3. 3 Challenge: Counter and reset Write a counter with increment, decrement and reset that has a lower bound. 6 min
  4. 4 Challenge: Dropdown menu Write a dropdown that closes on outside click using useRef and state. 6 min

Build intermediate skills with custom hooks, performance, React Router, error boundaries, Suspense, portals and testing.

1
Custom hook basics
4 lessons · 17 min
  1. 1 What is a custom hook? Learn that functions starting with use are reusable logic pieces. 4 min
  2. 2 useToggle Learn to write a useToggle hook that manages a boolean state. 4 min
  3. 3 usePrevious Write a usePrevious hook that stores the previous value. 4 min
  4. 4 Summary - Custom hook basics Write a useField hook for a form field and use it on two inputs. 5 min
2
Advanced custom hooks
4 lessons · 17 min
  1. 1 useLocalStorage Learn to write a hook that syncs state to browser localStorage. 4 min
  2. 2 useFetch Write a useFetch hook that manages data fetching and loading state. 4 min
  3. 3 useDebounce Write a useDebounce hook that delays a value change. 4 min
  4. 4 Summary - Advanced custom hooks Combine useFetch with useDebounce to write a search box. 5 min
3
Context deep dive
4 lessons · 17 min
  1. 1 Context separation Learn to protect performance by splitting multiple contexts. 4 min
  2. 2 Context + useReducer Learn to manage a global useReducer state through context. 4 min
  3. 3 Default value and error Learn to write a hook that throws when used outside the provider. 4 min
  4. 4 Summary - Context deep dive Make cart state global with context + useReducer. 5 min
4
useReducer pattern
4 lessons · 17 min
  1. 1 The reducer pattern Learn how the state, action and reducer trio works. 4 min
  2. 2 Action types Learn to define action types as constants. 4 min
  3. 3 Composition Learn to combine multiple reducers. 4 min
  4. 4 Summary - useReducer pattern Write a multi-step form wizard reducer and connect it. 5 min
5
Cart managementProject
4 lessons · 19 min
  1. 1 Project: Cart management Review the goal and steps of the cart management project. 4 min
  2. 2 Cart reducer Write the cart reducer with add, remove and clear actions. 5 min
  3. 3 Cart context Write a provider that wraps the cart reducer with context. 5 min
  4. 4 Add product UI Write a panel that lists products and adds them to the cart. 5 min
6
useMemo
4 lessons · 17 min
  1. 1 What is useMemo? Learn to cache an expensive computation with useMemo. 4 min
  2. 2 Dependency control Learn when useMemo recomputes. 4 min
  3. 3 Pitfalls Learn the cost of overusing useMemo. 4 min
  4. 4 Summary - useMemo Wrap the filter and sort of a big list with useMemo. 5 min
7
useCallback
4 lessons · 17 min
  1. 1 What is useCallback? Learn to cache a function with useCallback. 4 min
  2. 2 Sibling re-render Learn how useCallback prevents needless renders of child components. 4 min
  3. 3 useMemo vs useCallback Learn the difference between the two hooks. 4 min
  4. 4 Summary - useCallback Pass a stable handler with useCallback to protect a memoized child. 5 min
8
React.memo
4 lessons · 17 min
  1. 1 What is React.memo? Learn to wrap a component with React.memo so it skips renders when props are equal. 4 min
  2. 2 Prop comparison Learn that React.memo does a shallow compare. 4 min
  3. 3 Custom comparator Learn to write a custom comparator as the second argument. 4 min
  4. 4 Summary - React.memo Write a memoized list item and a useCallback parent. 5 min
9
Performance projectProject
4 lessons · 19 min
  1. 1 Project: Performance Review the goal and steps of the performance project. 4 min
  2. 2 Expensive computation Wrap an expensive stats computation with useMemo. 5 min
  3. 3 Stable handler Write a stable selection handler with useCallback. 5 min
  4. 4 Memoized list Stop needless renders with a memoized list item. 5 min
10
Router basics
4 lessons · 17 min
  1. 1 What is React Router? Learn client-side page transitions with React Router. 4 min
  2. 2 Defining routes Learn to set up a route tree with Routes and Route. 4 min
  3. 3 Link and NavLink Learn to change pages with Link and track active state with NavLink. 4 min
  4. 4 Summary - Router basics Set up a two-route skeleton with home and about pages. 5 min
11
Advanced router
4 lessons · 17 min
  1. 1 URL parameters Learn to read :id style parameters with useParams. 4 min
  2. 2 Nested routes Learn to manage nested routes with Outlet. 4 min
  3. 3 Programmatic navigation Learn to change pages from code with useNavigate. 4 min
  4. 4 Summary - Advanced router Set up a nested route structure with product list and detail pages. 5 min
12
Multi-page appProject
4 lessons · 19 min
  1. 1 Project: Multi-page app Review the goal and steps of the multi-page app project. 4 min
  2. 2 Layout and router Set up the layout component and the route tree. 5 min
  3. 3 List and detail Write the product list and detail pages. 5 min
  4. 4 Navigation and 404 Add a go-to-cart button and a 404 page. 5 min
13
Layout components
4 lessons · 17 min
  1. 1 The layout pattern Learn to write components that build a page skeleton with children. 4 min
  2. 2 Sidebar and header Learn to set up a page layout with a sidebar and header. 4 min
  3. 3 Layout with Outlet Learn to use a shared layout with React Router. 4 min
  4. 4 Summary - Layout components Write a DashboardLayout with header, sidebar and main content. 5 min
14
Error boundary
4 lessons · 17 min
  1. 1 What is an error boundary? Learn the class component that catches errors in a subtree. 4 min
  2. 2 Class component structure Learn to use getDerivedStateFromError and componentDidCatch. 4 min
  3. 3 Fallback UI Learn to write the fallback UI shown on error. 4 min
  4. 4 Summary - Error boundary Write a boundary that wraps a widget and shows a fallback on error. 5 min
15
Suspense and lazy
4 lessons · 17 min
  1. 1 What is React.lazy? Learn to lazily load components with React.lazy. 4 min
  2. 2 Suspense boundary Learn to show a fallback during load with Suspense. 4 min
  3. 3 Multiple boundaries Learn to place multiple Suspense boundaries strategically. 4 min
  4. 4 Summary - Suspense and lazy Lazily load a heavy modal with React.lazy and wrap it in Suspense. 5 min
16
Portals
4 lessons · 17 min
  1. 1 What is a portal? Learn to render a component elsewhere in the DOM with createPortal. 4 min
  2. 2 Modal example Learn to write a modal with portal that avoids overflow issues. 4 min
  3. 3 Event bubbling Learn that events still reach the component from a portal. 4 min
  4. 4 Summary - Portal Make a confirmation dialog a modal rendered outside the root via portal. 5 min
17
Advanced useRef
4 lessons · 17 min
  1. 1 useRef and computation Learn to keep a value with useRef without triggering renders. 4 min
  2. 2 Measuring Learn to measure an element's size via a ref. 4 min
  3. 3 forwardRef Learn to forward a ref to a child component with forwardRef. 4 min
  4. 4 Summary - Advanced useRef Wrap an input with forwardRef and focus it from the parent. 5 min
18
RTL tests
4 lessons · 17 min
  1. 1 React Testing Library Learn the basics of writing component tests with RTL. 4 min
  2. 2 render and screen Learn to render a component and query it with screen. 4 min
  3. 3 Firing events Learn to click and type with fireEvent and userEvent. 4 min
  4. 4 Summary - RTL tests Test a counter component by pressing the increment button. 5 min
19
Dashboard projectProject
4 lessons · 19 min
  1. 1 Project: Dashboard Review the goal and steps of the dashboard project. 4 min
  2. 2 Layout and route Set up the DashboardLayout and nested routes. 5 min
  3. 3 Stats widget Write a stats widget that does an expensive computation with useMemo. 5 min
  4. 4 Add via modal Write an add modal with portal and Suspense. 5 min
20
Intermediate finalFinal
4 lessons · 24 min
  1. 1 Challenge: useFetch hook Write a useFetch hook that returns loading, error and data states. 6 min
  2. 2 Challenge: Theme provider Write a dark/light theme provider with context + useReducer. 6 min
  3. 3 Challenge: Memoized list Write a filtered list optimized with React.memo, useMemo and useCallback. 6 min
  4. 4 Challenge: Routed cart Write product list, detail and cart routes with React Router. 6 min

Write production-grade apps with Next.js, SSR/SSG, API routes, data fetching, state libraries, forms, animation, accessibility and CI/CD.

1
Next.js basics
4 lessons · 17 min
  1. 1 What is Next.js? Learn that Next.js is a React-based framework. 4 min
  2. 2 App Router Learn the new App Router structure and file-based routes. 4 min
  3. 3 Page and layout Get to know page.tsx and layout.tsx files. 4 min
  4. 4 Summary - Next.js basics Set up a Next.js skeleton with home and about pages. 5 min
2
SSR and SSG
4 lessons · 17 min
  1. 1 What is SSR? Learn the concept of server-side rendering. 4 min
  2. 2 What is SSG? Learn the concept of static site generation. 4 min
  3. 3 Server Components Learn what server components are and how they differ. 4 min
  4. 4 Summary - SSR and SSG Set up a static home page and a dynamic product page. 5 min
3
API routes
4 lessons · 17 min
  1. 1 API routes Learn to write route handlers in Next.js. 4 min
  2. 2 GET and POST Learn to answer GET and POST requests. 4 min
  3. 3 JSON response Learn to return JSON with NextResponse. 4 min
  4. 4 Summary - API routes Write an API that lists products and adds a new one. 5 min
4
Next.js storeProject
4 lessons · 19 min
  1. 1 Project: Next.js store Review the goal and steps of the Next.js store project. 4 min
  2. 2 Static home page Write a home page that fetches products with SSG. 5 min
  3. 3 Dynamic product page Write a page that shows product detail from a URL parameter. 5 min
  4. 4 Cart API Write a POST API route that adds a product to the cart. 5 min
5
Data fetching
4 lessons · 17 min
  1. 1 Data fetching with SWR Learn to fetch cached data with SWR. 4 min
  2. 2 React Query basics Learn to manage server state with React Query. 4 min
  3. 3 Mutations Learn to change data with useMutation. 4 min
  4. 4 Summary - Data fetching Fetch products with SWR and write an add-to-cart flow. 5 min
6
Redux Toolkit
4 lessons · 17 min
  1. 1 What is Redux Toolkit? Learn that Redux Toolkit makes Redux easier. 4 min
  2. 2 createSlice Learn to write a slice and its reducer. 4 min
  3. 3 configureStore Learn to set up the store and wrap with Provider. 4 min
  4. 4 Summary - Redux Toolkit Set up a cart slice and store and connect them to a component. 5 min
7
Zustand
4 lessons · 17 min
  1. 1 What is Zustand? Learn that Zustand is a simple state library. 4 min
  2. 2 Store with create Learn to write a store with create. 4 min
  3. 3 Using selectors Learn to take only needed state with a selector and reduce renders. 4 min
  4. 4 Summary - Zustand Write a theme store and connect it to two components. 5 min
8
State projectProject
4 lessons · 19 min
  1. 1 Project: State management Review the goal and steps of the state management project. 4 min
  2. 2 Redux Toolkit store Set up a product slice and store with Redux Toolkit. 5 min
  3. 3 Zustand cart store Write a cart store with Zustand. 5 min
  4. 4 Data fetching with SWR Fetch products with SWR and feed them into the Zustand cart. 5 min
9
react-hook-form
4 lessons · 17 min
  1. 1 What is react-hook-form? Learn performant form management with react-hook-form. 4 min
  2. 2 register and handleSubmit Learn to bind fields with register. 4 min
  3. 3 Validation Learn to validate a form with a Zod schema. 4 min
  4. 4 Summary - react-hook-form Write a validated registration form with name and email fields. 5 min
10
Framer Motion
4 lessons · 17 min
  1. 1 What is Framer Motion? Learn the basics of writing animations with Framer Motion. 4 min
  2. 2 The motion component Learn to animate with motion.div style components. 4 min
  3. 3 Transitions and variants Learn to define component states with variants. 4 min
  4. 4 Summary - Framer Motion Make a modal animate when it opens and closes. 5 min
11
Accessibility and i18n
4 lessons · 17 min
  1. 1 Accessibility basics Learn why accessible components matter. 4 min
  2. 2 ARIA and keyboard Learn aria-label, aria-expanded and keyboard usage. 4 min
  3. 3 i18n and react-i18next Learn to write a multilingual UI with useTranslation. 4 min
  4. 4 Summary - Accessibility and i18n Write a fully accessible, bilingual dropdown menu. 5 min
12
Advanced testing
4 lessons · 17 min
  1. 1 Integration testing Learn to test several components together. 4 min
  2. 2 Mock Service Worker Learn to mock API requests with MSW. 4 min
  3. 3 Coverage measurement Learn to measure and read test coverage. 4 min
  4. 4 Summary - Advanced testing Mock a cart flow with MSW and test it. 5 min
13
CI/CD and monitoring
4 lessons · 17 min
  1. 1 CI/CD basics Learn the continuous integration and deployment flow. 4 min
  2. 2 GitHub Actions Learn to write a CI workflow for a React project. 4 min
  3. 3 Performance monitoring Learn to monitor performance with Lighthouse and web vitals. 4 min
  4. 4 Summary - CI/CD and monitoring Write a workflow with lint, test and build steps. 5 min
14
Advanced finalFinal
4 lessons · 24 min
  1. 1 Challenge: Next.js API Write an API route that returns products with GET and adds with POST. 6 min
  2. 2 Challenge: Zustand store Write a cart store and connect it to two components. 6 min
  3. 3 Challenge: Form and validation Write a react-hook-form registration form validated with Zod. 6 min
  4. 4 Challenge: Accessible modal Write a fully accessible modal with ARIA, keyboard and portal. 6 min

Dive deep into React with the React Compiler, Server Components, streaming SSR, concurrent features, fiber and custom renderers.

1
React Compiler
4 lessons · 17 min
  1. 1 What is the React Compiler? Learn that the new React Compiler offers automatic memoization. 4 min
  2. 2 Automatic memoization Learn that you no longer need to write useMemo and useCallback by hand. 4 min
  3. 3 Compatibility rules Learn the rules for writing compiler-friendly code. 4 min
  4. 4 Summary - React Compiler Write a performant list without manual memo thanks to the compiler. 5 min
2
Server Components
4 lessons · 17 min
  1. 1 What are Server Components? Learn that server components render on the server. 4 min
  2. 2 Client vs Server split Learn the 'use client' directive and the split rules. 4 min
  3. 3 Data fetching in RSC Learn to fetch data directly with async in a server component. 4 min
  4. 4 Summary - Server Components Fetch products in a server component and pass them to a client component. 5 min
3
Streaming SSR
4 lessons · 17 min
  1. 1 What is streaming SSR? Learn that rendering can be streamed in chunks. 4 min
  2. 2 Streaming with Suspense Learn to delay a section with a Suspense boundary. 4 min
  3. 3 Edge rendering Learn the differences of rendering on the edge. 4 min
  4. 4 Summary - Streaming SSR Set up a structure that lazily loads a section with Suspense. 5 min
4
Concurrent features
4 lessons · 17 min
  1. 1 What is Concurrent React? Learn that concurrent React can render in the background. 4 min
  2. 2 useTransition Learn to mark heavy updates as low priority with useTransition. 4 min
  3. 3 useDeferredValue Learn to defer the re-render of a value with useDeferredValue. 4 min
  4. 4 Summary - Concurrent features Write a fluid list with useDeferredValue on a search input. 5 min
5
React internals
4 lessons · 17 min
  1. 1 What is the reconciler? Learn that the reconciler performs diffing. 4 min
  2. 2 The fiber tree Learn that fiber nodes are the unit of rendering. 4 min
  3. 3 Commit and render Learn to distinguish render and commit phases. 4 min
  4. 4 Summary - React internals Build a fiber node by hand and explain the diff logic with an example. 5 min
6
Custom renderer
4 lessons · 17 min
  1. 1 What is a custom renderer? Learn that React can render to other targets (terminal, canvas). 4 min
  2. 2 react-reconciler Learn to write a host config with react-reconciler. 4 min
  3. 3 Host config Learn the core host config functions. 4 min
  4. 4 Summary - Custom renderer Set up a small custom renderer skeleton that prints to the console. 5 min
7
Micro frontend and design systemProject
4 lessons · 19 min
  1. 1 Project: Micro frontend and design system Review the goal and steps of the micro frontend and design system project. 4 min
  2. 2 Design system core Write a design system core with a theme and base components. 5 min
  3. 3 Page with server components Write a page that fetches data with a server component. 5 min
  4. 4 Concurrent features Make a heavy filter low priority with useTransition. 5 min
8
Expert finalFinal
4 lessons · 24 min
  1. 1 Challenge: Page with server components Write a page that fetches products in a server component and passes them to a client component. 6 min
  2. 2 Challenge: Concurrent search Write a search that stays fluid with useDeferredValue. 6 min
  3. 3 Challenge: Streaming page Write a streaming page where a section loads later with Suspense. 6 min
  4. 4 Challenge: Custom renderer skeleton Write a skeleton with react-reconciler that prints to the console. 6 min

Lessons are free, an account keeps your progress

You do not have to sign up. If you do, you continue where you left off and never lose your work.

  • Progress saved on every device
  • Earn XP and badges
  • Keep your daily streak
  • Get a certificate when you finish
create a free account

Frequently asked questions

Are the React lessons free?

Yes. All 252 lessons of the React course are free and you can start without an account.

Do I need any prior knowledge?

No. The beginner level starts from zero; a browser is all you need. If you already know the basics, start at a higher level.

How long does the course take?

Lessons take 2–8 minutes. The whole course is about 19 hours; with 15–20 minutes a day you can finish in a few months.

Do I get a certificate?

Yes. When you complete the course with a free account, a verifiable certificate is issued in your name.

Will I lose my progress without an account?

Without an account your progress is kept only in your current browser. When you create a free account it is moved to your account.

Next step Flutter

All levels of Flutter 3.x from widgets to state, Firebase and expert topics with hands-on projects.