Learn React 16 and Redux by building real world Application

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Installing Tools

Lecture 2: VS Code Setup

Lecture 3: How to get source code for each lecture

Lecture 4: Module Introduction

Lecture 5: Create React App using create-react-app cli

Lecture 6: Creating Elements in React

Lecture 7: Creating Nested Elements in React

Lecture 8: How React uses React Elements to Create Virtual DOM

Lecture 9: What is DOM

Lecture 10: What is Virtual DOM

Lecture 11: What are Components in React

Lecture 12: Creating Components in React

Lecture 13: Adding Props Validations in React Component

Lecture 14: Create Nested Components in React

Lecture 15: Create State in React Component

Lecture 16: Update State using events and custom methods

Lecture 17: Iterate Array and render the components

Lecture 18: Pass function as props from Parent to Child Component

Lecture 19: Convert React Components to JSX

Lecture 20: Module Summary

Chapter 2: Data Flow in React Components

Lecture 1: Module Introduction

Lecture 2: State in React Component

Lecture 3: Shallow Merging with setState

Lecture 4: Use props, PropTypes and defaultProps in React Component

Lecture 5: Communicate with Parent and Child Component

Lecture 6: Module Summary

Chapter 3: Component LifeCycle Methods in React

Lecture 1: What are LifeCycle Methods in React Component

Lecture 2: Types and Phases of LifeCycle Methods

Lecture 3: LifeCycle Mounting Methods in Action

Lecture 4: LifeCycle Updating Methods in Action

Lecture 5: Error Handling with componentDidCatch

Chapter 4: Hacker news App – Building Components

Lecture 1: Setup React Application

Lecture 2: Add Bootstrap to React Application

Lecture 3: Create Mock Restful API with Json-Server

Lecture 4: Send HTTP Request in React using axios

Lecture 5: Iterate Array and render the components

Lecture 6: Add Bootstrap Card to render List Items

Lecture 7: Creating Header Component

Lecture 8: Error Handling with Custom ErrorMessage Component

Lecture 9: Adding Loading Spinner

Chapter 5: React Context API

Lecture 1: Introduction to React Context API

Lecture 2: React Context API in Action

Lecture 3: Create Reducer to update the State in React Context

Lecture 4: Refactoring Context Code to Store

Lecture 5: Create new Action to Handle Errors

Chapter 6: Working with Forms in React

Lecture 1: What is controlled component

Lecture 2: Creating Controlled Component

Lecture 3: Adding State to the Form

Lecture 4: Save new record by sending Http Request

Lecture 5: Creating Reusable Component for Input FormControl

Lecture 6: Adding Form Validations in React and Bootstrap

Chapter 7: Add Routing in React using React-Router

Lecture 1: Add Link Navigations using React-Router

Lecture 2: Redirect after submitted new Record

Lecture 3: Creating NotFound Component

Lecture 4: Creating new Component to Edit the Record

Chapter 8: State Management with Redux

Lecture 1: What is Redux

Lecture 2: What are Actions

Lecture 3: What is Reducer

Lecture 4: What is a Redux Store

Lecture 5: Data Flow in Redux

Lecture 6: Setting up Redux into React application

Lecture 7: Connect React Component to Redux

Lecture 8: Delete the Record from the ReduxStore

Lecture 9: Add Record to ReduxStore

Chapter 9: Consuming Http Rest API using Async Action Creators

Lecture 1: Create Async Action to fetch records from the API

Lecture 2: Create Async Action to delete records from the API

Lecture 3: Create Async Action to add new Record

Lecture 4: Async Action to fetch single record

Lecture 5: Async Action to update the Link

Chapter 10: Integrating React and Redux with Firebase

Lecture 1: Creating Database on Firebase

Lecture 2: Fetching data from firebase collection in react component

Lecture 3: Delete document from firebase collection with react

Lecture 4: Add document in firebase collection with react

Lecture 5: Update document from firebase collection

Chapter 11: Firebase Authentication with React and Redux

Lecture 1: User Registration in React and Firebase

Lecture 2: Logout User

Lecture 3: User Login with Firebase and React

Lecture 4: Apply Authentication on private Routes

Lecture 5: Display error notification in React

Lecture 6: Deploy React Application to Firebase

Lecture 7: Challenge-Excercise

Chapter 12: Bonus: ES6 crash course

Lecture 1: var scoping

Lecture 2: understanding let

Lecture 3: Examples of const

Lecture 4: More use cases of let and const

Lecture 5: Introduction to Arrow functions

Lecture 6: Examples on Arrow functions

Lecture 7: Javascript call, bind, apply