1 1

Introduction to React Development (WA2583) - 3 Days [RA1401]

Introduction to React Development (WA2583) - 3 Days [RA1401]

$2,090.00 CAD
$2,090.00 CAD
Sale Sold out

This React course teaches developers how to build modern web applications. Learners gain practical skills in component-based UIs, state management, routing, and advanced React features. This course also covers TypeScript, GraphQL and Unit Testing with React Testing Library

Multiple Student Registration:  For more than one participant or group training, contact us for preferred pricing at training@rtdglobal.com.

Target Audience

Existing JavaScript or TypeScript developers preparing to develop and/or support front-end web applications written in React.

Prerequisites

Attendees for this React training must be proficient developers in modern JavaScript or TypeScript and have some understanding of HTML, CSS, and Ajax..

Course Details

React Overview

  • What is React?
  • React Component Model
  • JSX and Virtual DOM
  • Creating React Projects
  • React Application Frameworks
  • React IDEs and Tools

Introduction to TypeScript

  • About TypeScript
  • The Type System
  • Defining Classes and Methods
  • Working with ES6 Modules
  • Arrow Functions and Template Strings

Basic Components and JSX

  • What is JSX?
  • React Components
  • Setting CSS Styles
  • Input Parameters and Properties
  • Expressions and Fragments

React Functional Component Concepts

  • Functional Components and JSX
  • Props vs. State
  • Event Handling
  • Component Life-cycle
  • App Development Workflow

React Router v7.x

  • Routing and Navigation
  • Component-Based and File-Based Routing
  • Route Parameters and Nested Routes
  • Private Routes

State Management for React

  • React State Basics
  • Managing State with Hooks
  • Redux State Library
  • Types of State
  • Summary

Using React Hooks

  • Hooks Overview
  • The useState Hook
  • The useEffect Hook
  • Additional Hooks
  • Fetching Data Correctly

React's useContext and useReducer Hooks

  • Using the useContext Hook
  • The useReducer Hook
  • CRUD Operations
  • Adding Actions

The React Hook Form Library

  • What is React Hook Form?
  • Installation and Basic Usage
  • Handling Validation
  • Integration with UI Libraries

Creating Custom React Hooks

  • Custom Hooks
  • Using the Custom Message Hook
  • A Custom useList Hook
  • The useDebugValue Hook

React Suspense and Transitions

  • What is React Suspense?
  • Implementing Suspense
  • What are React Transitions?
  • Key Transitions Concepts

Building Apps with Remix

  • What is Remix?
  • Remix Essentials
  • Remix File Based Routing
  • Data Fetching and Mutation

Unit Testing React with React Testing Library

  • React Testing Environment
  • Vitest Setup
  • Snapshot Testing
  • Testing Asynchronous code

Asynchronous Programming with Promises

  • Async Programming in JavaScript
  • What is a Promise?
  • Handling promises with async/await
  • Creating Custom Promises

GraphQL Introduction

  • What is GraphQL?
  • GraphQL Queries and Mutations
  • GraphQL Schema
  • Benefits of GraphQL

Lab Exercises

  • Lab 1. Setting Up a React Development Environment
  • Lab 2. Basic React Components
  • Lab 3. More React Component Concepts
  • Lab 4. React Router Application
  • Lab 5. React Hooks Application
  • Lab 6. React Custom Hooks
  • Lab 7. Suspense and Transitions Lab
  • Lab 8. Remix Lab-Demo
  • Lab 9. Unit Testing with Vitest and Jest
  • Lab 10. Asynchronous Programming with Promises
  • Lab 11. GraphQL Lab-Demo
  • Lab 12. Course Project - React App Using Hooks
View full details