 Learning Objective: Understand how react makes things perform, learn how to set up, run and debug a react app.
 Topics:
 What is React?
 Why React?
 React version history
 Just React - Hello World
 Using create-react-app
 Anatomy of react project
 Running the app
 Debugging first react app
 Hands-on: Install create-react-app and create a new react project.

L earning Objective: Understand the significance of JSX and know its syntax and features.
 Topics:
 Working with React. createElement
 Expressions
 Using logical operators
 Specifying attributes
 Specifying children
 Fragments
 Hands-on: Create JSX expressions with different javascript expression, apply css via className and styles, use conditionals.

 Learning Objective: Understand the significance of component architecture and learn how to decompose UI into components and compose them back to make UI.
 Topics:
 Significance of component architecture
 Types of components
 Functional
 Class based
 Pure
 Component Composition
 Hands-on: Create class based and functional components.

 Learning Objective: Learn how to manage state in class based react components and how to make communication between components using props.
 Topics:
 What is state and it significance
 Read state and set state
 Passing data to component using props
 Validating props using propTypes
 Supplying default values to props using defaultProps
 Hands-on: Create a stateful component and stateless component.Pass data from parent component to child component using props. Implement child to parent communication using callbacks.

 Learning Objective: Learn how to render lists and use key prop.
 Topics:
 Using react key prop
 Using map function to iterate on arrays to generate elements
 Hands-on: Create component which renders lists iteratively using map function of array.

 Learning Objective: Learn about React's synthetic event system and its working.
 Topics:
 Understanding React event system
 Understanding Synthetic event
 Passing arguments to event handlers
 Hands-on: Handle different synthetic events.

 Learning Objective: Understand the significance of lifecycle methods and application in real time use cases. Also learn how to handle errors declaratively.
 Topics:
 Understand the lifecycle methods
 Handle errors using error boundaries
 Hands-on: Create a stateful component and implement lifecycle methods. Implement try catch mechanism using error boundaries.

 Learning Objective: Understand how to work with global state using context API.
 Topics:
 What is context
 When to use context
 Create Context
 Context.Provider
 Context.Consumer
 Reading context in class
 Hands-on: Create components that get applied with multiple themed styles using context to store theme info globally and apply to all components

 Learning Objective: Understand the need of code splitting and implement the same on a component basis.
 Topics:
 What is code splitting
 Why do you need code splitting
 React.lazy
 Suspense
 Route-based code splitting
 Hands-on: Create react application that implements code splitting and lazy load components using React.lazy and suspense features.

 Learning Objective: Understand the need for hooks and implement hooks to access state and effects hook in functional components.
 Topics:
 What are hooks
 Why do you need hooks
 Different types of hooks
 Using state and effect hooks
 Rules of hooks
 Hands-on: Create a functional component that uses the ability of state and life cycle features

 Learning Objective: Understand the significance of routing, configure routing for SPA.
 Topics:
 Setting up react router
 Understand 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 Redirect Component
 Using Prompt component to get consent of user for  Navigation
 Path less Route to handle failed matches
 Hands-on: Install and setup router, configure routing rules, implement declarative and imperative navigation.

 Learning Objective: Understand how to manage state in just redux in plain vanilla JS app.
 Topics:
 What is redux
 Why redux
 Redux principles
 Install and setup redux
 Creating actions, reducer and store
 Hands-on: Create actions, reducer and store. Dispatch actions and subscribe to store changes.

 Learning Objective: Understand the challenges of mutability and how immutable.js helps over the mutability challenges.
 Topics:
 What is Immutable.js?
 Immutable collections
 Lists
 Maps
 Sets
 Hands-on: Create immutable List, map and set. Perform CRUD operations.

 Learning Objective: Understand how to integrate redux into react application.
 Topics:
 What is React Redux
 Why React Redux
 Install and setup
 Presentational vs Container components
 Understand high order component
 Understanding mapStateToProps and mapDispatchtToProps usage
 Hands-on: Install and setup react redux. Configure Provider component as top level component. Migrate react stateful component to connected component.

 Learning Objective: Understand the significance of middleware and learn how saga middleware works.
 Topics:
 Why redux middleware
 Available redux middleware choices
 What is redux saga
 Install and setup redux saga
 Working with Saga helpers
 Sagas vs promises
 Hands-on: Install and setup logger and saga middleware. Develop sagas use different side effects. Code sagas to fetch data from remote API using fetch/axios.

 Learning Objective: Understand significance of UI testing and learn how to unit test components, reducers using jest and enzyme.
 Topics:
 Understand the significance of unit testing
 Understand unit testing jargon and tools
 Unit testing react components with Jest
 Unit testing react components with enzyme
 Hands-on: Understand jest configuration. Install and setup enzyme. Write unit test to components and reducers.

 Learning Objective: Understand the significance of isomorphic react and setup SSR.
 Topics:
 What is server-side rendering (SSR)?
 Why SSR
 Working with renderToString and renderToStaticMarkup methods
Hands-on: Extend the react boilerplate to enable SSR. Develop express JS app to serve SSR powered react app.

2 Mini Project