Module 01:

Introduction to React

1. 1. 1. 1. What is React?
         2. Why React?
         3. React version history
         4. React 16 vs React 15
         5. Just React – Hello World
         6. Using create-react-app
         7. Anatomy of react project
         8. Running the app
         9. Debugging first react app

Templating using JSX

1. 1. 1. 1. Working with React. createElement
         2. Expressions
         3. Using logical operators
         4. Specifying attributes
         5. Specifying children
         6. Fragments

About Components

1. 1. 1. 1. Significance of component architecture
         2. Types of components
         3. Functional
         4. Class based
         5. Pure
         6. Component Composition

Module 02:

Working with state and props

1. 1. 1. 1. What is state and it significance
         2. Read state and set state
         3. Passing data to component using props
         4. Validating props using propTypes
         5. Supplying default values to props using defaultProps

Rendering lists

1. 1. 1. 1. Using react key prop
         2. Using map function to iterate on arrays to generate elements

Event handling in React

1. 1. 1. 1. Understanding React event system
         2. Understanding Synthetic event
         3. Passing arguments to event handlers

Understanding component lifecycle and  handling errors

1. 1. 1. 1. Understand the lifecycle methods
         2. Handle errors using error boundaries

Module 03:

Working with forms</str

1. 1. 1. 1. Controlled components
         2. Uncontrolled components
         3. Understand the significance to default Value prop
         4. Using react ref prop to get access to DOM element

Context

1. 1. 1. 1. What is context
         2. When to use context
         3. Create Context
         4. Context.Provider
         5. Context.Consumer
         6. Reading context in class

Code-Splitting

1. 1. 1. 1. What is code splitting
         2. Why do you need code splitting
         3. React.lazy
         4. Suspense
         5. Route-based code splitting

Module 04:

ooks

1. 1. 1. 1. What are hooks
         2. Why do you need hooks
         3. Different types of hooks
         4. Using state and effect hooks
         5. Rules of hooks

Routing with react router

1. 1. 1. 1. Setting up react router
         2. Understand routing in single page applications
         3. Working with BrowserRouter and HashRouter components
         4. Configuring route with Route component
         5. Using Switch component to define routing rules
         6. Making routes dynamic using route params
         7. Working with nested routes
         8. Navigating to pages using Link and NavLink component
         9. Redirect routes using Redirect Component
         10. Using Prompt component to get consent of user for navigation
         11. Path less Route to handle failed matches

Just Redux

1. 1. 1. 1. What is redux
         2. Why redux
         3. Redux principles
         4. Install and setup redux
         5. Creating actions, reducer and store

Module 05:

Immutable.js

1. 1. 1. 1. What is Immutable.js?
         2. Immutable collections
         3. Lists
         4. Maps
         5. Sets

React Redux

1. 1. 1. 1. What is React Redux
         2. Why React Redux
         3. Install and setup
         4. Presentational vs Container components
         5. Understand high order component
         6. Understanding mapStateToProps and mapDispatchtToProps usage

Redux middleware

1. 1. 1. 1. Why redux middleware
         2. Available redux middleware choices
         3. What is redux saga
         4. Install and setup redux saga
         5. Working with Saga helpers
         6. Sagas vs promises

Module 06:

Unit Testing

1. 1. 1. 1. Understand the significance of unit testing
         2. Understand unit testing jargon and tools
         3. Unit testing react components with Jest
         4. Unit testing react components with enzyme

Webpack Primer

1. 1. 1. 1. What is webpack
         2. Why webpack
         3. Install and setup webpack
         4. Working with webpack configuration file
         5. Working with loaders
         6. Working with plugins
         7. Setting up Hot Module Replacement

Isomorphic React

1. 1. 1. 1. What is server-side rendering (SSR)?
         2. Why SSR
         3. Working with render To String and render To StaticM arkup methods

Certification of completion