React Foundations by Pearson

Course details

Explore React.js fundamentals for building web user interfaces. In this course, Andy Olsen teaches how to create reusable components, manage application state, create single page applications (SPAs), and more. Dive into the structure and principles of React applications. Learn how React manages the virtual DOM, how you can modularize the user interface via components, and how to simplify your syntax by using JSX. Find out how to create complete React applications via Vite and see how to implement routing, state management, and application functionality via hooks. The course includes a full set of labs with comprehensive instructions and solutions, so you can consolidate your understanding as you go. Whether you’re an aspiring front-end developer or a seasoned software engineer, this course is designed to help you stay current by upskilling in React.js.

Concepts

Introduction

React foundations - Introduction

Getting Started with React

Learning objectives
Overview of React
Creating a simple React application
Using a script map to organize imports
Understanding the virtual DOM
Creating a more ambitious user interface
Creating a data-driven user interface
Lab - getting started with React
Lab solution - Getting started with React

Creating Class-Based Components

Learning objectives
The need for components
Defining and using a class-based component
Creating a more ambitious user interface
Passing properties to a class-based component
Lab - creating class-based components
Lab solution - Creating class-based components

Creating Functional Components

Learning objectives
Introduction to functional components
Defining simple functional components
Creating a more ambitious user interface
Passing properties to a functional component
Destructuring properties
Lab - creating functional components
Lab solution - Creating functional components

Using JSX

Learning objectives
Getting started with JSX
Creating a simple user interface via JSX
Evaluating JavaScript expressions in JSX
Data-driven JSX
Passing properties to a component via JSX
Additional JSX techniques
Lab - using JSX
Lab solution - Using JSX

Hooks

Learning objectives
Getting started with hooks
Introduction to React.useState
Realistic example of React.useState
Introduction to React.useEffect
Defining cleanup behavior for an effect
Defining effects with dependencies
Lab - Hooks
Lab solution - Hooks

Calling REST Services

Learning objectives
Overview of REST services
Implementing a simple REST service
Calling a REST service on-demand
Calling a REST service via a React effect
Lab - calling REST services
Lab solution - calling REST services

Memoization

Learning objectives
Introduction to memo-ization
Memoization of components that receive properties
Providing a custom comparison function for component properties
Memoizing a particular piece of content
Lab - Memoization
Lab solution - Memoization

Creating a Complete React Application

Learning objectives
Overview
Creating a React application by using Vite
Understanding the application code
Running the application in development mode
Building and serving the application in production mode

Introduction to Routing

Learning objectives
Overview of single page applications (SPAs) and routing
Running a sample application that uses routing
Defining routes
Defining a common layout
Taking a closer look at the components in the example application
Lab - introduction to routing
Lab solution - Introduction to routing

User Input Techniques

Learning objectives
Setting the scene
Accessing elements in the DOM tree directly
Accessing elements in an uncontrolled component
Accessing elements in a controlled component
Lab - user input techniques
Lab solution - User input techniques

Routing Techniques

Learning objectives
Recap of routing
Introducing an application that illustrates additional routing techniques
Defining parameterized routes
Navigating to a route programmatically
Defining nested routes
Loading data for a route
Lab - Routing techniques
Lab solution - Routing techniques

Defining and Using Custom Hooks

Learning objectives
Recap of built-in hooks
Overview of custom hooks
Example of custom hooks

Summary

React foundations - Summary