React Foundations (Video Course)

Description

Master the fundamentals of React.js and build dynamic web applications with hands-on labs.

Description:

• Learn React.js fundamentals for building web user interfaces
• Create reusable components and manage application state effectively
• Create single page applications (SPAs) via routing

React Foundations is for aspiring front-end developers and software engineers seeking to master React.js. Taught by experienced instructor Andy Olsen, it covers React fundamentals, including components, JSX syntax, hooks, state management, and routing.

Learners will understand the structure and principles of React applications, from the ground up. You will 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. You will also learn how to create complete React applications via Vite and see how to implement routing, manage state, and implement application functionality via hooks.

The video course includes a full set of labs with comprehensive instructions and solutions, so you can consolidate your understanding as you go.

Related Learning:

Sign up for live classes by Andy Olsen: https://learning.oreilly.com/search/?q=andy%20olsen&type=live-course&rows=100&language=en&publishers=Pearson

Access downloadable code files here: https://github.com/andyolsen/react-foundations

Skill Level

Intermediate

Course Requirements

• JavaScript and/or TypeScript familiarity
• Experience writing HTML content

About Pearson Video Training

Pearson publishes expert-led video tutorials covering a wide selection of technology topics designed to teach you the skills you need to succeed. These professional and personal technology videos feature world-leading author instructors published by your trusted technology brands: Addison-Wesley, Cisco Press, Pearson IT Certification, and Que. Topics include IT Certification, Network Security, Cisco Technology, Programming, Web Development, Mobile Development, and more. Learn more about Pearson Video training at http://www.informit.com/video.

Sample Content

Table of Contents

Lesson 1: Getting Started with React

1.1 Overview of React

1.2 Creating a simple React application

1.3 Using a script map to organize imports

1.4 Understanding the virtual DOM

1.5 Creating a more ambitious user interface

1.6 Creating a data-driven user interface

1.7 Lab: Getting started with React

1.8 Lab Solution: Getting started with React

Lesson 2: Creating Class-Based Components

2.1 The need for components

2.2 Defining and using a class-based component

2.3 Creating a more ambitious user interface

2.4 Passing properties to a class-based component

2.5 Lab: Creating class-based components

2.6 Lab Solution: Creating class-based components

Lesson 3: Creating Functional Components

3.1 Introduction to functional components

3.2 Defining simple functional components

3.3 Creating a more ambitious user interface

3.4 Passing properties to a functional component

3.5 Destructuring properties

3.6 Lab: Creating functional components

3.7 Lab Solution: Creating functional components

Lesson 4: Using JSX

4.1 Getting started with JSX

4.2 Creating a simple user interface via JSX

4.3 Evaluating JavaScript expressions in JSX

4.4 Data-driven JSX

4.5 Passing properties to a component via JSX

4.6 Additional JSX techniques

4.7 Lab: Using JSX

4.8 Lab Solution: Using JSX

Lesson 5: Hooks

5.1 Getting started with hooks

5.2 Introduction to React.useState

5.3 Realistic example of React.useState

5.4 Introduction to React.useEffect

5.5 Defining cleanup behavior for an effect

5.6 Defining effects with dependencies

5.7 Lab: Hooks

5.8 Lab Solution: Hooks

Lesson 6: Calling REST Services

6.1 Overview of REST services

6.2 Implementing a simple REST service

6.3 Calling a REST service on-demand

6.4 Calling a REST service via a React effect

6.5 Lab: Calling REST services

6.6 Lab Solution: Calling REST services

Lesson 7: Memoization

7.1 Introduction to memoization

7.2 Memoization of components that receive properties

7.3 Providing a custom comparison function for component properties

7.4 Memoizing a particular piece of content

7.5 Lab: Memoization

7.6 Lab Solution: Memoization

Lesson 8: Creating a Complete React Application

8.1 Overview

8.2 Creating a React application by using Vite

8.3 Understanding the application code

8.4 Running the application in development mode

8.5 Building and serving the application in production mode

Lesson 9: Introduction to Routing

9.1 Overview of Single Page Applications (SPAs) and routing

9.2 Running a sample application that uses routing

9.3 Defining routes

9.4 Defining a common layout

9.5 Taking a closer look at the components in the example application

9.6 Lab: Introduction to Routing

9.7 Lab Solution: Introduction to Routing

Lesson 10: User Input Techniques

10.1 Setting the scene

10.2 Accessing elements in the DOM tree directly

10.3 Accessing elements in an uncontrolled component

10.4 Accessing elements in a controlled component

10.5 Lab: User Input Techniques

10.6 Lab Solution: User Input Techniques

Lesson 11: Routing Techniques

11.1 Recap of routing

11.2 Introducing an application that illustrates additional routing techniques

11.3 Defining parameterized routes

11.4 Navigating to a route programmatically

11.5 Defining nested routes

11.6 Loading data for a route

11.7 Lab: Routing Techniques

11.8 Lab Solution: Routing Techniques

Lesson 12: Defining and Using Custom Hooks

12.1 Recap of built-in hooks

12.2 Overview of custom hooks

12.3 Example of custom hooks

Updates

Submit Errata