Building Single-Page Web Applications with React
Contact us to book this course
Web and Mobile Applications
On-Site, Virtual
3 days
This course provides a framework-agnostic hands-on guide to building fast, modern, scalable single-page web applications (SPAs) using React. The students build an application using function components, Hooks, and standard tooling like Vite, the Redux Toolkit, and Formik. Students will gain an understanding of the principles of Flux and unidirectional dataflow, as well as how to call RESTful APIs, build component hierarchies, create custom Hooks and wrapper components, and how to deploy React applications.
Learning objectives
At the end of this course, the participants will know how to:
- Jump-start React applications with Vite
- Build React components using JSX
- Utilize props and state
- Use built-in, third-party, and custom Hooks in functional components
- Work with controlled inputs and Formik
- Make RESTful AJAX calls from React applications
- Add routes to their SPA using react-router
- Unit Test React components
- Manage state with Redux using the Redux Toolkit
- Create Higher-Order Components and custom Hooks
Who should attend
This course is designed for web developers who are looking to build single-page applications using React.
Prerequisites
Attendees must be comfortable working with JavaScript to take this class. Knowledge of ES6 is helpful but not essential.
Course outline
- What Are Single-Page Applications?
- Introducing React
- React vs. Other Frameworks
- Using Vite for Project Configuration
- Introducing JSX
- Creating and Composing React Components
- Passing Data with Props and State
- Repeating Elements and Unique Keys
- Controlled vs. Uncontrolled Inputs
- Managing State with the useState Hook
- Understanding and Using Hooks
- Leveraging React Events
- Legacy Class Components and the Component Lifecycle
- Principles of Unit Testing
- Testing React Using vitest
- Using the React Testing Library
- Introducing REST and AJAX
- Making GET Requests to Retrieve Data
- POST Data to the Server for Updates
- Exploring the react-router Module
- Adding Routes to the Application
- Creating Parameterized Routes
- Reading Route Data with the useParams Hook
- Navigating Programmatically with useNavigate
- Answering the Question: Why Flux?
- Working with Unidirectional Data Flow
- Leveraging the Redux Toolkit
- Managing State Modification with Slices
- Handling Asynchronous Actions
- Using the useDispatch and useSelector Hooks
- Understanding the useContext and useReducer Hooks
- Simplifying Forms with the Formik Library
- Validating Inputs
- Integrating Formik with Redux
- Using Add-Ons and Third-Party Tools
- Building a Modal Dialog with react-boostrap
- Creating a Wrapper Component
- Understanding DOM Access
- Creating a Custom Hook with useCallback
- Building for Deployment
- Creating Environment Variables and Files
- Using React.lazy
