React with Redux Training

Duration 4 Days

Pre-requisites

• Developers must have knowledge of
  • ECMASCript 2015 (ES6)
  • Object Oriented JavaScript
  • JQuery
  • HTML and CSS syntaxes
  • Understand of Ajax concepts
  • Usage of libraries in JavaScript.

(It Is mandatory to accomplish the training prerequisite conditions before nominating for the session)

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project. React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native. React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.

Redux is an open-source JavaScript library designed for managing application state. It is primarily (but not mandatorily) used together with React or Angular for building user interfaces. Redux was created by Dan Abramov and Andrew Clark in 2015. Redux is inspired by Facebook’s Flux and influenced by functional programming language Elm.

COURSE DETAILS

Technologies covered:            React JS and Redux

Programming languages:       JavaScript (ECMAScript 2015)

Number of Days:                     4 Days

COURSE OUTLINE

Day 1

Introduction to React

1.      Introduction to React

2.      Why React?

3.      Advantages of React

4.      React Development Style

Get Started with React

1.      Setting up a React App

2.      Running a React App

3.      React Initialization Process

4.      React Virtual DOM

5.      React Ecosystem

Webpack Configuration

1.      What is Webpack?

2.      Configuring Webpack

3.      Understanding Webpack Loaders

4.      Using Webpack plugins

5.      Hot Reloading

6.      Understanding Babel

7.      Adding Scripts to package.json

JSX and React Components

1.      Introduction to JSX

2.      Render Elements

3.      Understanding Component

4.      Creating a Component

5.      Container vs. Presentation Components

6.      Props and State

7.      Component Lifecycle

Day 2

JSX and React Components Continued….

Data Flow

1.      Introduction to One Way Data Flow in React

2.      Props and State

3.      Passing Data to Child Component

4.      Handling State of Component

Event and Actions

1.      Events in React

2.      Data Binding

3.      Events and Actions

4.      Handling Events

5.      Communication Among Components

Day 3

Redux

1.      Introduction to Redux

2.      Redux vs. Flux

3.      Redux Flow Overview

4.      Redux Setup

Redux Flow

1.      Actions

2.      Reducers and Root Reducers

3.      Store

4.      Dispatch Actions

5.      Action creators

Actions, Stores, and Reducers

1.      Intro

2.      Actions

3.      Store

4.      What Is Immutability?

5.      Why Immutability?

6.      Handling Immutability

7.      Reducers

Connecting React to Redux

1.      Container vs. Presentational Components

2.      React-redux Introduction

3.      mapStateToProps

4.      mapDispatchToProps

Day 4

Async Actions and Action Flow

1.      Async Action Creators

2.      Async Flow

3.      Promises

Routing

1.      Understanding Routing

2.      Defining Routes

3.      Routes Handling

React Forms and Controls

1.      Introduction to React Forms

2.      Creating Forms

3.      Forms Validations

REST API with Express

1.      Creating REST API using Express

2.      Introduction to Postman

3.      Testing REST API using Postman REST Client

Database Operations with REST Service and React

1.      Introduction to REST

2.      Developing REST services

3.      REST Service CRUD Operations

Ajax Calls and Error Handling

1.      Create AJAX Status Actions

2.      Create AJAX Status Reducer

3.      Show and Hide Component Based on Ajax Status

4.      Using ES6 Promise

5.      Error Handling