React.js Training | React.js Online Course

Overview

Building Strategic Influence in Matrix Organizations

React.js helps in creating interactive User Interfaces and designing Simple Views. This workshop is aimed at imparting the required knowledge required to build Rich Internet Applications (RIA) using React.js.

What you'll learn

Why You Shouldn’t Miss this course

At the end of this training course, the participants will:

Understand what React.js is and what problem it solves
Explore the basic architecture of a React.js application
Gain a deep knowledge of React.js components and JSX
Build a working application that uses React.js’s components
Learn React.js best practices
Compose an application using Flux architecture
Know how to maintain application state in a Redux Store
Know how to do module bundling using webpack
Use React dev tools

Duration: 24 Hours

Prerequisites

Recommended Experience

Must Have

Web development experience with intermediate level of expertise in JavaScript

Good to Have

Exposure to any server technology (J2EE, .NET, Ruby etc)

Curriculum

Structured for Strategic Application

New in ES6

RIA/SPA Basics

Classic Web applications vs. Rich Internet applications
Challenges in building Client centric applications
Benefits of RIA Frameworks
Where React.js fits in?

Building UI using React.js

Introduction
- Need for React.js
- Advantages of Virtual DOM
View Components using JSX
- JSX Syntax
- Using JSX to create view classes
- Creating views without using JSX
Models
- Advantages of Immutability
Components
- Component Life-Cycle
- Virtual DOM
- Component Events
- Using States and Properties
- Initializing States from properties
- Accessing DOM nodes using refs
- Synthetic Events
- Component Compositions
- Communication Between Components
- Reusable Components
Forms
- Controlled Components
- Uncontrolled Components
Unit Testing React.js Components
js Best Practices

Flux Architecture and Redux

Introduction
- Overview of Reactive programming
- Benefits of Unidirectional data flow
Architecture
- Building blocks in Flux
- Dispatcher
- Stores
- Action
- Views
Dispatcher
- The role of dispatcher
- Registering callbacks
- Triggering Actions
Store
- The role of Store
- Maintain Application State
- Event Broadcasting
Reducer
- Creating Reducers
- Retrieving State
- Combining Reducers
Action Creator
- Creating Actions
- Dispatching actions to the dispatcher
- Using Middleware
- Dispatching Async Actions using Thunk middleware
Views
- React Components as Views
- State Subscribers
- Updating data from the store
React-Redux Bindings
- Binding Components to React Store using “Connect”
- Injecting Redux Store using Provider
- Using Providers with React Routers
Testing
- Overview of Mocha & expect (chai.js)
- Organizing Unit tests using Mocha
- before & after setup
- Performing assertions using expect
- Using Karma.js
- Using Jest for mocking dependencies
- Testing React components
- Testing Stores