REACTINTRO - REACT: Introduction to React JavaScript Training

REACT: Introduction to React JavaScript Training is a 5-Day course with expert developer instructor Judy Lipinski. You’ll get an in-depth introduction to React.js. This is one of the most popular JavaScript libraries for building user interfaces. You’ll learn the fundamental concepts of React while learning best practices for building fast interactive user interfaces. In addition, this is hands-on, formalized training. You will leave class with experience in using the key concepts of React.

Student Testimonials

Instructor did a great job, from experience this subject can be a bit dry to teach but he was able to keep it very engaging and made it much easier to focus. Student
Excellent presentation skills, subject matter knowledge, and command of the environment. Student
Instructor was outstanding. Knowledgeable, presented well, and class timing was perfect. Student

Click here to print this page »


At a minimum, this course requires an understanding of HTML and JavaScript - to the point of understanding functional programming and callbacks. Experience with CSS is helpful, but not essential.

Detailed Class Syllabus

Introduction to React

State of application development: web, mobile, tv, desktop
Why use React?
Basics of using VS Code editor
Git basics: Download course solutions and demos

Overview of Modern JavaScript & Tools

Essential aspects of EcmaScript 2015 (ES6)
Using const and let
Arrow functions
Classes and Modules
Transpiling from ES6 to ES5 with Babel
Review and Execute Node projects
Browserify, Webpack, Immutable.js

Fundamental React concepts

Virtual DOM
Exploring project directories and files
Understanding React project dependencies
React and React.DOM.*
Special DOM attributes
Basics of components
Using the optional JSX

React Development

Using Create React App
Using build tools and Running React projects
Code Analysis with ESLint
Debugging in VS Code
Installing and using React Developer Tools
Rendering Elements
Using built-in components
Nesting components

Creating Components

Hierarchies of React components
Creating a basic component with React.createClass
Passing properties from parent to child
When to use “props” and when to use “state”
Using component with React.createElement
Storing and Accessing state


Why JSX?
Specifying attributes
Empty and child tags
Preventing XSS (cross-site-scripting) attacks
Precompiled JSX

Component’s State and Lifecycle

Using constructors
Component's lifecycle methods
Mounting methods
Updating methods
Unmounting methods
Validating against expected properties
Setting defaults
Conditional Rendering
Lists and Keys

Event Handling in React

Synthetic events system
Attaching Event Handlers
Passing Arguments to Event Handlers
Rendering Based on State
Updating State

Routing with react-router

Creating our routes
Matching paths
Navigating between pages
Nesting Routes
Capturing Path Params
Route Prefixing
Defining the root of your app


Differences between Controlled and Uncontrolled
JSX and Forms
Using form events
Controlling data input with Controlled form components
How React.js changes the interface of some form components
The importance of using the name attribute
Creating custom form components
Dealing with multiple Controlled form components
Leveraging control of focus
Best practices for creating usable forms


Types of Testing
Jasmine and Karma
Creating test suits, specs, and expectations
Installing and running Jest
Testing React components