Build practical programming and technology skills

React Development

Build accessible React applications with reusable components, predictable state, forms, routing, data fetching, error handling, and automated tests.

View curriculum

PractitionerDifficulty

40 hoursEstimated time

8 modules32 lessons

5 guided labsKnowledge check

Plan your learning

Path Brief

Skills you will practice

Web · React Development
Web · React Mental Model
Web · Component State And Events
Web · Forms And Derived Ui
Web · Effects And External Systems
Web · Component Architecture

Prerequisites

Html Css Foundations
Javascript Fundamentals

Tools

A current web browser
A code editor or terminal appropriate to the path
A safe local or virtual lab environment

Before you begin

What you need

Html Css Foundations
Javascript Fundamentals

Step-by-step curriculum

Learning modules

Complete lessons in order or open the module that matches your current goal. Your lesson progress is saved on this device.

01React Mental ModelBuild practical skill in react mental model and connect it to the outcomes of React Development.4 lessons · 1 lab

Lesson 1

React Mental Model: Core Concepts for React Development

Understand the concepts, decisions, and vocabulary you need before applying React Mental Model in React Development.

25 min

Lesson 2

Set Up and Explore React Mental Model in React Development

Prepare the tools, data, project state, or test environment needed to explore React Mental Model safely and repeatably.

25 min

Lesson 3

Build a Practical React Mental Model Example in React Development

Build a small component tree with local state and a derived value; add one effect for an external subscription and clean it up correctly.

30 min

Lesson 4

Debug Common React Mental Model Problems in React Development

Recognize common failure modes in React Mental Model, use the relevant diagnostics, and verify the correction.

25 min

Guided lab · 55 min · Safe

Guided Lab: React Mental Model in React Development

React Development — React Mental Model lab: Build a small component tree with local state and a derived value; add one effect for an external subscription and clean it up correctly.

Not started

02Component State and EventsBuild practical skill in component state and events and connect it to the outcomes of React Development.4 lessons · 1 lab

Lesson 1

Component State and Events: Core Concepts for React Development

Understand the concepts, decisions, and vocabulary you need before applying Component State and Events in React Development.

25 min

Lesson 2

Set Up and Explore Component State and Events in React Development

Prepare the tools, data, project state, or test environment needed to explore Component State and Events safely and repeatably.

25 min

Lesson 3

Build a Practical Component State and Events Example in React Development

Build a counter or form whose UI changes from one explicit state value and handles an invalid input.

30 min

Lesson 4

Debug Common Component State and Events Problems in React Development

Recognize common failure modes in Component State and Events, use the relevant diagnostics, and verify the correction.

25 min

Guided lab · 55 min · Moderate

Guided Lab: Component State and Events in React Development

React Development — Component State and Events lab: Build a counter or form whose UI changes from one explicit state value and handles an invalid input.

Not started

03Forms and Derived UIBuild practical skill in forms and derived ui and connect it to the outcomes of React Development.4 lessons · 1 lab

Lesson 1

Forms and Derived UI: Core Concepts for React Development

Understand the concepts, decisions, and vocabulary you need before applying Forms and Derived UI in React Development.

25 min

Lesson 2

Set Up and Explore Forms and Derived UI in React Development

Prepare the tools, data, project state, or test environment needed to explore Forms and Derived UI safely and repeatably.

25 min

Lesson 3

Build a Practical Forms and Derived UI Example in React Development

Build a form or request validator with valid, missing, malformed, and boundary inputs.

30 min

Lesson 4

Debug Common Forms and Derived UI Problems in React Development

Recognize common failure modes in Forms and Derived UI, use the relevant diagnostics, and verify the correction.

25 min

Guided lab · 55 min · Moderate

Guided Lab: Forms and Derived UI in React Development

React Development — Forms and Derived UI lab: Build a form or request validator with valid, missing, malformed, and boundary inputs.

Not started

04Effects and External SystemsBuild practical skill in effects and external systems and connect it to the outcomes of React Development.4 lessons · 1 lab

Lesson 1

Effects and External Systems: Core Concepts for React Development

Understand the concepts, decisions, and vocabulary you need before applying Effects and External Systems in React Development.

25 min

Lesson 2

Set Up and Explore Effects and External Systems in React Development

Prepare the tools, data, project state, or test environment needed to explore Effects and External Systems safely and repeatably.

25 min

Lesson 3

Build a Practical Effects and External Systems Example in React Development

Build a small component tree with local state and a derived value; add one effect for an external subscription and clean it up correctly.

30 min

Lesson 4

Debug Common Effects and External Systems Problems in React Development

Recognize common failure modes in Effects and External Systems, use the relevant diagnostics, and verify the correction.

25 min

Guided lab · 55 min · Moderate

Guided Lab: Effects and External Systems in React Development

React Development — Effects and External Systems lab: Build a small component tree with local state and a derived value; add one effect for an external subscription and clean it up correctly.

Not started

05Component ArchitectureBuild practical skill in component architecture and connect it to the outcomes of React Development.4 lessons · 1 lab

Lesson 1

Component Architecture: Core Concepts for React Development

Understand the concepts, decisions, and vocabulary you need before applying Component Architecture in React Development.

25 min

Lesson 2

Set Up and Explore Component Architecture in React Development

Prepare the tools, data, project state, or test environment needed to explore Component Architecture safely and repeatably.

25 min

Lesson 3

Build a Practical Component Architecture Example in React Development

