WATCH NOW! – Using React Hooks

View related React JS Training Courses:

React Training Courses

React is continually evolving and so are the best practices for using React.

Stay ahead of the changes!

Keep Reading

Delivery Methods

01/24/2022 - 01/26/2022
10:00 AM - 06:00 PM
Online Virtual Class
USD $1,995.00
Enroll
01/31/2022 - 02/02/2022
10:00 AM - 06:00 PM
Online Virtual Class
USD $1,995.00
Enroll
02/28/2022 - 03/02/2022
10:00 AM - 06:00 PM
Online Virtual Class
USD $1,995.00
Enroll

react js training

This ReactJS Training class will provide an introduction to the benefits of the React JavaScript framework, so course participants can start to develop applications quickly using the framework.

OBJECTIVES

In this ReactJS training class, attendees will learn how to:

  • Understand the programming model provided by the React framework
  • Define React components
  • Use the React framework to handle events and stateful data

PREREQUISITES

Attendees for this ReactJS training should have some prior understanding of web development, HTML, AJAX, JavaScript and ES6 or higher.

We offer a 1-2 day subset of our Introduction to JavaScript course to meet this pre-requisite if needed. Please ask your salesperson for details.

DURATION

3 Days

WATCH NOW!

How to Create React Applications using TypeScript

Download Sample Labs Lab Setup Guide

Outline for ReactJS Training: React JavaScript Programming

WA2583 React JavaScript Programming Training Course Outline

Chapter 1. React Overview

  • What is React?
  • What's in a Name?
  • React Component Model
  • What React Is Not
  • What You Will Not Find in React
  • Motivation for Creating React
  • A React JavaScript Example
  • One-Way Data Flow
  • JSX
  • A JSX Example
  • The Virtual (Mock) DOM
  • Only Sub-components that Actually Change are Re-Rendered
  • create-react-app
  • Summary

Chapter 2. Basic Components and JSX

  • What is JSX?
  • JSX Transpilation to React Code Example
  • Running the Transpiled Code
  • Babel
  • Playing Around in CodePen
  • React Components
  • Creating a Functional Component Example
  • Component Names Must Be Capitalized
  • Components vs Elements
  • Elements Are Immutable
  • Properties
  • Property Naming Convention
  • Properties Default to 'True'
  • Spread Attributes (an ES6 Feature)
  • Expressions
  • Fragments
  • Summary

Chapter 3. React Functional Component Concepts

  • Functional Components
  • Nesting JSX Elements
  • Example of JSX Nesting
  • Comments in JSX Code
  • Setting CSS Styles Using Classes
  • Setting CSS Styles Directly
  • JSX Escapes Values
  • Working with Lists of Items
  • Keys in Lists
  • Example List With Key
  • State
  • Types of State Data
  • State Hierarchy
  • Lifting State Up
  • Props vs. State
  • Pass Down a Function
  • Immutability
  • Immutability – Why?
  • Virtual DOM and State
  • Setting state
  • Updating Input fields
  • Passing Props to Components
  • Passing Functions to Components
  • Event Handling
  • Event Handler Example
  • Event Binding - DOs
  • Event Binding – Don'ts
  • Passing Parameters to Event Handlers
  • Component Life-cycle
  • Life-cycle in Functional Components
  • App Development Workflow – 1/3
  • App Development Workflow – 2/3
  • App Development Workflow – 3/3
  • Summary

Chapter 4. React Router

  • Routing and Navigation
  • react-router
  • Creating a react-router based project
  • A Basic Routed Component
  • Router vs. BrowserRouter
  • The Route component
  •  
  • Redirect Route
  • Navigating with
  • Navigating with
  • Route Parameters
  • Retrieving Route Parameters
  • QueryString Parameters
  • Using Router with Redux
  • Summary

Chapter 5. State Management for React

  • React State Basics – Props and State
  • Props
  • State in Class Based Components
  • Managing State with Hooks in Functional Components
  • The Problem with Props and State
  • Redux State Library
  • Redux Advantages
  • Redux Disadvantages
  • Basic Rules for State Management
  • Types of State
  • Data State
  • Communication State
  • Control State
  • Session State
  • Location State
  • Location State Side Effects
  • Summary

Chapter 6. Building React Apps with Redux

  • Redux
  • Redux Terminology
  • Redux Principles
  • Redux: Actions
  • Redux Action Types
  • Action Creators
  • Dispatching Actions
  • Data Flow Basics
  • Redux Reducers
  • Pure Functions
  • Reducer Example
  • Returning Default State
  • Creating a Development Environment with create-react-app
  • Using Redux with React
  • Initializing the Store
  • Immutability
  • Benefits of Immutable State
  • Mutability of Standard types
  • Copying Objects in JavaScript
  • Copying Arrays in JavaScript
  • One Store - Multiple Reducers
  • Combining Reducers
  • Components and Redux
  • The React-Redux Package
  • Wrapping App with Provider
  • mapStateToProps
  • mapDispatchToProps
  • Using Mapped Properties and Methods
  • Wrapping Components with Connect
  • Configure Store
  • Programming Advice - MultiTab Console
  • Summary

Chapter 7. Using React Hooks

  • Functional Component Shortcomings
  • Hooks Overview
  • Hook Rules
  • React Linter Example
  • Functional Component Props
  • The useState Hook
  • Functional Component using the useState hook
  • useState with Multiple Variables
  • useState can also be used with Objects
  • The useEffect Hook
  • useEffect Hook Example
  • Using useEffect Hook to Load Data
  • Restricting when useEffect is Called
  • The useContext Hook
  • Additional Hooks
  • The useReducer Hook
  • An Example Reducer Function
  • Calling and Using useReducer
  • The useMemo Hook
  • useMemo Example
  • The useCallback Hook
  • useCallback Example
  • The useRef Hook
  • Using useRef to Hold Values
  • The useImperativeHandle Hook
  • useImperativeHandle Hook Example
  • The useLayoutEffect Hook
  • Summary

