React Basics

Ends today! This point in the year is perfect for 40% off 10,000+ programs. Save now.

React Basics

This course is part of multiple programs.

Instructor: Taught by Meta Experts

223,105 already enrolled

Included with Learn more

Ask Coursera

4 modules

Gain insight into a topic and learn the fundamentals.

Beginner level

Recommended experience

3 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

4 modules

Gain insight into a topic and learn the fundamentals.

Beginner level

Recommended experience

3 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

What you'll learn

Use reusable components to render views where data changes over time
Organize React projects to create more scalable and maintainable websites and apps
Use props to pass data between components. Create dynamic and interactive web pages and apps
Use forms to allow users to interact with the app. Build an application in React

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

22 assignments

Taught in English

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 available as part of

When you enroll in this course, you'll also be asked to select a specific program.

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 4 modules in this course

React is a powerful JavaScript library that you can use to build user interfaces for web and mobile applications (apps). In this course, you will explore the fundamental concepts that underpin the React library and learn the basic skills required to build a simple, fast, and scalable app.

By the end of this course, you will be able to: • Use reusable components to render views where data changes over time • Create more scalable and maintainable websites and apps • Use props to pass data between components • Create dynamic and interactive web pages and apps • Use forms to allow users to interact with the web page • Build an application in React You’ll gain experience with the following tools and software: • React.js • JSX • React • HTML, CSS and JavaScript • VSCode You will be able to leverage the potential of this course to develop new skills, improve productivity, act effectively with data and boost your career. This is a beginner course for learners who would like to prepare themselves for a career in mobile development. To succeed in this course, you do not need prior development experience, only basic internet navigation skills and an eagerness to get started with coding.

In this introductory module, you'll learn about what React is and where it is used. You'll also learn how to set up your coding environment so that you have as productive a learning experience as possible. So, the purpose of this module is to understand the what and the why, and to get set up for the modules that follow. <br> Components are one of the foundations of React. In React, everything revolves around components. You'll learn how to build components, how to structure and customize your React projects, and how to compose layouts by importing components into other components.<br> You'll learn about passing data from one component to another. You'll learn about JSX syntax in React and how to use it to structure and style your components.

What's included

15 videos19 readings7 assignments5 ungraded labs

15 videosTotal 61 minutes

Introduction to the course: React Basics2 minutes
How is React used in the real world?4 minutes
Why React?4 minutes
React.js overview5 minutes
Introduction to functional components6 minutes
Creating React components4 minutes
The React project structure6 minutes
Importing components5 minutes
Principles of components: Props6 minutes
Using props in components5 minutes
Introducing JSX4 minutes
Practical styling3 minutes
Embedded JSX expressions2 minutes
Embedding in attributes2 minutes
Module summary: React Components3 minutes

19 readingsTotal 242 minutes

Before you learn React10 minutes
JavaScript modules, imports - exports15 minutes
Additional resources: React components5 minutes
Transpiling JSX20 minutes
Working with Labs in this Course7 minutes
Solution: Your first component5 minutes
Customizing the project20 minutes
Solution: Creating and importing components5 minutes
Additional resources for React components and where they live5 minutes
Setting up a React project in VS Code (Optional)10 minutes
Dissecting props20 minutes
Solution: Passing props5 minutes
Props and children20 minutes
Styling JSX elements20 minutes
JSX syntax and the arrow function20 minutes
Ternary operators and functions in JSX20 minutes
Expressions as props10 minutes
Solution: Multiple components20 minutes
Additional resources: Component use and styling5 minutes

7 assignmentsTotal 84 minutes

Module Quiz: React Components30 minutes
Self review: Your first component6 minutes
Self review: Creating and importing components6 minutes
Knowledge check: React components and where they live10 minutes
Self review: Passing props6 minutes
Knowledge Check: Styling JSX20 minutes
Self review: Multiple components6 minutes

5 ungraded labsTotal 300 minutes

Your first component60 minutes
Creating and importing components60 minutes
Passing props60 minutes
Multiple components60 minutes
Random Number Cards: A Hands-On React App for Beginners60 minutes

The second module of this course deals with working with events and errors in React. You'll learn how events work and how you can handle them in React. Handling events can sometimes get a bit tricky, so you'll also learn about dealing with errors related to events in React.

What's included

13 videos9 readings9 assignments3 ungraded labs

13 videosTotal 59 minutes

Types of events4 minutes
Common event handling3 minutes
Syntax for handlers5 minutes
User events6 minutes
Parent-child data flow6 minutes
Children and data3 minutes
What is state?5 minutes
Observing state4 minutes
What are hooks?4 minutes
Managing state5 minutes
React state management6 minutes
Stateful vs. stateless4 minutes
Module summary: Data and state5 minutes

9 readingsTotal 100 minutes

Eventful issues20 minutes
Event handling and embedded expressions20 minutes
Solution: Dynamic events5 minutes
Additional resources: Data and state5 minutes
Data flow in React10 minutes
Using hooks20 minutes
Prop drilling10 minutes
Solution: Managing state in React5 minutes
Additional resources: Data and events5 minutes

9 assignmentsTotal 110 minutes

Module quiz: Data and state30 minutes
Knowledge check: Events and errors10 minutes
Self review: Dynamic events6 minutes
Knowledge check: Dynamic events and how to handle them10 minutes
Knowledge check: Data flow18 minutes
Knowledge Check: State the concept10 minutes
Knowledge check: Passing state10 minutes
Self review: Managing state in React6 minutes
Knowledge check: State or stateless10 minutes

3 ungraded labsTotal 180 minutes

Dynamic events60 minutes
React Counter App: Handling Events with useState60 minutes
Managing state in React60 minutes

In this module, you'll learn about routing and navigation in React. You'll learn how to render partial views and how to update routes in your React apps. You'll understand how assets are used, bundled and embedded.

What's included

9 videos11 readings6 assignments3 ungraded labs

9 videosTotal 38 minutes

Basic types of navigation6 minutes
The navbar5 minutes
Conditional rendering5 minutes
Single view conditional updates3 minutes
What is an asset and where does it live?4 minutes
Using embedded assets3 minutes
Audio and video4 minutes
Create an audio / video component3 minutes
Module summary: navigation, updating and assets in React.js 5 minutes

11 readingsTotal 155 minutes

Navigation20 minutes
Solution: Creating a route15 minutes
Applying conditional rendering10 minutes
Conditional components10 minutes
Additional resources5 minutes
Bundling assets10 minutes
Solution: Displaying images5 minutes
Media packages10 minutes
Let's practice: Song selection60 minutes
Solution: Song selection5 minutes
Additional resources: Using assets in React5 minutes

6 assignmentsTotal 68 minutes

Module quiz: navigation, updating and assets in React.js30 minutes
Self review: Creating a route6 minutes
Knowledge check: Navigation10 minutes
Knowledge check: Conditional updates10 minutes
Self review: Displaying images6 minutes
Self review: Song selection6 minutes

3 ungraded labsTotal 180 minutes

Creating a route60 minutes
Dynamic Component Rendering in React: A Login/Logout App60 minutes
Displaying images60 minutes

This module is focused on a practical mini project of building a calculator app in React. Upon completing this module, you'll have coded your own mini project in React, as a starting point for building your React portfolio.

What's included

3 videos3 readings1 programming assignment

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

Taught by Meta Experts

Offered by

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."

Frequently asked questions

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Certificate, 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.