React Basics

React Basics

This course is part of multiple programs.

Instructor: Taught by Meta Staff

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

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

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.