Introduction
React foundations: Introduction
()
1. 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
()
2. Creating Class-Based Components
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
()
3. 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
()
4. 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
()
5. 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
()
6. 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
()
7. 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
()
8. 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
()
9. 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
()
10. 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
()
11. 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
()
12. Defining and Using Custom Hooks
Learning objectives
()
Recap of built-in hooks
()
Overview of custom hooks
()
Example of custom hooks
()
Summary
React foundations: Summary
()