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
