Choose your language:

France
Germany
Hong Kong
India
Ireland
Japan
Malaysia
Netherlands
New Zealand
Singapore
Sweden
United Kingdom
United States

Development Using React.js

Course Code

IN1594

Duration

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.js 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 includes discussions and hands-on practice using the new ES2015 features, to include modules and classes. Build environment frameworks: Node.js, Webpack, and Babel are all incorporated into the course discussions and exercises. Redux is used to assist React in application state management. Advanced features, such as routing and cross-component communication will be examined along with 3rd party UI React-based frameworks, such as Material-UI. Testing frameworks will be used to ensure quality and integrity of code is maintained.
This course is primarily aimed at front-end developers and anyone interested in learning the latest browser-based, front-end APIs.

Upon completion of this course, participants will be able to:

  • Build JSX components using ES2015, incorporate them into React.js apps
  • Incorporate Redux to capture state within React.js applications
  • Utilize ES2015 features and React.js best practices
  • Leverage UI tools and frameworks
Day 1
React.js Overview

Introducing React
React.js Advantages/Disadvantages
The Virtual DOM
Rendering Content

Creating React Components
Classes as Components
React.createElement()
React.createClass()
React in Chrome / Firefox
React and ReactDOM API
ReactDOM.render()
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
Generators

React and ES2015
Transpiling Code
Node, npm, and package.json
Webpack
Webpack.config.js
Using Babel

Day 2
Introducing JSX

Defining Components
ES2015 Classes Revisited
String Literals
Handling Props
JSX Expressions
React + JSX
Handling HTML classes
Rendering CSS via Components

React and State
Managing State
Forms
Component Lifecycles

Using Redux
Introducing Redux
Incorporating Redux and React
Defining Actions
Creating Reducers
Store
Dispatching
React + Redux Apps

Day 3
Advanced Features

Event Handling in JSX
Cross-Component Communication
Examining the React Router

Incorporating UI Libraries
Material-UI

Unit Testing
Jasmine
Jest/Enzyme
Testing UI Components
Send Us a Message
Choose one