CA flag CA
CA 888-843-8733 US 888-843-8733

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

  • Understanding React
  • Integrating React and TypeScript

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

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

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

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
  • Making Ajax calls with isomorphic-fetch
  • Mapping CRUD access to React components
  • Adding Web service updates to the global store
  • Reviewing alternatives
  • 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

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 $2,890 For Team Prices Call: 888-843-8733
  • 4-day instructor-led training course

  • Hands-on instructor-led training

  • After-course instructor coaching included
  • Learning Tree end-of-course exam included
#2316
  • Jul 25 - 28 9:00 AM - 4:30 PM EDT
    Herndon, VA or Virtual
  • Nov 6 - 9 9:00 AM - 4:30 PM EST
    Herndon, VA or Virtual
  • 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
  • 4-day instructor-led training course

  • Hands-on instructor-led training

  • After-course instructor coaching included
  • Learning Tree end-of-course exam included
#2316
  • Jul 25 - 28 9:00 AM - 4:30 PM EDT
    Herndon, VA or Virtual
  • Nov 6 - 9 9:00 AM - 4:30 PM EST
    Herndon, VA or Virtual
  • 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
  • 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?
* Required Fields
Customize Your Team Training Experience

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

* Required Fields
Preferred method of contact:

Need Help Finding The Right Training Solution?

Our training advisors are here for you.

Contact Us

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

Related Courses

  • Learning Tree
    Angular Training

    Attend this introduction to angular training course & learn to build responsive, enterprise-strength applications for desktop and mobile.

    Foundation
    4 days
    Online or In-class
    Starts from $3,285
  • Learning Tree
    JavaScript Essentials for Web Development

    This Full Stack JavaScript developer course will teach you to write & debug client-side JavaScript to create modern pages for a variety of modern devices.

    Foundation
    4 days
    Online or In-class
    Starts from $3,285
Chat With Us