Introduction to React Development

Course Overview

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

Prerequisites

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