Advanced React
Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
Advanced React
This course is part of multiple programs.
Instructor: Taught by Meta Experts
132,827 already enrolled
Included with
1,496 reviews
Recommended experience
1,496 reviews
Recommended experience
What you'll learn
Create robust and reusable components with advanced techniques and learn different patterns to reuse common behavior
Interact with a remote server and fetch and post data via an API
Seamlessly test React applications with React Testing Library
Integrate commonly used React libraries to streamline your application development
Skills you'll gain
Details to know
22 assignments
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- 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
Learn how to use more advanced React concepts and features, become proficient in JSX, and confidently test your applications.
You’ll examine different types of React components and learn various characteristics and when to use them. You’ll dig into more advanced hooks and create your own. You’ll look into building forms with React. You’ll explore component composition and new patterns, such as Higher Order Components and Render Props. You’ll create a web application that consumes API data and get familiar with the most commonly used React framework integrations, tools, and testing techniques. By the end of this course, you will be able to: • Render lists and form components efficiently in React. • Lift shared state up when several components need the updated data. • Leverage React Context to share global state for a tree of components. • Fetch data from a remote server. • Use advanced hooks in React, and put them to use within your application. • Build your own custom hooks. • Understand JSX in depth. • Embrace component composition techniques • Use advanced patterns to encapsulate common behavior via Higher Order Components and Render Props. • Test your React components. • Build a portfolio using 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. To take this course, you should understand the basics of React, HTML, CSS, and JavaScript. Additionally, it always helps to have a can-do attitude!
Learn how to render list and form components efficiently in React, and learn how to lift a shared state up when several components need the updated data.
What's included
14 videos13 readings7 assignments1 discussion prompt3 ungraded labs
14 videos•Total 60 minutes
- Introduction to the course•3 minutes
- React and your career opportunites•4 minutes
- Setting up VS code (Optional)•6 minutes
- Grid layouts•3 minutes
- Transforming lists in JavaScript•4 minutes
- Render a simple list component•3 minutes
- What are Keys in React?•5 minutes
- Using Keys Within List Components•4 minutes
- What are controlled components?•4 minutes
- Creating a Form component in React•6 minutes
- Create a Controlled Form Component•4 minutes
- What you know about Props and State•5 minutes
- What is Context, and why is it used?•6 minutes
- Module summary: Components•4 minutes
13 readings•Total 120 minutes
- Course syllabus•10 minutes
- How to be successful in this course•10 minutes
- Setting up a React project in VS Code (Optional)•10 minutes
- Installing Node and NPM (Optional)•10 minutes
- Working with Labs in this course•10 minutes
- Solution: Create a basic List component•10 minutes
- Additional resources•5 minutes
- Controlled components vs. Uncontrolled components•10 minutes
- Solution: Create a registration form•10 minutes
- Additional resources•5 minutes
- Solution: Create a light-dark theme switcher•10 minutes
- How re-rendering works with Context•15 minutes
- Additional resources•5 minutes
7 assignments•Total 99 minutes
- Self-review: Create a basic List component•9 minutes
- Knowledge check: Rendering Lists in React•12 minutes
- Self-review: Create a registration form •9 minutes
- Knowledge check: Forms in React•15 minutes
- Self-review: Create a light-dark theme switcher•9 minutes
- Knowledge check: React Context•15 minutes
- Module quiz: Components•30 minutes
1 discussion prompt•Total 10 minutes
- Meet and greet•10 minutes
3 ungraded labs•Total 180 minutes
- Exercise: Create a basic List component•60 minutes
- Exercise: Create a registration form•60 minutes
- Exercise: Create a light-dark theme switcher•60 minutes
Learn to use all the common hooks in React, and how to put them to use within your application. Then, build your own custom hooks.
What's included
12 videos11 readings7 assignments3 ungraded labs
12 videos•Total 54 minutes
- Working with React hooks•4 minutes
- Revising useState hook•5 minutes
- Using the useState hook•7 minutes
- What are side effects?•4 minutes
- Using the useEffect hook•5 minutes
- What are the rules of hooks?•4 minutes
- What you need to know before fetching data•6 minutes
- Fetching data – Putting it all together•3 minutes
- APIs•5 minutes
- What is useReducer and how it differs from useState•4 minutes
- useRef to access underlying DOM•3 minutes
- Module summary: React Hooks and Custom Hooks•4 minutes
11 readings•Total 105 minutes
- Working with complex data in useState•15 minutes
- Solution: Managing state within a component•10 minutes
- What is the useEffect hook?•10 minutes
- Additional resources•5 minutes
- Data fetching using hooks•15 minutes
- Solution: Can you fetch data?•10 minutes
- Additional resources•5 minutes
- When to choose useReducer vs useState•10 minutes
- Custom hooks•10 minutes
- Solution: Create your own custom hook, usePrevious•10 minutes
- Additional resources•5 minutes
7 assignments•Total 105 minutes
- Self-review: Managing state within a component•9 minutes
- Knowledge check: Getting started with hooks•15 minutes
- Self-review: Can you fetch data?•9 minutes
- Knowledge check: Rules of Hooks and Fetching Data with Hooks•15 minutes
- Self-review: Create your own custom hook, usePrevious•12 minutes
- Knowledge check: Advanced Hooks•15 minutes
- Module quiz: React Hooks and Custom Hooks•30 minutes
3 ungraded labs•Total 180 minutes
- Exercise: Managing state within a component•60 minutes
- Exercise: Can you fetch data?•60 minutes
- Exercise: Create your own custom hook, usePrevious•60 minutes
Understand JSX in depth and discover advanced patterns to encapsulate common behaviour via higher-order components and render props. Then, learn how to test and debug your application.
What's included
12 videos9 readings7 assignments3 ungraded labs
12 videos•Total 63 minutes
- JSX, Components and Elements•6 minutes
- The importance of performance to software development•4 minutes
- Component composition with children•5 minutes
- Manipulating children dynamically in JSX•6 minutes
- Spread Attributes•6 minutes
- Cross-cutting concerns in React•4 minutes
- Create a HOC for cursor position•5 minutes
- Render props•5 minutes
- Why React Testing Library•7 minutes
- Writing the first test for your form•5 minutes
- Style guides•4 minutes
- Module summary: JSX and Testing•6 minutes
9 readings•Total 90 minutes
- Types of Children•20 minutes
- Solution: Build a Radio Group Component•10 minutes
- Additional resources•5 minutes
- Higher-order components•15 minutes
- Solution: Implementing scroller position with render props•10 minutes
- Additional resources•5 minutes
- Solution: Writing more test scenarios•10 minutes
- Introduction to continuous integration•10 minutes
- Additional resources•5 minutes
7 assignments•Total 102 minutes
- Self-review: Build a Radio Group Component•9 minutes
- Knowledge check: JSX•15 minutes
- Self-review: Implementing scroller position with render props•9 minutes
- Knowledge check: Reusing behavior•15 minutes
- Self-review: Writing more test scenarios •9 minutes
- Knowledge check: Automated testing•15 minutes
- Module quiz: JSX and Testing•30 minutes
3 ungraded labs•Total 180 minutes
- Exercise: Build a Radio Group Component•60 minutes
- Exercise: Implementing scroller position with render props•60 minutes
- Exercise: Writing more test scenarios•60 minutes
In this module, you will be assessed on the key skills covered in the course and create a project to add to your portfolio.
What's included
3 videos4 readings1 assignment1 peer review1 discussion prompt1 ungraded lab
3 videos•Total 13 minutes
- Course recap: Advanced React•4 minutes
- Solution walk-through: Portfolio•6 minutes
- Congratulations, you have completed Advanced React!•3 minutes
4 readings•Total 60 minutes
- About the final project•10 minutes
- Popular external libraries•15 minutes
- Solution code•30 minutes
- Next steps•5 minutes
1 assignment•Total 30 minutes
- Final graded quiz: Advanced React•30 minutes
1 peer review•Total 60 minutes
- Review a peer's portfolio•60 minutes
1 discussion prompt•Total 10 minutes
- Reflect on learning•10 minutes
1 ungraded lab•Total 60 minutes
- Create your portfolio•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
Explore more from Mobile and Web Development
- Status: Free Trial
Course
- Status: Free Trial
- Status: Free TrialS
Scrimba
Course
- Status: Free Trial
Course
Why people choose Coursera for their career
Learner reviews
- 5 stars
76.55%
- 4 stars
15.49%
- 3 stars
4.27%
- 2 stars
1.67%
- 1 star
2%
Showing 3 of 1496
Reviewed on Jun 1, 2023
This course is Superb!!!
Meta platform motivate to me to Learn React. Thanks Meta & All Instructor to teach me brilliant kind of information / knowledge.
Reviewed on Feb 18, 2025
Rather informative, but also somewhat outdated as the web dev world moves fast. Also Coursera in general doesn't have great implementation of the sandboxes, and peer-reviewing final course
Reviewed on Jul 25, 2023
The questions in quiz's were perfect for checking our knowledge for react.
Also the project was enough to be able to start to work in real projects. Thank you META
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.
More questions
Financial aid available,