React Basics

React Basics

This course is part of multiple programs.

Instructor: Taught by Meta Staff

Access provided by Google

171,795 already enrolled

4 modules

Gain insight into a topic and learn the fundamentals.

4.7

(2,260 reviews)

Beginner level

Recommended experience

Flexible schedule

Approx. 26 hours

Learn at your own pace

95%

Most learners liked this course

4 modules

Gain insight into a topic and learn the fundamentals.

4.7

(2,260 reviews)

Beginner level

Recommended experience

Flexible schedule

Approx. 26 hours

Learn at your own pace

95%

Most learners liked this course

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

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

21 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

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV

Share it on social media and in your performance review

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 module you will explore the basic structure and use of the React.js library. You will learn how to produce single page web applications using React components and to use JSX to style them.

What's included

15 videos21 readings6 assignments1 discussion prompt4 ungraded labs

15 videosTotal 61 minutes

Introduction to the course: React Basics2 minutesPreview module
How is React used in the real world?3 minutes
Why React?4 minutes
React.js overview5 minutes
Introduction to functional components6 minutes
Creating React components3 minutes
The React project structure6 minutes
Importing components4 minutes
Principles of components: Props5 minutes
Using props in components4 minutes
Introducing JSX4 minutes
Practical styling2 minutes
Embedded JSX expressions2 minutes
Embedding in attributes2 minutes
Module summary2 minutes

21 readingsTotal 245 minutes

Course syllabus for React Basics10 minutes
How to be successful in this course10 minutes
Before you learn React10 minutes
JavaScript modules, imports - exports10 minutes
Working with Labs in this Course10 minutes
Additional reading5 minutes
Setting up a React project in VS Code (Optional)10 minutes
Transpiling JSX20 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
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 components5 minutes
Additional resources5 minutes

6 assignmentsTotal 81 minutes

Self review: Your first component9 minutes
Self review: Creating and importing components9 minutes
Knowledge check: React components and where they live15 minutes
Self review: Passing props9 minutes
Self review: Multiple components9 minutes
Module Quiz30 minutes

1 discussion promptTotal 10 minutes

What do you hope to learn?10 minutes

4 ungraded labsTotal 240 minutes

Your First Component60 minutes
Creating and importing components60 minutes
Passing props60 minutes
Multiple components60 minutes

In this module you will explore the concept and practical use of state and stage-management. You will also gain knowledge on how to handle events and the ability to dynamically change content on a web page.

What's included

13 videos9 readings9 assignments2 ungraded labs

13 videosTotal 59 minutes

Types of events4 minutesPreview module
Common event handling3 minutes
Syntax for handlers5 minutes
User events5 minutes
Parent-child data flow5 minutes
Children and data3 minutes
What are hooks?3 minutes
What is state?4 minutes
Observing state3 minutes
Managing state4 minutes
React state management6 minutes
Stateful vs. stateless3 minutes
Module summary5 minutes

9 readingsTotal 90 minutes

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

9 assignmentsTotal 141 minutes

Knowledge check: Events and errors15 minutes
Self review: Dynamic events9 minutes
Knowledge check: Dynamic events and how to handle them15 minutes
Knowledge check: Data flow18 minutes
Knowledge Check: State the concept15 minutes
Knowledge check: Passing state15 minutes
Self review: Managing state in React9 minutes
Knowledge check: State or stateless15 minutes
Module quiz: Data and state30 minutes

2 ungraded labsTotal 120 minutes

Dynamic events60 minutes
Managing state in React60 minutes

In this module you will explore the basics of single and multi-page navigation, as well as the conditional rendering or changing of content in response to user status or choice.

What's included

9 videos10 readings6 assignments1 discussion prompt3 ungraded labs

9 videosTotal 37 minutes

Basic Types of navigation5 minutesPreview module
The navbar4 minutes
Conditional rendering4 minutes
Single view conditional updates2 minutes
What is an asset and where does it live?4 minutes
Using embedded assets3 minutes
Audio and video3 minutes
Create an audio / video component2 minutes
Module summary: navigation, updating and assets in React.js5 minutes

10 readingsTotal 85 minutes

Navigation20 minutes
Solution: Creating a route5 minutes
Applying conditional rendering10 minutes
Conditional components10 minutes
Additional resources5 minutes
Bundling assets10 minutes
Solution: Displaying images5 minutes
Media packages10 minutes
Solution: Song selection5 minutes
Additional resources5 minutes

6 assignmentsTotal 87 minutes

Self review: Creating a route9 minutes
Knowledge check: Navigation15 minutes
Knowledge check: Conditional updates15 minutes
Self review: Displaying images9 minutes
Self review: Song selection9 minutes
Module quiz: navigation, updating and assets in React.js30 minutes

1 discussion promptTotal 10 minutes

What challenges did you encounter when creating your song selection feature?10 minutes

3 ungraded labsTotal 180 minutes

Creating a route60 minutes
Displaying images60 minutes
Song selection60 minutes

In this module, you will be assessed on the key skills covered in the Course.

What's included

3 videos3 readings1 peer review2 discussion prompts1 ungraded lab

3 videosTotal 8 minutes

Course recap: React Basics2 minutesPreview module
Exemplar: Build a calculator app4 minutes
Congratulations, you completed React Basics!2 minutes

3 readingsTotal 20 minutes

About this graded assessment: Calculator app5 minutes
Solution: Build a calculator app10 minutes
Next steps5 minutes

1 peer reviewTotal 60 minutes

Peer review: Build a calculator app60 minutes

2 discussion promptsTotal 20 minutes

Share the challenges you encountered when creating your calculator app10 minutes
What did you find most interesting in this course?10 minutes

1 ungraded labTotal 60 minutes

Build a calculator app60 minutes

Instructor

Instructor ratings

4.6 (657 ratings)

Taught by Meta Staff

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

Learner reviews

4.7

2,260 reviews

5 stars
78.81%
4 stars
16.73%
3 stars
2.55%
2 stars
0.88%
1 star
1.01%

Showing 3 of 2260

Reviewed on Aug 25, 2023

React Basics is an incredible course. I am extremely proud that I have completed this important course. I am really satisfied with this course and care.

Reviewed on Jan 31, 2023

that's a great course full of information! the missing star is because the labs are very easy and instructions answers the lab so that you can finish the lab even when you don't understand anything!

Reviewed on Sep 18, 2023

It's exactly what the name implies, it is a good overview of react and teaches you the basic concepts. The only critique I have is that the peer reviewed project is a little too simple.

View more reviews