React Basics

React Basics

This course is part of multiple programs.

Instructor: Taught by Meta Experts

Access provided by Pontificia Universidad Católica del Perú

214,741 already enrolled

4 modules

Gain insight into a topic and learn the fundamentals.

2,558 reviews

Beginner level

Recommended experience

Flexible schedule

3 weeks at 10 hours a week

Learn at your own pace

95%

Most learners liked this course

4 modules

Gain insight into a topic and learn the fundamentals.

2,558 reviews

Beginner level

Recommended experience

Flexible schedule

3 weeks at 10 hours a week

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

Skills you'll gain

Tools you'll learn

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

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 assignments5 ungraded labs

15 videos Total 61 minutes

Introduction to the course: React Basics 2 minutes
How is React used in the real world? 4 minutes
Why React? 4 minutes
React.js overview 5 minutes
Introduction to functional components 6 minutes
Creating React components 4 minutes
The React project structure 6 minutes
Importing components 5 minutes
Principles of components: Props 6 minutes
Using props in components 5 minutes
Introducing JSX 4 minutes
Practical styling 3 minutes
Embedded JSX expressions 2 minutes
Embedding in attributes 2 minutes
Module summary 3 minutes

21 readings Total 245 minutes

Course syllabus for React Basics 10 minutes
How to be successful in this course 10 minutes
Before you learn React 10 minutes
JavaScript modules, imports - exports 10 minutes
Working with Labs in this course 10 minutes
Additional reading 5 minutes
Transpiling JSX 20 minutes
Solution: Your first component 5 minutes
Customizing the project 20 minutes
Solution: Creating and importing components 5 minutes
Additional resources for React components and where they live 5 minutes
Setting up a React project in VS Code (Optional) 10 minutes
Dissecting props 20 minutes
Solution: Passing props 5 minutes
Props and children 20 minutes
Styling JSX elements 20 minutes
JSX syntax and the arrow function 20 minutes
Ternary operators and functions in JSX 20 minutes
Expressions as props 10 minutes
Solution: Multiple components 5 minutes
Additional resources 5 minutes

6 assignments Total 81 minutes

Self review: Your first component 9 minutes
Self review: Creating and importing components 9 minutes
Knowledge check: React components and where they live 15 minutes
Self review: Passing props 9 minutes
Self review: Multiple components 9 minutes
Module Quiz 30 minutes

5 ungraded labs Total 300 minutes

Your First Component 60 minutes
Creating and importing components 60 minutes
Passing props 60 minutes
Multiple components 60 minutes
Random Number Cards: A Hands-On React App for Beginners 60 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 assignments3 ungraded labs

13 videos Total 59 minutes

Types of events 4 minutes
Common event handling 3 minutes
Syntax for handlers 5 minutes
User events 6 minutes
Parent-child data flow 6 minutes
Children and data 3 minutes
What are hooks? 4 minutes
What is state? 5 minutes
Observing state 4 minutes
Managing state 5 minutes
React state management 6 minutes
Stateful vs. stateless 4 minutes
Module summary 5 minutes

9 readings Total 90 minutes

Eventful issues 20 minutes
Event handling and embedded expressions 20 minutes
Solution: Dynamic events 5 minutes
Additional resources 5 minutes
Data flow in React 10 minutes
Using hooks 10 minutes
Prop drilling 10 minutes
Solution: Managing state in React 5 minutes
Additional resources 5 minutes

9 assignments Total 141 minutes

Knowledge check: Events and errors 15 minutes
Self review: Dynamic events 9 minutes
Knowledge check: Dynamic events and how to handle them 15 minutes
Knowledge check: Data flow 18 minutes
Knowledge Check: State the concept 15 minutes
Knowledge check: Passing state 15 minutes
Self review: Managing state in React 9 minutes
Knowledge check: State or stateless 15 minutes
Module quiz: Data and state 30 minutes

3 ungraded labs Total 180 minutes

Dynamic events 60 minutes
React Counter App: Handling Events with useState 60 minutes
Managing state in React 60 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 prompt4 ungraded labs

9 videos Total 38 minutes

Basic Types of navigation 6 minutes
The navbar 5 minutes
Conditional rendering 5 minutes
Single view conditional updates 3 minutes
What is an asset and where does it live? 4 minutes
Using embedded assets 3 minutes
Audio and video 4 minutes
Create an audio / video component 3 minutes
Module summary: navigation, updating and assets in React.js 5 minutes

10 readings Total 85 minutes

Navigation 20 minutes
Solution: Creating a route 5 minutes
Applying conditional rendering 10 minutes
Conditional components 10 minutes
Additional resources 5 minutes
Bundling assets 10 minutes
Solution: Displaying images 5 minutes
Media packages 10 minutes
Solution: Song selection 5 minutes
Additional resources 5 minutes

6 assignments Total 87 minutes

Self review: Creating a route 9 minutes
Knowledge check: Navigation 15 minutes
Knowledge check: Conditional updates 15 minutes
Self review: Displaying images 9 minutes
Self review: Song selection 9 minutes
Module quiz: navigation, updating and assets in React.js 30 minutes

1 discussion prompt Total 10 minutes

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

4 ungraded labs Total 240 minutes

Creating a route 60 minutes
Dynamic Component Rendering in React: A Login/Logout App 60 minutes
Displaying images 60 minutes
Song selection 60 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 videos Total 9 minutes

Course recap: React Basics 3 minutes
Exemplar: Build a calculator app 4 minutes
Congratulations, you completed React Basics! 2 minutes

3 readings Total 20 minutes

About this graded assessment: Calculator app 5 minutes
Solution: Build a calculator app 10 minutes
Next steps 5 minutes

1 peer review Total 60 minutes

Peer review: Build a calculator app 60 minutes

2 discussion prompts Total 20 minutes

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

1 ungraded lab Total 60 minutes

Build a calculator app 60 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

Instructor ratings

(737 ratings)

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

Learner reviews

5 stars
78.34%
4 stars
16.65%
3 stars
2.77%
2 stars
1.13%
1 star
1.09%

Showing 3 of 2558

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

Reviewed on Dec 3, 2023

The course is a great introduction to React framework, which I knew nothing about before. I am interested to learn more. The teacher spoke clearly and I rarely rewinded the videos.

View more reviews