Is financial aid available?

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Building Applications with React

Building Applications with React

This course is part of Practical JavaScript: From Scratch to React Specialization

Instructor: Steve Oney

Included with Learn more

Ask Coursera

3 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

4 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

3 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

4 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

What you'll learn

Configure and set up a professional React build environment, and build interfaces with function components, JSX, props, state, and hooks.
Use special React tools called hooks to remember page information, handle updates, and run background tasks easily.
Share live page data between different parts of your application and set up custom pathways for multiple web pages.
Explore the most widely used React libraries and learn how to safely incorporate non-React code into components.

Details to know

Shareable certificate

Add to your LinkedIn profile

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your subject-matter expertise

This course is part of the Practical JavaScript: From Scratch to React Specialization

When you enroll in this course, you'll also be enrolled in this Specialization.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

There are 3 modules in this course

Static page logic and complex state updates can make modern web development slow and tedious. In “Building Applications with React,” you bridge the gap to professional software engineering by mastering React, the industry-standard user interface library. You learn to break down complex layouts into reusable components, declaratively manage application state, and seamlessly handle dynamic user events. You’ll also build a single-page application with modern routing and deploy it to a public static hosting service to showcase your ready-to-work developer skills. By exploring the power of custom Hooks and side effects, you will confidently fetch remote data and preserve application flow.

In this module, you will learn how React helps you build dynamic user interfaces. You will create components with JSX, reuse them with props, render lists and conditions, manage state with useState, and handle events and form input.

What's included

29 videos5 readings4 programming assignments20 ungraded labs

29 videosTotal 143 minutes

Introduction: Course and Series2 minutes
Learning Programming in the Age of Generative AI6 minutes
Submitting Assignments4 minutes
Introduction: Creating React Components 1 minute
Libraries and Frameworks2 minutes
First React App10 minutes
React Function Components4 minutes
React Elements and JSX5 minutes
JavaScript Expressions in JSX3 minutes
Reusing Components with Properties5 minutes
Rendering Lists with map6 minutes
Keys and Component Identity4 minutes
Conditional Rendering Patterns6 minutes
React Components: Understanding the Mechanics (Part I)16 minutes
React Components: Understanding the Mechanics (Part II)5 minutes
Conclusion: Creating React Components 1 minute
Introduction: Handling Events in React Components1 minute
Adding Event Listeners in React6 minutes
React Event Objects4 minutes
Avoiding Common React Event Mistakes3 minutes
React Events: Understanding the Mechanics4 minutes
Conclusion: Handling Events in React Components1 minute
Introduction: Managing State in React Components1 minute
React State and useState8 minutes
Updating State6 minutes
Understanding (and Avoiding) Mutation14 minutes
Avoiding Common React State Mistakes5 minutes
React State: Understanding the Mechanics11 minutes
Conclusion: Managing State in React Components1 minute

5 readingsTotal 50 minutes

Syllabus10 minutes
Help Us Learn About You!10 minutes
Working on the Assignments20 minutes
Practice and Learn: Success Strategies for Practical JavaScript5 minutes
Series Learning Roadmap5 minutes

4 programming assignmentsTotal 330 minutes

Module 1 Graded Assignment60 minutes
Practice: Creating React Components90 minutes
Practice: Handling Events in React Components90 minutes
Practice: Managing State in React Components90 minutes

20 ungraded labsTotal 295 minutes

Reading: Welcome to Course 410 minutes
Reading: Libraries and Frameworks15 minutes
Reading: First React App15 minutes
Reading: React Function Components15 minutes
Reading: React Elements and JSX15 minutes
Reading: JavaScript Expressions in JSX15 minutes
Reading: Reusing Components with Properties15 minutes
Reading: Rendering Lists with map15 minutes
Reading: Keys and Component Identity15 minutes
Reading: Conditional Rendering Patterns15 minutes
Reading: React Components: Understanding the Mechanics (Part I)15 minutes
Reading: React Components: Understanding the Mechanics (Part II)15 minutes
Reading: Adding Event Listeners in React15 minutes
Reading: React Event Objects15 minutes
Reading: Avoiding Common React Event Mistakes15 minutes
Reading: React Events: Understanding the Mechanics15 minutes
Reading: React State and useState15 minutes
Reading: Updating State15 minutes
Reading: Avoiding Common React State Mistakes15 minutes
Reading: React State: Understanding the Mechanics15 minutes

In module 2, you will learn how Hooks help React components remember information, respond to changes, and manage side effects. You will use useState and useEffect, work with dependency arrays, fetch data, handle loading and error states, and create custom Hooks to separate reusable logic from your user interface.

What's included

19 videos4 programming assignments11 ungraded labs

19 videosTotal 109 minutes

