Learn React

Learn React by writing it. This React JS tutorial takes you from your first line of JSX to hooks, state management and complete apps, and every component you write renders right on your phone in a live preview.

88 courses and 324 interactive lessons, levels A1 to C1. Read a short concept, type real code, tap Run and see the result. No laptop and no setup needed.

WRITE CODE ON YOUR PHONE

• A code editor made for JSX, with a live preview that renders your component inside the app

• The runtime (ReactDOM and Babel) is bundled into the app, so your code runs on the device, not on a server

• Multi-file projects: import one component into another, the way real apps are built

• Tap your rendered button, type into your form and watch the UI respond

THE LAB

• Hooks Lab: see every state change and every re-render as it happens

• Props knobs: change a prop with a slider and watch the component update

• Render profiler and state timeline (Pro): find out which component re-rendered and why, then scrub back through your state

STEP BY STEP, BEGINNER TO ADVANCED

• Basics: JSX, components, props, state, events, lists and keys, conditional rendering

• Hooks: useState, useEffect, useRef, useReducer, custom hooks, useLayoutEffect and more

• Forms and validation, React Hook Form, controlled and uncontrolled inputs

• State management: Context, Redux Toolkit and RTK Query, Zustand and Jotai

• React Router, data fetching, TanStack Query, SWR and optimistic UI

• TypeScript, testing, Storybook, accessibility and security

• Performance: memoization, code splitting, Suspense, transitions, virtualized lists

• React 19 and Server Components, SSR and hydration, streaming

• Next.js App Router, data fetching and authentication

• React Native fundamentals for web developers

• Deployment, micro-frontends and module federation

BUILD REAL PROJECTS

20 guided projects, one small step at a time: a like button, profile cards, a tip calculator, a quiz game, a stopwatch, a sign-up form, a shopping cart, an image carousel, a paginated list, a todo app and more. Each step checks that your component really works before you move on.

PRACTICE UNTIL IT STICKS

• 30 coding missions (easy, medium and hard) on hooks, rendering, forms, context and performance

• UI Match: rebuild a target component and get a score for structure, style and text

• Bug Hunt: find and fix the bug in a broken component

• Component Recall: type the missing piece back into code you already got working, with spaced repetition

• Quizzes with 50 questions, 50 interview questions and a cheat sheet

• Daily challenge, streaks, XP and a leaderboard

AI MENTOR (PRO)

Stuck on a hook or an error? Ask the AI mentor for a clear explanation, let AI review your code and suggest a fix, or generate a custom lesson on any topic.

CERTIFICATE (PRO)

Pass the final exam and earn a certificate you can share.

WHO IT'S FOR

• Beginners who know a little HTML, CSS or JavaScript

• Developers coming from another framework who need to switch fast

• Anyone preparing for a frontend developer interview

• Self-taught coders building a portfolio of projects

FREE AND PRO

Free: the first course, one guided project, 2 coding missions, the code editor with live preview, Hooks Lab, props knobs, Bug Hunt and 3 UI Match checks a day. The free version shows ads.

Pro: all 88 courses, all projects and missions, the AI mentor, the render profiler and state timeline, the certificate exam and no ads.

The app is available in 22 languages.

React is a trademark of Meta Platforms, Inc. Next.js is a trademark of Vercel, Inc. This is an independent learning app, not affiliated with or endorsed by Meta or Vercel.

Privacy Policy: https://www.coddykit.com/terms/privacy-policy