Home
Courses
Building Web Applications with React 18

Building Web Applications with React 18

Course 2316

Duration: 4 days
Labs: Yes
Language: English
Level: Intermediate

This Building Web Applications with React 18 Training gives you the tools to build client-side applications using React 18 to create high-performance apps running both in the browser and as native mobile applications. The course uses Hooks in React 18 to simplify coding and improve performance while leveraging Typescript 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

React Training Course Information

In this Redux Toolkit training, you will learn the following:

Create web and mobile applications with the most popular client-side framework.
Build complex applications with multiple screens and components.
Read, update, add, and delete server-side data using Ajax calls.
Architect client-side applications with UIs that dynamically respond to changes in the data.
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

Module 1: Introduction and Overview

Understanding React
Integrating React and TypeScript

Module 2: Designing Custom React Components

Leveraging JSX for UI design

Coding custom component classes
Composing a JSX component hierarchy
Extending the hierarchy with the Container/Presentational design pattern
Understanding the differences between JSX and HTML

Module 3: Activating React Components

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

Managing Complex UIs

Centralizing logic at the container level by passing functions as props
Integrating stateless functional components
Improving performance with useCallback
Dynamically building the UI at runtime

Manipulating component state

Managing State with UseState
Best practices for integrating components with TypeScript and props
Managing activities with useEffect
Sharing global data with useContext

Routing between components

Exploiting the react-router for semantic URLs
Mapping URL paths and parameters to components
Creating routes with multiple parameters

Module 4: Developing React Forms

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

Ensuring quality with automated testing

Unit testing with Jest
End-to-End testing with Enzyme
Improving testing syntax with Testing Library

Module 5: Centralizing State with the Redux Toolkit

Global State and Redux

Architecting loosely-coupled applications for extensibility
Managing state centrally

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: Mbox, alt, Relay, Flux, and Reflux

Module 6: Connecting React to RESTful services

Making Ajax calls with isomorphic-fetch
Mapping CRUD access to React components
Adding Web service updates to the global store
Reviewing alternatives

Module 7: Enhancing and Deploying

Extending your components with Higher-Order Components
Accessing HTML with useRef
Externalizing configuration with appsetting files
Creating a deployment package
Deploying your application to IIS

Module 8: React Native

Introducing React Native

Building native apps with TypeScript
Integrating core, community, and custom components
The toolkit: React Native, TypeScript, and Expo

Creating UIs in Reactive Native

Fundamental building blocks: View, Stylesheet, Text, Pressable
More advanced components: Flatlist, Picker, Switch

Accepting Input

Integrating TextInput with change and value events
Simplifying the input process

Navigation in React Native

Navigation options
Navigating the application Stack
Defining routes and passing parameters

Deploying

Options for platform-specific functionality
Reviewing the deployment paths

Get This Course $3,285

4-day instructor-led training course
Hands-on instructor-led training
After-course instructor coaching included
Learning Tree end-of-course exam included

#2316

Feb 6 - 9 9:00 AM - 4:30 PM EST

Herndon, VA or Virtual
Apr 30 - May 3 9:00 AM - 4:30 PM EDT

Herndon, VA or Virtual
Jun 25 - 28 9:00 AM - 4:30 PM EDT

Virtual
Aug 6 - 9 9:00 AM - 4:30 PM EDT

Herndon, VA or Virtual

4-day instructor-led training course
Hands-on instructor-led training
After-course instructor coaching included
Learning Tree end-of-course exam included

#2316

Feb 6 - 9 9:00 AM - 4:30 PM EST

Herndon, VA or Virtual
Apr 30 - May 3 9:00 AM - 4:30 PM EDT

Herndon, VA or Virtual
Jun 25 - 28 9:00 AM - 4:30 PM EDT

Virtual
Aug 6 - 9 9:00 AM - 4:30 PM EDT

Herndon, VA or Virtual

Bring this or any training to your organization
Full-scale program development
Delivered when, where, and how you want it
Blended learning models
Tailored content
Expert team coaching

#2316

Questions about this course?

Customize Your Team Training Experience

Fill out the form below or call 888-843-8733

* Required Fields

Preferred method of contact:

Phone

Need Help Finding The Right Training Solution?

Our training advisors are here for you.

React Training FAQs

This course uses React version 18, 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

Building Web Applications with React 18

React Training Delivery Methods

React Training Course Information

React Training Outline

Module 1: Introduction and Overview

Module 2: Designing Custom React Components

Module 3: Activating React Components

Module 4: Developing React Forms

Module 5: Centralizing State with the Redux Toolkit

Module 6: Connecting React to RESTful services

Module 7: Enhancing and Deploying

Module 8: React Native

React Training FAQs

What version of React is this course using?

What if I am using React version 16 (or earlier)?

Will this course cover creating apps for iOS devices?

Who should attend this React training?

Related Courses