Introduction: Hooks Fundamentals1 minute
React Hooks3 minutes
useRef: Storing Values without Rerendering6 minutes
Tracking Input Values8 minutes
React Refs: Understanding the Mechanics6 minutes
Let's Build: Color Guessing Game11 minutes
Conclusion: Hooks Fundamentals1 minute
Introduction: useEffect and Side Effects1 minute
useEffect: Running Code with Side Effects4 minutes
useEffect and Dependencies7 minutes
useEffect Cleanup6 minutes
Avoiding Common useEffect Mistakes6 minutes
React Effects: Understanding the Mechanics13 minutes
Let's Build: Countdown Timer18 minutes
Conclusion: useEffect and Side Effects1 minute
Introduction: Performance and Custom Hooks1 minute
Performance Optimization Hooks12 minutes
Creating Custom Hooks7 minutes
Conclusion: Performance and Custom Hooks1 minute

4 programming assignmentsTotal 330 minutes

Module 2 Graded Assignment60 minutes
Practice: Hooks Fundamentals90 minutes
Practice: `useEffect` and Side Effects90 minutes
Practice: Performance and Custom Hooks90 minutes

11 ungraded labsTotal 165 minutes

Reading: React Hooks15 minutes
Reading: useRef: Storing Values without Rerendering15 minutes
Reading: Tracking Input Values15 minutes
Reading: React Refs: Understanding the Mechanics15 minutes
Reading: useEffect: Running Code with Side Effects15 minutes
Reading: useEffect and Dependencies15 minutes
Reading: useEffect Cleanup15 minutes
Reading: Avoiding Common useEffect Mistakes15 minutes
Reading: React Effects: Understanding the Mechanics15 minutes
Reading: Performance Optimization Hooks15 minutes
Reading: Creating Custom Hooks15 minutes

In the last module, you learn how to manage state across multiple React components and share data by passing props, lifting state up, and keeping a single source of truth. You also build multi-view applications with routing, use URLs and route parameters, preserve state across navigation, and prepare your app for deployment to static hosting.

What's included

21 videos1 reading4 programming assignments13 ungraded labs

21 videosTotal 119 minutes

Introduction: State Across Components0 minutes
Sharing State Across Components2 minutes
Callback Props5 minutes
Lifting State Up9 minutes
useContext: Sharing State Across Components8 minutes
useReducer: Modeling State Changes with Actions9 minutes
Conclusion: State Across Components1 minute
Introduction: Common React Libraries and Patterns1 minute
Element Hoisting4 minutes
Single Page Applications (SPAs) with React Router11 minutes
Managing State with Zustand7 minutes
Managing Asynchronous Data with TanStack Query9 minutes
Internationalization with React-i18next7 minutes
Let's Build: Lemon Timer20 minutes
Conclusion: Common React Libraries and Patterns0 minutes
Introduction: Debugging and Deploying Applications0 minutes
Detecting Common Problems with Strict Mode6 minutes
Using React Developer Tools5 minutes
React Linters6 minutes
Deploying React Applications to Github Pages9 minutes
Conclusion: Debugging and Deploying Applications0 minutes

1 readingTotal 10 minutes

Post-Course Survey10 minutes

4 programming assignmentsTotal 330 minutes

Module 3 Graded Assignment60 minutes
Practice: State Across Components90 minutes
Practice: Common React Libraries and Patterns90 minutes
Practice: Debugging and Deploying Applications90 minutes

13 ungraded labsTotal 195 minutes

Reading: Sharing State Across Components15 minutes
Reading: Callback Props15 minutes
Reading: Lifting State Up15 minutes
Reading: useContext: Sharing State Across Components15 minutes
Reading: Element Hoisting15 minutes
Reading: Single Page Applications (SPAs) with React Router15 minutes
Reading: Managing State with Zustand15 minutes
Reading: Managing Asynchronous Data with TanStack Query15 minutes
Reading: Internationalization with React-i18next15 minutes
Reading: Detecting Common Problems with Strict Mode15 minutes
Reading: Using React Developer Tools15 minutes
Reading: React Linters15 minutes
Reading: Deploying React Applications to Github Pages15 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Steve Oney

University of Michigan

9 Courses592,720 learners

Offered by

University of Michigan

Explore more from Mobile and Web Development

University of Michigan
Developing Full-Stack Applications with JavaScript
Course
University of Michigan
Building Interactive Web Applications with JavaScript
Course
University of Michigan
Web Development Fundamentals: HTML, CSS, and JavaScript
Course

Why people choose Coursera for their career

Felipe M.

Learner since 2018

"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."

Jennifer J.

Learner since 2020

"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."

Larry W.

Learner since 2021

"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Unlock access to 10,000+ courses with a subscription
Advance your career with an online degree
Earn a degree from world-class universities - 100% online
Join over 4,700 global companies that choose Coursera for Business

Frequently asked questions

We recommend completing this Specialization’s first three courses beforehand: Web Development Fundamentals: HTML, CSS, and JavaScript, Building Interactive Web Applications with JavaScript, and Developing Full-Stack Applications with JavaScript.

To access course materials, assignments, and earn a Certificate, you'll need to purchase the Certificate experience when you enroll in a course. Eligible learners may also have the option to start with a Free Trial. Some courses may also offer a Full Course, No Certificate option. This lets you access course materials, submit required assessments, and receive a final grade, but you won't be able to earn or purchase a Certificate.

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.