Choose your language:

Hong Kong
New Zealand
United Kingdom
United States

Development Using React

Course Code



3 Days

This course assumes participants are familiar with JavaScript and HTML5. If not, the JavaScript Fundamentals course is recommended. It is essential that participants have a working knowledge of topics such as objects, prototypes, IIFEs, closures, as well as DOM and event handling APIs.
This course provides exposure to the React framework and its supporting tools. Discussions of React architecture, APIs, best practices and companion frameworks are coupled with hands-on exercises leading to a solid understanding of this powerful and popular framework. The course focuses building components with ES2015 classes and modules. Discussions and hands-on practice are all ES2015-based, to include the use of ES2015 modules and classes. Build environment tools: Node.js, npm, Webpack, and Babel are all incorporated into the course discussions and exercises. Redux integration into React is an important topic and this course provides hands-on exposure to this companion framework. Additional features: discussions of routing, different ways to tackle CSS, animations, cross-component communication, Pub-Sub techniques, testing, creation of middleware, and UI frameworks such as React-Bootstrap and MaterialUI are all discussions in the course. Also, a chapter on React Native is included.
This course is primarily aimed at front-end developers and anyone interested in learning React, ES2015 JavaScript, and the latest browser-based, front-end APIs.

In this course, participants will:

  • Build JSX components using ES2015, incorporate them into React apps
  • Incorporate Redux to capture state within React applications
  • Utilize ES2015 features and React best practices
  • Leverage UI tools and frameworks
Day 1
Setup and the Build Environment
Node, npm, and package.json
JavaScript Modules: AMD, CommonJS, ES2015 Modules
Using Babel, configuring .babelrc
Transpiling Code

React Overview
Introducing React
React Advantages/Disadvantages
The Virtual DOM
Rendering Content
Classes as Components
Updates and Rendering
Plugins for Chrome / Firefox
React and ReactDOM API
Managing Properties
Updates and Rendering

ES2015 Features and Dev Tools
ECMAScript Versioning
ES5 Array Methods
ES6 New Control Structures
New Scoping Rules
Object Literal Property Shorthands
Template Literals
Default, Rest, Spread Parameters
Destructured Arguments
Arrow Functions
Modules: ES2015 vs CommonJS vs AMD
ES2015 Classes
Introducing JSX
JSX Best Practices

Day 2
JSX and React

Defining Components
ES2015 Classes Revisited
Handling Props
Requiring Props with PropTypes
Understanding State
Handling Events
Fixing this
Rules for working with Component State
Cross-component Communication
Rendering CSS within Components
Examining Styled-components and Aphrodite

React Architecture
Container vs. Presentational Components
Forms / Form Validation
Component Lifecycles

Communicating with the Server
Modifying the Build Environment for the Server
Express + Webpack
Ajax and Promises
React with jQuery
React with Fetch
React with Axios
React with SuperAgent
Using PubSubJS
Bootstrap and Forms in React
Media Queries

Day 3
Using Redux

Introducing Redux
Redux Basics
Redux without React
React and Redux
Defining Actions
Creating Reducers
The Store
Creating Connected Components
mapStateToProps() and mapDispatchToProps()
Action Creators
Combining Multiple Reducers
Organizing Components

Advanced Features
Creating Middleware
Applying Middleware
CSS Animations and 3rd Party Tools

React Native
React Native Overview
Development Requirements
Connecting Your Remote Device
Using Expo
Rendering CSS
React Native UI Components
Handling Events
Network Calls using Fetch
Send Us a Message
Choose one