4-day instructor-led training course
Hands-on instructor-led training
After-course instructor coaching included
Learning Tree end-of-course exam included
#2316
Scroll to view additional course dates
Building Web Applications with React 19
Course 2316
- Duration: 4 days
- Labs: Yes
- Language: English
- Level: Intermediate
This Building Web Applications with React 19 Training gives you the tools to build client-side applications using React 19 to create high-performance apps running both in the browser and as native mobile applications. The course uses Hooks in React 19 to simplify coding and improve performance while leveraging Typescript, Storybook, and the Redux Toolkit to improve productivity in creating complex applications. The full development process is covered, beginning with creating the application project, architecting the solution, integrating automated testing (using the React Testing Library for both unit and end-to-end testing), and finishing with deploying the application.
React Training Delivery Methods
In-Person
Online
Upskill your whole team by bringing Private Team Training to your facility.
React Training Course Information
In this React 19 training, you will learn the following:
- Create web applications with the most popular client-side framework.
- Build dynamic applications with multiple screens and components.
- Read, update, add, and delete server-side data using Ajax calls.
- Architect client-side components using Storybook to speed development.
- End-to-End testing by simulating user interactions.
React Training Course Prerequisites
Before attending this course, attendees should have knowledge at the level of Course 2319, JavaScript Essentials for Web Development.
React Training Outline
- Understanding React
- Integrating React and TypeScript
- Adding functionality with Modules
Leveraging JSX for UI design
- Creating a page with components
- Coding custom components
- Understanding the differences between JSX and HTML
Parameterizing components
- Passing data from owner components to children
- Leveraging the children props to pass content dynamically
- Leveraging TypeScript to provide default values and data types
- Integrating stateless functional components
Manipulating component state
- Managing State with UseState
- Best practices for integrating components with TypeScript and props
- Introducing Hooks
- Managing activities with useEffect
Managing Complex UIs
- Composing a JSX component hierarchy with the Container/Presentational design pattern
- Centralizing logic at the container level by passing functions as props
- Improving performance with useCallback
- Dynamically building the UI at runtime
Ensuring quality with automated testing
- Unit testing with Jest
- End-to-End testing with Enzyme
- Improving testing syntax with Testing Library
Exploiting Storybook
- Speeding development by prototyping in Storybook
- Generating documentation from components
- Ensuring accessibility with automated analysis
- Logging component interactions
Manipulating form input components
- Working with interactive properties
- Capturing form component updates with onChange
- Exploiting controlled components with one-way dataflow
Implementing data and event binding
- Applying the onChange / useState() convention
- Reducing onChange clutter for cleaner code
- Integrating functions with form events
- Improving performance with useTransition
Implementing navigation
- Exploiting the react-router for semantic URLs
- Mapping URL paths to components
- Enabling navigation with code and the Link component
Passing parameters in URLs
- Creating routes with multiple parameters
- Handling ambiguous routes
- Extracting parameters with useParams
- Sharing global data with useContext
Global State and Redux
- Making Ajax calls with Axios
- Mapping CRUD access to React components
Exploiting Axios
- Simplifying code with custom Axios objects
- Integrating asynchronous access
- Looking at Axios advanced features
- Reviewing alternatives
Global State and Redux
- Architecting loosely-coupled applications for extensibility
- Managing state centrally with the Redux Toolkit
- Adding Web service updates to the global store
Coding a loosely coupled application
- Creating the central store
- Understanding React’s one-way data flow at the application level
- Segmenting the store with slicers
Managing application-wide data
- Creating the reducers and slices to manage application-wide state
- Exploiting useSelector and useDispatch to access the global store
- Reviewing alternatives
- Extending your components with Higher-Order Components
- Accessing HTML with useRef
- Externalizing configuration with appsetting files
- Deploying your application to IIS
Questions about this course?
Customise Your Team Training Experience
Fill out the form below or call 44 (0) 207 874 5000
Need Help Finding The Right Training Solution?
Our training advisors are here for you.
React Training FAQs
This course uses React version 19, which will benefit any attendee using version 16 or later.
If you’re on version 16 or earlier, we recommend that you take our Course 2322, Building Web Applications with React 16.
Due to licensing restrictions, the exercises students deploy are on an Android platform. However, deploying to iOS devices is covered, and students using the MacIntosh platform can download the final app to their computers and generate an iOS-compatible app. We will cover how to create apps that run on Web browsers, on any device and how to create apps that run with native controls on Android and iOS devices. The course will also show to create an application that leverages Android and iOS-specific features (and how to ensure that the correct code will deploy to the suitable device).
- Developers with experience in JavaScript development who will be creating client-side applications with React
- System architects and project managers who need to understand the tools being used to create client-side applications