Formation React JS

Module 1: Introduction to ES6

History of JavaScript

What is ES6

A word on Babel

Block scope, let & const

Template literals

Arrow functions

Spread and Rest operators

Object literal improvements

Destructuring

Classes

Inheritance

Static properties and methods

Promises

Iterators and Iterables

Generators

Modules

Set and Map

Module 2: Introduction to React

What is React?

Why React?

React version history

React 16 vs React 15

Just React - Hello World

Using create-react-app

Anatomy of a React project

Running the app

Debugging first React app

Module 3: Templating Using JSX

Working with React.createElement

Expressions

Using logical operators

Specifying attributes

Specifying children

Module 4: All About Components

Significance of component architecture

Types of components: Functional, Class based, Pure

Component Composition

Module 5: Working With the State and Props

What is state and its significance

Read state and set state

Passing data to components using props

Validating props using PropTypes

Supplying default values to props using defaultProps

Understanding component Lifecycle

Module 6: Rendering Lists

Using react key prop

Using map function to iterate on arrays to generate elements

Module 7: Working With Forms

Controlled components

Uncontrolled components

Understanding the significance of defaultValue prop

Using react ref prop to get access to DOM element

Understand React Portals

Module 8: Error Handling

Understand error boundaries

React’s new fiber architecture

Module 9: Routing With react-router

Setting up react-router

Understanding routing in single page applications

Working with BrowserRouter and HashRouter components

Configuring route with Route component

Using Switch component to define routing rules

Making routes dynamic using route params

Working with nested routes

Navigating to pages using Link and NavLink component

Redirect routes using RedirectComponent

Using Prompt component to get consent of user for navigation

Path less Route to handle failed matches

Module 10: Just Redux

What is redux

Why redux

Redux principles

Install and setup redux

Creating actions, reducer and store

Immutable.js for immutable data structures

Module 11: React Redux

What is React Redux

Why React Redux

Install and setup

Presentational vs Container components

Understand high order component

Understanding mapStateToProps and mapDispatchToProps usage

Module 12: Redux Saga (Redux Middleware)

Why redux middleware

Available redux middleware choices

What is redux saga

Install and setup redux saga

Working with Saga helpers

Sagas vs promises

Module 13: Server-side Rendering with React

What is server-side rendering (SSR)?

Why SSR

Working with renderToString and renderToStaticMarkup methods

Module 14: Unit Testing in React

Understand the significance of unit testing

Understand unit testing jargon and tools

Unit testing react components with Jest

Unit testing react components with enzyme

Using sinon to mock

Module 15: Webpack Primer

What is webpack

Why webpack

Install and setup webpack

Working with webpack configuration file

Working with loaders

Quick word on code splitting, lazy loading, tree shaking