Web Age Solutions Inc
Providing Technology Training and Mentoring For Modern Technology Adoption
Web Age Aniversary Logo
US Inquiries / 1.877.517.6540
Canadian Inquiries / 1.877.812.8887

React Training: React JavaScript Programming

Course #:WA2583




Courseware: Available for sale

Grow your React skills and learn React from the pros. Web Age Solutions offers expert authored React training that will take your software development knowledge to the next level.

React is a JavaScript library that makes building user interfaces effortlessly simple.

It was developed by Facebook, which maintains it along with a community of developers. Since User Interfaces are used in almost every web application, the ability to develop UIs more efficiently is crucial. React does exactly this by providing a developer-friendly way to create custom UIs.

This React Training class introduces the React JavaScript framework, sometimes referred to as ReactJS or React.JS.

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

react training React Training

React Training Delivery Methods

Web Age Solutions Live Virtual React Training              Web Age Solutions Onsite React Training              Web Age Solutions React Classroom Training

Overview of React JavaScript Programming

React JavaScript Programming Objectives:

In this React 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 for React JavaScript Training

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

Duration

Three days.

Outline of React JavaScript Programming Training

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
  • React Libraries
  • Summary

Chapter 2. ES6 in a Nutshell

  • What is ES6?
  • ES6 Features
  • Using ES6
  • Transpiling
  • Major Syntax Changes
  • let and const
  • Variable Scope
  • Shadowing Variables
  • Arrow Functions
  • Arrow Functions As Parameters
  • Using ‘this’ Within Arrow Functions
  • Template Literals
  • Spread Operator
  • ES6 Classes
  • Declaring Classes
  • Declaring Instance Methods
  • Accessor Methods
  • Static Methods
  • Inheritance With Classes
  • Summary

Chapter 3. Babel Command-Line Interface

  • Babel Transpiler
  • Usage Options
  • Presets and Plug-ins
  • Babel CLI Installation
  • Babel Configuration
  • Running Babel Command-Line
  • A Basic ES6 Development Setup with Babel
  • Test the Babel Development Setup
  • Adding React to the Development Setup
  • Create a Minimal React App – Index.html
  • Create a Minimal React App – app.js
  • Summary

Chapter 4. Basic Components and JSX

  • What is JSX?
  • JSX Transpilation to React Code Example
  • Running the Transpiled Code
  • Babel
  • The Babel Runtime JavaScript Library
  • Script Import Skeleton Code
  • Playing Around in CodePen
  • React Components
  • Ways to Create UI Components
  • Creating a Functional Component Example
  • Component Names Must Be Capitalized
  • Creating a React Class-Based Component in ES5
  • The render Method
  • Creating a UI Component Using ES6 Class Notation
  • Using ES6 Classes with React
  • Which UI Component Creation Syntax Should I Use?
  • Components vs Elements
  • Elements Are Immutable
  • Properties
  • Property Naming Convention
  • Properties Default to ‘True’
  • Spread Attributes (an ES6 Feature)
  • Expressions
  • Fragments
  • Summary

Chapter 5. 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
  • Container vs. Presentational Components
  • 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 6. React Components with ES6 Classes

  • Classes in ES6
  • Functional Components
  • Extending React.Component
  • The render() Method
  • state
  • props
  • defaultProps
  • propTypes
  • Component Lifecycle
  • Component Life-cycle: Overview
  • Component Life-cycle – Render Phase
  • Component Life cycle – Commit Phase
  • Component Life-cycle – Unmounting
  • constructor()
  • example
  • componentDidMount()
  • example
  • setState( newStateValue )
  • Summary

Chapter 7. React Router

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

Chapter 8. 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 9. Using React Hooks

  • Functional Component Shortcomings
  • Hooks Overview
  • Functional Component Props
  • The useState Hook
  • Functional Component using the useState hook
  • useState with Multiple Variables
  • useState can also be used with Objects
  • The Effect Hook
  • Effect Hook Example
  • Using Effect Hook to Load Data
  • Restricting when useEffect is Called
  • Hook Rules
  • Linter Example
  • Custom Hooks
  • Custom Hook Function Example
  • Using the Custom Hook
  • Additional Hooks
  • Summary

Chapter 10. 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

Lab Exercises

Lab 1. Setting Up a React Development Environment
Lab 2. Basic React Components
Lab 3. More React Component Concepts
Lab 4. ES6 React Components
Lab 5. React Router Application
Lab 6. React Hooks Application
Lab 7. Course Project – React App Using Hooks

in PySpark (Project)

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.

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.

Proven Results in React Training

 

“The 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 React Training?

React 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.

React Training

Various delivery methods

Flexible delivery methods are available depending on your learning style.

React Training

Resources

Resources are included for a comprehensive learning experience.


 

We regularly offer React 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.


US Inquiries / 1.877.517.6540
Canadian Inquiries / 1.877.812.8887