ReactJS - The Beginner Masterclass
Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
ReactJS - The Beginner Masterclass
Included with
What you'll learn
Build modern, dynamic web apps using React from scratch.
Master state management, forms, and interactivity in React projects.
Fetch and display data from APIs while managing side effects.
Deploy your React applications to platforms like Vercel with ease.
Skills you'll gain
Details to know
9 assignments
See how employees at top companies are mastering in-demand skills
There are 8 modules in this course
Updated in May 2025.
This course now features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. Dive into the world of ReactJS with this comprehensive beginner masterclass! You'll start by mastering the foundational concepts, from setting up a React development environment to building your first components and understanding how React handles the DOM. By the end of this course, you'll have a solid understanding of React fundamentals and be equipped to build dynamic, modern web applications. Your learning journey begins with an introduction to React's advantages and a quick project to get hands-on experience. Next, you'll delve into core concepts like JSX, props, state management, and styling. Through hands-on examples, you'll build interactive applications like the Random Quote App, Grocery List App, and a feature-rich BookSearch App, gaining experience in state management, forms, interactivity, and API integration. As you progress, you'll explore advanced features like custom hooks, conditional rendering, and connecting to backend APIs with React’s useEffect hook. The course concludes with deployment strategies, including setting up a GitHub repository and deploying apps using Vercel, ensuring you're ready to showcase your skills in a professional setting. This course is perfect for beginners with a basic understanding of JavaScript who want to start building modern, user-friendly web apps. Whether you're a student, developer, or professional looking to upskill, this masterclass is your gateway to mastering React.
In this module, we will introduce the course content and prerequisites, enabling you to dive right into React development. You’ll quickly create your first React app, culminating in a polished Random Dog application.
What's included
3 videos1 reading1 assignment
3 videos•Total 23 minutes
- Lesson 1 - Introduction and Course Prerequisites•2 minutes
- Lesson 2 - Build a Simple React App - Fast•11 minutes
- Lesson 3 - Finalizing the Random Dog App•10 minutes
1 reading•Total 10 minutes
- Full Course Resources•10 minutes
1 assignment•Total 15 minutes
- Introduction - Assessment•15 minutes
In this module, we will establish a solid foundation in React by covering essential concepts and tools. From setting up your environment to creating and managing React components, you’ll gain practical knowledge to navigate React projects with confidence.
What's included
20 videos1 assignment
20 videos•Total 108 minutes
- Lesson 1 - Understanding Old vs New Way of Building Web Apps - SPAs•7 minutes
- Lesson 2 - Motivation for Using React as the Solution to Vanilla JS•9 minutes
- Lesson 3 - What is ReactJS - How it Works•6 minutes
- Lesson 4 - Setup Dev Environment - VS Code-Chrome Browser & Install Nodejs•4 minutes
- Lesson 5 - Installing Important Extensions - VS Code•5 minutes
- Lesson 6 - Create and Run a React Project with Vite - Full Overview•7 minutes
- Lesson 7 - React Project File and Folder Walkthrough•5 minutes
- Lesson 8 - Create our First Component in React•5 minutes
- Lesson 9 - JSX and How React Treats the DOM - Overview•9 minutes
- Lesson 10 - Babeljs - JSX Compiled to JavaScript•2 minutes
- Lesson 11 - Understanding the Main Files - app-main and index•5 minutes
- Lesson 12 - Writing JavaScript Inside of JSX Code - Book Component•5 minutes
- Lesson 13 - Introduction to Props - Refactor Book Component to Use Props•10 minutes
- Lesson 14 - Adding an Array of Books & Pulling Data from that Array - Manually•4 minutes
- Lesson 15 - Using the Map Function to Loop Through a List of Books and Show Them•5 minutes
- Lesson 16 - Understanding the React Key Prop•4 minutes
- Lesson 17 - Props and One-Way Data Flow - Overview•9 minutes
- Lesson 18 - Destructuring Props•2 minutes
- Lesson 19 - Section Summary - React Basics and Introduction•1 minute
- Lesson 20 - UserProfile Card Challenge and Solution•5 minutes
1 assignment•Total 15 minutes
- React Fundamentals - Assessment•15 minutes
In this module, we will focus on state management and component styling. You’ll create interactive apps like a Random Quote generator, learning to implement React patterns and styling techniques effectively.
What's included
15 videos1 assignment
15 videos•Total 96 minutes
- Lesson 1 - Introduction to State Management, Forms and Interactivity in React•1 minute
- Lesson 2 - Restructuring the Project - Create a Components Folder and Add Book and UserProfile Components into Separate Files•5 minutes
- Lesson 3 - Pulling Book Data from a Different Data File•10 minutes
- Lesson 4 - Introduction to State in React - The Wrong Way to Change State•10 minutes
- Lesson 5 - Using React Hook useState to Fix the State Management Issue•12 minutes
- Lesson 6 - Overview of How State Works in React•2 minutes
- Lesson 7 - Random Quote App - Setup•5 minutes
- Lesson 8 - RandoQuote App - Thorough Setup - Final Product•9 minutes
- Lesson 9 - How State Works in React - Review•2 minutes
- Lesson 10 - Styling our Components - Overview of CSS Files in our Project•5 minutes
- Lesson 11 - Installing Bootstrap and Using it in Quotes App•7 minutes
- Lesson 12 - Adding Another Piece of State - Random Color•7 minutes
- Lesson 13 - Lifting State Up - React Pattern Overview•4 minutes
- Lesson 14 - Lifting State Up - Hands-On - RandomQuote•7 minutes
- Lesson 15 - Lift State Up - Hands-On - Simple Counter•11 minutes
1 assignment•Total 15 minutes
- React State and Styling - Assessment•15 minutes
In this module, we will explore form handling and interactivity in React. Through the Grocery List app, you’ll learn to build robust forms, manage state for dynamic updates, and create intuitive user interfaces.
What's included
21 videos1 assignment
21 videos•Total 105 minutes
- Lesson 1 - Forms•0 minutes
- Lesson 2 - Setup a Simple Form and Input•3 minutes
- Lesson 3 - Form and preventDefault Method•3 minutes
- Lesson 4 - Form - Controlled Elements•8 minutes
- Lesson 5 - Adding Form Input Data into a State List and Show the List Items on Page•6 minutes
- Lesson 6 - Multi-Input Form Setup - Hands-On•8 minutes
- Lesson 7 - Setting Up Multi-Form Input Data and the handleChange Event Handler•8 minutes
- Lesson 8 - OnHandle Submit - Add Simple Validation and Show the Card with Person Data•8 minutes
- Lesson 9 - Hands-On: What We'll Be Building - GroceryList App - Demo•2 minutes
- Lesson 10 - Hands-On - GroceryList Component - Adding Fake Data and Showing a List•5 minutes
- Lesson 11 - Creating the Footer and Nav Components•4 minutes
- Lesson 12 - Styling the GroceryList Item•4 minutes
- Lesson 13 - Add Grocery Form•9 minutes
- Lesson 14 - Fixing Clear Form Issues•1 minute
- Lesson 15 - Adding Bootstrap Icon•3 minutes
- Lesson 16 - Passing the toggleBought as a Prop - Part 1•4 minutes
- Lesson 17 - Implementing the Toggling - Testing in the Console - It Works•10 minutes
- Lesson 18 - Changing the Circle Color and Item Text When Clicked - Strikethrough•5 minutes
- Lesson 19 - Adding the handleRemoveItem Prop and Function to Remove an Item•5 minutes
- Lesson 20 - Adding Stats in the Footer Component•5 minutes
- Lesson 21 - Form - Section Summary•2 minutes
1 assignment•Total 15 minutes
- Forms and Interactivity - Grocery List App - Assessment•15 minutes
In this module, we will dive into backend integration, focusing on the useEffect hook for API communication. You’ll learn best practices for fetching and displaying data while handling common challenges like managing side effects.
What's included
5 videos1 assignment
5 videos•Total 34 minutes
- Lesson 1 - Connecting to the Back End - Understanding Side Effects, Hooks and useEffect - Overview•7 minutes
- Lesson 2 - Fetching Data from a Server the Wrong Way•8 minutes
- Lesson 3 - Fetching Data from the Backend the Right Way with useEffect Hook•4 minutes
- Lesson 4 - Setting Up Loading State•4 minutes
- Lesson 5 - Use Dependency Array and Adding Values that Control Side Effects - Hands-On•12 minutes
1 assignment•Total 15 minutes
- Connecting to the Backend - Consuming APIs - UseEffect Hook - Assessment•15 minutes
In this module, we will build a complete BookSearch app, applying concepts like custom hooks, API integration, and state management. By the end, you’ll be equipped to tackle more advanced React projects.
What's included
17 videos1 assignment
17 videos•Total 104 minutes
- Introduction to Forms in React - Overview•3 minutes
- Lesson 2 - Setup NavBar Component•5 minutes
- Lesson 3 - Create Footer Component•2 minutes
- Lesson 4 - Pulling in Books from API•6 minutes
- Lesson 5 - Setup the URL Search Query•2 minutes
- Lesson 6 - Setup SearchBar and Props•8 minutes
- Lesson 7 - Making Sure The SearchTerm is Updating Correctly - Debugging•3 minutes
- Lesson 8 - Showing Books on Screen•10 minutes
- Lesson 9 - Adding Loading State•5 minutes
- Lesson 10 - Clearing the Search Form•1 minute
- Lesson 11 - Setup the api-client File and Implementing fetchBooks•12 minutes
- Lesson 12 - Custom Hooks and Creating a Custom Hook - useBooks•14 minutes
- Lesson 13 - Adding the AbortController Interface•7 minutes
- Lesson 14 - Book Detail Component - Part 1•5 minutes
- Lesson 15 - Conditional Rendering with && - Testing SelectedBook•3 minutes
- Lesson 16 - Show Book Details in a Modal - Working•7 minutes
- Lesson 17 - Handling Missing Books API Missing Fields•10 minutes
1 assignment•Total 15 minutes
- Build a BookSearch App - Assessment•15 minutes
In this module, we will guide you through deploying your React application to the web. From configuring Vercel to automating deployment with GitHub, you’ll learn how to make your app accessible to users globally.
What's included
3 videos1 assignment
3 videos•Total 12 minutes
- Lesson 1 - Build and Setup Vercel and Deploy the App•8 minutes
- Lesson 2 - Connecting to GitHub Repo and Automate Deployment•2 minutes
- Lesson 3 - Bookshelf App and Section Summary•2 minutes
1 assignment•Total 15 minutes
- Deployment - Assessment•15 minutes
In this module, we will conclude the course with a comprehensive summary of all topics covered. You’ll review your progress, explore future learning opportunities, and celebrate your new skills in React development.
What's included
1 video2 assignments
1 video•Total 3 minutes
- Course Wrap Up•3 minutes
2 assignments•Total 75 minutes
- Full Course Assessment•60 minutes
- Full Course Practice Assessment•15 minutes
Instructor
Why people choose Coursera for their career
Learner reviews
- 5 stars
100%
- 4 stars
0%
- 3 stars
0%
- 2 stars
0%
- 1 star
0%
Showing 3 of 10
Reviewed on Apr 29, 2025
nice class . it was clear and to the point about react. great place to start.
Frequently asked questions
Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.
If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.
Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.
More questions
Financial aid available,