Monthly Subscription Starting at AED 99 + VAT

Advanced React
  • Level Professional
  • Duration 26 hours
  • Course by Meta
  • Offered by

About

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!

Modules

Course Introduction

    • 4 Videos
    • 5 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • Meet and greet

4 Videos

  • Introduction to the course
  • React and your career opportunites
  • Setting up VS code (Optional)
  • Grid layouts

5 Readings

  • 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

Rendering Lists in React

    • 4 Videos
    • 2 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Self-review: Create a basic List component
  • Knowledge check: Rendering Lists in React

1 Labs

  • Exercise: Create a basic List component

4 Videos

  • Transforming lists in JavaScript
  • Render a simple list component
  • What are Keys in React?
  • Using Keys Within List Components

2 Readings

  • Solution: Create a basic List component
  • Additional resources

Forms in React

    • 3 Videos
    • 3 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Self-review: Create a registration form
  • Knowledge check: Forms in React

1 Labs

  • Exercise: Create a registration form

3 Videos

  • What are controlled components?
  • Creating a Form component in React
  • Create a Controlled Form Component

3 Readings

  • Controlled components vs. Uncontrolled components
  • Solution: Create a registration form
  • Additional resources

React Context

    • 3 Videos
    • 3 Readings
    • 1 Lab
    • 3 Assignment
Show info about module content

3 Assignment

  • Self-review: Create a light-dark theme switcher
  • Knowledge check: React Context
  • Module quiz: Components

1 Labs

  • Exercise: Create a light-dark theme switcher

3 Videos

  • What you know about Props and State
  • What is Context, and why is it used?
  • Module summary: Components

3 Readings

  • Solution: Create a light-dark theme switcher
  • How re-rendering works with Context
  • Additional resources

Getting started with hooks

    • 5 Videos
    • 4 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Self-review: Managing state within a component
  • Knowledge check: Getting started with hooks

1 Labs

  • Exercise: Managing state within a component

5 Videos

  • Working with React hooks
  • Revising useState hook
  • Using the useState hook
  • What are side effects?
  • Using the useEffect hook

4 Readings

  • Working with complex data in useState
  • Solution: Managing state within a component
  • What is the useEffect hook?
  • Additional resources

Rules of Hooks and Fetching Data with Hooks

    • 4 Videos
    • 3 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Self-review: Can you fetch data?
  • Knowledge check: Rules of Hooks and Fetching Data with Hooks

1 Labs

  • Exercise: Can you fetch data?

4 Videos

  • What are the rules of hooks?
  • What you need to know before fetching data
  • Fetching data – Putting it all together
  • APIs

3 Readings

  • Data fetching using hooks
  • Solution: Can you fetch data?
  • Additional resources

Advanced hooks

    • 3 Videos
    • 4 Readings
    • 1 Lab
    • 3 Assignment
Show info about module content

3 Assignment

  • Self-review: Create your own custom hook, usePrevious
  • Knowledge check: Advanced Hooks
  • Module quiz: React Hooks and Custom Hooks

1 Labs

  • Exercise: Create your own custom hook, usePrevious

3 Videos

  • What is useReducer and how it differs from useState
  • useRef to access underlying DOM
  • Module summary: React Hooks and Custom Hooks

4 Readings

  • When to choose useReducer vs useState
  • Custom hooks
  • Solution: Create your own custom hook, usePrevious
  • Additional resources

JSX Deep Dive

    • 5 Videos
    • 3 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Self-review: Build a Radio Group Component
  • Knowledge check: JSX

1 Labs

  • Exercise: Build a Radio Group Component

5 Videos

  • JSX, Components and Elements
  • The importance of performance to software development
  • Component composition with children
  • Manipulating children dynamically in JSX
  • Spread Attributes

3 Readings

  • Types of Children
  • Solution: Build a Radio Group Component
  • Additional resources

Reusing behavior

    • 3 Videos
    • 3 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Self-review: Implementing scroller position with render props
  • Knowledge check: Reusing behavior

1 Labs

  • Exercise: Implementing scroller position with render props

3 Videos

  • Cross-cutting concerns in React
  • Create a HOC for cursor position
  • Render props

3 Readings

  • Higher-order components
  • Solution: Implementing scroller position with render props
  • Additional resources

Integration tests with React Testing Library

    • 4 Videos
    • 3 Readings
    • 1 Lab
    • 3 Assignment
Show info about module content

3 Assignment

  • Self-review: Writing more test scenarios
  • Knowledge check: Automated testing
  • Module quiz: JSX and Testing

1 Labs

  • Exercise: Writing more test scenarios

4 Videos

  • Why React Testing Library
  • Writing the first test for your form
  • Style guides
  • Module summary: JSX and Testing

3 Readings

  • Solution: Writing more test scenarios
  • Introduction to continuous integration
  • Additional resources

Graded assessment

    • 2 Videos
    • 3 Readings
    • 1 PeerReview
    • 1 Lab
    • 1 Assignment
Show info about module content

1 Assignment

  • Final graded quiz: Advanced React

1 Peer Review

  • Review a peer's portfolio

1 Labs

  • Create your portfolio

2 Videos

  • Course recap: Advanced React
  • Solution walk-through: Portfolio

3 Readings

  • About the final project
  • Popular external libraries
  • Solution code

Course wrap-up

    • 1 Videos
    • 1 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • Reflect on learning

1 Videos

  • Congratulations, you have completed Advanced React!

1 Readings

  • Next steps

Auto Summary

Advanced React is an IT & Computer Science course designed for professionals aiming to master advanced React concepts and features. Taught by Coursera, this course delves into JSX, React components, advanced hooks, and component composition techniques like Higher Order Components and Render Props. Learners will build web applications, integrate APIs, and test React components efficiently. The course spans 1560 minutes and requires a basic understanding of React, HTML, CSS, and JavaScript. It offers a Starter subscription and equips students with skills to boost productivity and advance their careers.

Taught by Meta Staff
Instructor

Taught by Meta Staff