Web Development Private Public On-Demand

React Training (REA101)

3 days
JavaScriptReact

React Training introduces the core concepts and practical techniques used to build modern user interfaces with React.

Talk to a Learning ConsultantRegister for a Public ClassRequest a Private Class

Register or Request Training

Price per student
$1,725.00
Guaranteed to run
Select a date
Please select a class.
Interested in a private class?
  • Private class for your team
  • Live expert instructor
  • Online or on‑location
  • Customizable agenda
  • Proposal responses same day as request
Request Proposal
Price per student
$149.85 or 3 vouchers
  • On-Demand 24/7
  • Readings, Video Presentations, Exercises
  • Quizzes to knowledge check
  • Life-Time Access

Course Overview

React Training introduces the core concepts and practical techniques used to build modern user interfaces with React. Learners begin with React fundamentals, JSX, React elements, and Vite.js before working through the structure of a React application. Using the Mathificent project, participants gain hands-on experience breaking interfaces into reusable components, passing and destructuring props, working with fragments, and managing application state.

As the course progresses, learners add routing, apply CSS and inline styles, and implement interactive game logic including equations, user input, answer validation, and timers. They also explore React Hooks and the useEffect Hook, including component mounting and unmounting, functional state updates, and keyboard events. By the end of the course, learners will have practiced building, refining, and deploying a functional React application.

Course Benefits

  • Explore React fundamentals, application structure, JSX, and React elements.
  • Set up a React project with Vite.js and work within a modern React development environment.
  • Build reusable components and organize an application into a maintainable component structure.
  • Use props, destructuring, semantic HTML, and fragments to create flexible user interfaces.
  • Manage interactive application data with React state and state setter functions.
  • Configure routing to support navigation between different views in a React application.
  • Apply CSS and inline styles to improve the appearance and usability of React components.
  • Develop interactive application logic for user input, answer validation, equations, and timers.
  • Use React Hooks and useEffect to manage effects, component lifecycle behavior, and keyboard events.
  • Build and deploy a completed React application using skills reinforced through hands-on exercises.

Delivery Methods

Public Class
Live expert-led online training from anywhere. Guaranteed to run .
Private Class
Delivered for your team at your site or online.
On-Demand
Learn at your own pace with 24/7 access.

Course Outline

  1. Introduction to React
    1. What is React?
    2. React Essentials
    3. Introduction to Vite.js
    4. Get Started with Create Vite App (Exercise)
    5. Introducing Our Project: Mathificent
    6. Learning the Structure of a React App (Exercise)
  2. JSX and React Elements
    1. Using JSX in React
    2. JSX Rules
    3. Using JSX (Exercise)
  3. React Components
    1. Assembling User Interfaces
    2. Breaking an App into Components (Exercise)
    3. Passing Props Between Components (Exercise)
    4. Organizing Your Components (Exercise)
    5. Semantic HTML and the Fragment Element
    6. Using Fragment (Exercise)
    7. Destructuring props
  4. React State
    1. Understanding State
    2. Getting React to React
    3. Why is count a Constant?
    4. Child Components and State
    5. Adding State (Exercise)
  5. React Routing
    1. Routing
    2. Implementing Routes (Exercise)
  6. Styling React Apps
    1. CSS in React Applications
    2. Cleaning Up App.css (Exercise)
    3. Styling the Main Component (Exercise)
    4. Improving the Operation Dropdown (Exercise)
    5. Inline Styles
    6. Creating the Game Component (Exercise)
    7. A Word of Caution
  7. Implementing Game Logic
    1. Setting the Equation (Exercise)
    2. Getting the User’s Answer (Exercise)
    3. Checking the User’s Answer (Exercise)
    4. Creating the Timer (Exercise)
  8. React Effects
    1. React Hooks
    2. The useEffect Hook
    3. useEffect to the Rescue
    4. Mount and Unmount
    5. Passing Functions to State Variable Setters
    6. Fixing the Timer (Exercise)
    7. Catching Keyboard Events (Exercise)
    8. Building and Deploying Your React App

Class Materials

Each student receives a comprehensive set of materials, including course notes and all class examples.

Class Prerequisites

Experience in the following is required for this React class:

  • HTML
  • JavaScript

Experience in the following would be useful for this React class:

  • CSS
  • Bootstrap

Prerequisite Courses

Courses that can help you meet these prerequisites:

Have questions about this course?

We can help with curriculum details, delivery options, pricing, or anything else. Reach out and we’ll point you in the right direction.

Talk to a Learning Consultant