Chapter 8. Creating Custom React Hooks

  • Custom Hooks
  • Custom Message Hook
  • Using the Custom Message Hook
  • A Custom useList Hook
  • Using the useList Custom Hook
  • The built-in useDebugValue Hook
  • Viewing the Effect of the useDebugValue Hook
  • Summary

Chapter 9. Unit Testing React with React Testing Library

  • React Testing Framework
  • Features
  • Snapshot Testing
  • Code Coverage
  • Interactive Mode
  • Projects created with create-react-app
  • Default App Component Test
  • Unit Tests
  • Anatomy of a Unit Test
  • Common Matchers
  • Combining Tests
  • Running Tests
  • Testing Promise based async code with 'done'
  • Setup and Teardown
  • react-testing-library
  • A Simple Component Test
  • A Simple Snapshot Test
  • Running and Updating SnapShot Tests
  • Building Component Tests
  • Calling Render
  • Render Properties
  • Simulating Events
  • Testing Results
  • Using Query Functions
  • Text Matching
  • Counter Component
  • counter-test.js
  • Summary

Chapter 10. [OPTIONAL] Exception Handling in JavaScript

  • Exception Handling
  • Try Syntax
  • The Finally Block
  • The Nested Try Blocks
  • Exceptions Types in JavaScript
  • The Throw Statement
  • Using the Error Object
  • Summary

Chapter 11. [OPTIONAL] Web Storage, Web SQL, and IndexedDB

  • Data Storage
  • Data Storage Options
  • Web Storage
  • Web Storage Programming Interface
  • Web Storage Examples
  • Storing JavaScript Objects
  • IndexedDB
  • IndexedDB Terminology
  • Getting indexedDB Objects
  • Opening a Database
  • Creating an Object Store
  • Inserting a Record
  • Retrieving a Record
  • Summary

Chapter 12. [OPTIONAL] Asynchronous Programming with Promises

  • The Problems with Callbacks
  • Introduction to Promises
  • Requirements for Using Promises
  • Creating Promises Manually
  • Calling the Promise-based Function
  • Making APIs that support both callbacks and promises
  • Using APIs that support both callbacks and promises
  • Chaining then Method / Returning a Value or a Promise from then Method
  • Promisifying Callbacks with Bluebird
  • Using Bluebird
  • Bluebird – List of Useful Functions
  • Benefit of using Bluebird over ES6 for Promisification
  • Error Handling in Promise-based asynchronous functions
  • Summary

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 Redux Application
Lab 6. React Hooks Application
Lab 7. React Custom Hooks
Lab 8. Unit Testing with Jest
Lab 9. Course Project - React App Using Hooks
Lab 10. [OPTIONAL] Exception Handling in JavaScript
Lab 11. [OPTIONAL] Asynchronous Programming with Promises

What is React used for?

React. js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.

Why is React is so popular?

The core objective of ReactJS is providing the best possible rendering performance. Its strength comes from the focus on individual components. Instead of working on the entire web app, ReactJS allows a developer to break down the complex UI into simpler components. Enroll in Web Age React training today!

What is the most popular JavaScript framework?

JavaScript has been the most fast-growing and sought-after programming language for years. Three Javascript-based tools are most wanted by software developers, React.js being the most loved with 21.5%.

Google Trends confirms that React is currently at the top.

What is the Relationship between JavaScript and ReactJS?

In simple words, there are a lot of different JS libraries out there and React JS is one of them. React is a JavaScript library that specializes in helping developers build user interfaces, or UIs. In terms of websites and web applications, UIs are the collection of on-screen menus, search bars, buttons, and anything else someone interacts with to USE a website or app. In addition to providing reusable React library code (saving development time and cutting down on the chance for coding errors), React comes with two key features that add to its appeal for JavaScript developers:

Why take React Training?

ReactJS presents graceful solutions to some of front-end programming’s most persistent issues. It’s fast, scalable, flexible, powerful, and has a robust developer community that’s rapidly growing. There’s never been a better time to learn React and take React Training.

Proven Results in ReactJS Training

The React Training Instructor was very knowledgeable and was easily able to answer all of our questions.
Instructor knew the material well.
Instructor was good at information flow – the next question students had, were most of the time answered in the natural flow of the course.
The instructor was highly knowledgeable in the field from the perspective of someone with a month of react experience. I took this course in the hopes of improving my skills in react, and I do believe they have. His communication and delivery was exceptional and I had no problem keeping up with his explanations.
Great tutorials! I will go back to these.
This course is excellent. It gave me an overview of data science and a good understanding. It put me in the right direction of data analysis in my work.

Why Choose Web Age Solutions for ReactJS Training?

 

Best price in the industry

You won’t find better value in the marketplace. If you do find a lower price, we will beat it.

Various delivery methods

Flexible delivery methods are available depending on your learning style.

Resources

Resources are included for a comprehensive learning experience.

 

We regularly offer ReactJS Training classes in these and other cities. Atlanta, Austin, Baltimore, Calgary, Chicago, Cleveland, Dallas, Denver, Detroit, Houston, Jacksonville, Miami, Montreal, New York City, Orlando, Ottawa, Philadelphia, Phoenix, Pittsburgh, Seattle, Toronto, Vancouver, Washington DC.