ReactJS

Table of contents
Introduction to React JS.

Goal: Introduce JavaScript MVC focused on View and ReactJS

Objectives: Upon completing this Module, you should be able to:

• Understand JavaScript MVC

• Understand the View Technology

• Overview of ReactJS

• Configuration

Topics:

• JavaScript MVC

• View Technology

• Introduction to ReactJS

• React and SPA

• Basic Setup

• First Example – Hello World

Hands On:

• ReactJS Setup and Hello World

Page | 1
 React Basics

Goal: Understand basic features of React.

Objectives: Upon completing this Module, you should be able to:

• React Concepts

• JSX

• Render Elements

• Components and Props

• State and Lifecycle

• Handling Events

Topics:

• React Concepts

• JSX

• Render Elements

• Components and Props

• State and Lifecycle

• Handling Events

Hands On: • JSX

• Render Elements

• Components and Props

• State and Lifecycle

• Handling Events

Page | 2
 React Key Features

Goal: Understand other key features of React

Objectives: Upon completing this Module, you should be able to:

• Conditional Rendering

• Lists and Keys

• Forms

• Lifting State Up

• Composition vs Inheritance

• Thinking In React

Topics:

• Conditional Rendering

• Lists and Keys

• Forms

• Lifting State Up

• Composition vs Inheritance

• Thinking In React

Hands On:

• Conditional Rendering

• Lists and Keys

• Forms

• Lifting State Up

Page | 3
 Redux Introduction

Goal: Introduction to Redux

Objectives: Upon completing this Module, you should be able to:

• Introduction

• Motivation

• Core Concepts

• Three Principles

• Legacy of Redux

• Redux Setup

• First example

Topics:

• Introduction

• Motivation

• Core Concepts

• Three Principles

• Legacy of Redux

• Redux Setup

• First example

Hands On:

• First example on Redux

Page | 4
 Redux Basics

Goal: Understand the Action, Reducers and Store

Objectives: Upon completing this Module, you should be able to:

• Action

• Reducers

• Store

Topics:

• Action

• Action Creators

• State Shape

• Handling Actions

• Handling more actions

• Splitting Reducers

• Store

• Dispatch Actions

Hands On:

• Action

• Reducers

• Store

Page | 5
 Data Flow and Usage with React

Goal: Understand Data Flow and Usage with React

Objectives: Upon completing this Module, you should be able to:

• Data Flow

• Usage with React

Topics:

• Data Flow

• Install React Redux

• Presentational and Container Components

• Design Component Hierarchy

• Implementing Components

• Passing the Store

Hands On:

• Data Flow

• React Redux

Page | 6
 Async Actions and Async Flow in Redux

Goal: Understand Async Actions and Async Flow

Objectives: Upon completing this Module, you should be able to:

• Async Actions

• Async Flow

Topics:

• Actions

• Synchronous Action Creators

• Design State Shape

• Handle Actions

• Async Action Creators

• Async Flow

Hands On:

• Async Actions

Page | 7
 Middleware and React Router

Goal: Understand Middleware and React Router

Objectives: Upon completing this Module, you should be able to:

• Middleware

• React Router

Topics:

• Middleware

• Middleware Applicability

• React Router Overview

• React Router Configuration

• React Router with Redux

• Navigate with React Router

Hands On:

• Middleware

• React Router

Page | 8
 Advanced Features of Redux

Goal: Understand Advanced features of Redux

Objectives: Upon completing this Module, you should be able to:

• Object Select Operator

• Server Rendering

• ReSelect

Topics:

• Object Select Operator Overview

• Object Select Operator Applicability

• Redux on Server

• Configuration – Server Rending

• Server side – Server Rendering

• Client side – Server Rendering

Hands On:

• Server Rendering

• Reselect

Page | 9
 Testing Redux

Goal: Understand testing in Redux

Objectives: Upon completing this Module, you should be able to:

• Overview of Jest

• Testing in Redux

Topics:

• Overview of Jest

• Setup testing environment

• Test Action Creators

• Test Async Action Creators

• Test Reducers

• Test Components

• Test Connected Components

• Test Middleware

• Other Testing options

Hands On:• Test Action Creators

• Test Async Action Creators

• Test Reducers

• Test Components

• Test Connected Components

• Test Middleware

Page | 10