Advanced React by Coursera
Course Highlights
- 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 will learn!
Curriculum
38 Topics
Introduction to the course
React and your career opportunites
Setting up VS code (Optional)
Grid layouts
Transforming lists in JavaScript
Render a simple list component
What are Keys in React?
Using Keys Within List Components
What are controlled components?
Creating a Form component in React
Create a Controlled Form Component
What you know about Props and State
What is Context and why is it used?
Module summary: Components
Course syllabus
How to be successful in this course
Setting up a React project in VS Code (Optional)
Installing Node and NPM (Optional)
Working with Labs in this course
Solution: Create a basic List component
Additional resources
Controlled components vs. Uncontrolled components
Solution: Create a registration form
Additional resources
Solution: Create a light-dark theme switcher
How re-rendering works with Context
Additional resources
Self-review: Create a basic List component
Knowledge check: Rendering Lists in React
Self-review: Create a registration form
Knowledge check: Forms in React
Self-review: Create a light-dark theme switcher
Knowledge check: React Context
Module quiz: Components
Meet and greet
Exercise: Create a basic List component
Exercise: Create a registration form
Exercise: Create a light-dark theme switcher
33 Topics
Working with React hooks
Revising useState hook
Using the useState hook
What are side effects?
Using the useEffect hook
What are the rules of hooks?
What you need to know before fetching data
Fetching data – Putting it all together
APIs
What is useReducer and how it differs from useState
useRef to access underlying DOM
Module summary: React Hooks and Custom Hooks
Working with complex data in useState
Solution: Managing state within a component
What is the useEffect hook?
Additional resources
Data fetching using hooks
Solution: Can you fetch data?
Additional resources
When to choose useReducer vs useState
Custom hooks
Solution: Create your own custom hook usePrevious
Additional resources
Self-review: Managing state within a component
Knowledge check: Getting started with hooks
Self-review: Can you fetch data?
Knowledge check: Rules of Hooks and Fetching Data with Hooks
Self-review: Create your own custom hook usePrevious
Knowledge check: Advanced Hooks
Module quiz: React Hooks and Custom Hooks
Exercise: Managing state within a component
Exercise: Can you fetch data?
Exercise: Create your own custom hook usePrevious
31 Topics
JSX Components and Elements
The importance of performance to software development
Component composition with children
Manipulating children dynamically in JSX
Spread Attributes
Cross-cutting concerns in React
Create a HOC for cursor position
Render props
Why React Testing Library
Writing the first test for your form
Style guides
Module summary: JSX and Testing
Types of Children
Solution: Build a Radio Group Component
Additional resources
Higher-order components
Solution: Implementing scroller position with render props
Additional resources
Solution: Writing more test scenarios
Introduction to continuous integration
Additional resources
Self-review: Build a Radio Group Component
Knowledge check: JSX
Self-review: Implementing scroller position with render props
Knowledge check: Reusing behavior
Self-review: Writing more test scenarios
Knowledge check: Automated testing
Module quiz: JSX and Testing
Exercise: Build a Radio Group Component
Exercise: Implementing scroller position with render props
Exercise: Writing more test scenarios
11 Topics
Course recap: Advanced React
Solution walk-through: Portfolio
Congratulations you have completed Advanced React!
About the final project
Popular external libraries
Solution code
Next steps
Final graded quiz: Advanced React
Review a peer's portfolio
Reflect on learning
Create your portfolio
Advanced React
Related React JS Courses
Thank You!
Your review has been submitted successfully.