Build a small component tree with local state and a derived value; add one effect for an external subscription and clean it up correctly.

30 min

Lesson 4

Debug Common Component Architecture Problems in React Development

Recognize common failure modes in Component Architecture, use the relevant diagnostics, and verify the correction.

25 min

Guided lab · 55 min · Moderate

Guided Lab: Component Architecture in React Development

React Development — Component Architecture lab: Build a small component tree with local state and a derived value; add one effect for an external subscription and clean it up correctly.

Not started

06Routing and Application StructureBuild practical skill in routing and application structure and connect it to the outcomes of React Development.4 lessons

Lesson 1

Routing and Application Structure: Core Concepts for React Development

Understand the concepts, decisions, and vocabulary you need before applying Routing and Application Structure in React Development.

25 min

Lesson 2

Set Up and Explore Routing and Application Structure in React Development

Prepare the tools, data, project state, or test environment needed to explore Routing and Application Structure safely and repeatably.

25 min

Lesson 3

Build a Practical Routing and Application Structure Example in React Development

Create routes for a list view and a detail view with an ID parameter, then test valid and missing IDs.

30 min

Lesson 4

Debug Common Routing and Application Structure Problems in React Development

Recognize common failure modes in Routing and Application Structure, use the relevant diagnostics, and verify the correction.

25 min

07Reliability and PerformanceBuild practical skill in reliability and performance and connect it to the outcomes of React Development.4 lessons

Lesson 1

Reliability and Performance: Core Concepts for React Development

Understand the concepts, decisions, and vocabulary you need before applying Reliability and Performance in React Development.

25 min

Lesson 2

Set Up and Explore Reliability and Performance in React Development

Prepare the tools, data, project state, or test environment needed to explore Reliability and Performance safely and repeatably.

25 min

Lesson 3

Build a Practical Reliability and Performance Example in React Development

Measure one slow operation, apply one optimization, and compare before/after timing plus correctness.

30 min

Lesson 4

Debug Common Reliability and Performance Problems in React Development

Recognize common failure modes in Reliability and Performance, use the relevant diagnostics, and verify the correction.

25 min

08Production Application PracticesBuild practical skill in production application practices and connect it to the outcomes of React Development.4 lessons

Lesson 1

Production Application Practices: Core Concepts for React Development

Understand the concepts, decisions, and vocabulary you need before applying Production Application Practices in React Development.

25 min

Lesson 2

Set Up and Explore Production Application Practices in React Development

Prepare the tools, data, project state, or test environment needed to explore Production Application Practices safely and repeatably.

25 min

Lesson 3

Build a Practical Production Application Practices Example in React Development

Deploy a small version change to a disposable environment, verify health, then practice a rollback.

30 min

Lesson 4

Debug Common Production Application Practices Problems in React Development

Recognize common failure modes in Production Application Practices, use the relevant diagnostics, and verify the correction.

25 min

Portfolio integration

Capstone Project

Build a React Service-Booking Application

Combine the path skills in a portfolio-ready project with clear functional requirements, tests, verification evidence, and operating notes.

GuidedIndependentPortfolio

Acceptance criteria

The core workflow works from start to finish.
Invalid input or failure states are handled clearly.
The result is tested and documented.
A reviewer can reproduce the setup and verification.

Continue in Programming

Related Programming

Skill assessment

React Development

Path Brief

Skills you will practice

Prerequisites

Tools

What you need

Learning modules

React Mental Model: Core Concepts for React Development

Set Up and Explore React Mental Model in React Development

Build a Practical React Mental Model Example in React Development

Debug Common React Mental Model Problems in React Development

Guided Lab: React Mental Model in React Development

Component State and Events: Core Concepts for React Development

Set Up and Explore Component State and Events in React Development

Build a Practical Component State and Events Example in React Development

Debug Common Component State and Events Problems in React Development

Guided Lab: Component State and Events in React Development

Forms and Derived UI: Core Concepts for React Development

Set Up and Explore Forms and Derived UI in React Development

Build a Practical Forms and Derived UI Example in React Development

Debug Common Forms and Derived UI Problems in React Development

Guided Lab: Forms and Derived UI in React Development

Effects and External Systems: Core Concepts for React Development

Set Up and Explore Effects and External Systems in React Development

Build a Practical Effects and External Systems Example in React Development

Debug Common Effects and External Systems Problems in React Development

Guided Lab: Effects and External Systems in React Development

Component Architecture: Core Concepts for React Development

Set Up and Explore Component Architecture in React Development

Build a Practical Component Architecture Example in React Development

Debug Common Component Architecture Problems in React Development

Guided Lab: Component Architecture in React Development

Routing and Application Structure: Core Concepts for React Development

Set Up and Explore Routing and Application Structure in React Development

Build a Practical Routing and Application Structure Example in React Development

Debug Common Routing and Application Structure Problems in React Development

Reliability and Performance: Core Concepts for React Development

Set Up and Explore Reliability and Performance in React Development

Build a Practical Reliability and Performance Example in React Development

Debug Common Reliability and Performance Problems in React Development

Production Application Practices: Core Concepts for React Development

Set Up and Explore Production Application Practices in React Development

Build a Practical Production Application Practices Example in React Development

Debug Common Production Application Practices Problems in React Development

Capstone Project

Build a React Service-Booking Application

Acceptance criteria

Test your understanding

Related Programming

Check your starting point

Plan the capstone

Explore related paths