What is React and why React

Declarative vs Imperative

Component Architecture

One way data flow

React installation

React Basics

Functional Component

Class Component

Analyzing a Standard React Project

Introduction to JSX

Props with Functional Component

Props with Class Component

Constructor

State in React

Destructuring Props and State

Events and Event Handling

Binding Event Handlers

Passing Methods as Props

Conditional Rendering

List Rendering

List and Keys

CSS with React Inline Style

CSS Stylesheets in React

CSS Modules

How to Add and Use Bootstrap

Introduction to Hooks

useState Hook

useState Hook with Object

useState Hook with Array

Using State with Class and Functional Component

useEffect Hook

Conditionally Run useEffect

useContext Hook

React Forms and Form Handling

Controlled Component in React Form

Controlled Component with Function Component and useState

Handling Multiple Inputs in Form

Handling Multiple Inputs in Functional Component

Checkbox, Dropdown Menu, and Text Area in React Form

Multiple Checkbox in React Form

Refs in React

Uncontrolled Component

Callback Refs

useRef Hook and Uncontrolled Component

useRef Hook

React Router Introduction

Installing React Router

Configuring Routes

Link Component in React Router

Active Links using React Router

Navigating Programmatically

Page not found in React Router

Nested Routes in React Router

Index Route in React Router

Dynamic Routes in React Router

useParams in React Router

useSearchParams in React Router

Relative and Absolute Path

Lazy Loading

Form Validation

Introduction to Formik and Yup

Working with formik library

Working with Formik and Yup Library

More validations using Formik and Yup

Creating form with Formik components

React Bootstrap Library

Container and Grid system with React-Bootstrap

2 simple ways to add images in React App

Creating cards using React Bootstrap

Create navbar using React-Bootstrap

Creating Carousel using React-Bootstrap

useReducer Hook

Fetch API

Introduction to React AXIOS

How to setup Axios with React

How to make a GET request in Axios

How to make a POST request in Axios

Create a fake API and insert data in it

Read operation in CRUD app

Delete operation in CRUD app

Update operation in React CRUD App

Introduction to React Redux

Getting started with React Redux

Three core concepts of Redux

Three principles of Redux

Actions

Reducers

Store

Cakes and ice-creams

Multiple Reducers

Combine Reducers

Middleware

Async actions

Redux thunk

Cake shop application

Actions for cake shop app

Reducer for cake shop app

Store for cake shop app

Connect

React Redux with Hooks

useSelector Hook

useDispatch Hook

Action and reducers for ice cream

Logger middleware

Action payload

mapStateToProps

mapDispatchToProps

API

Authentication and JSON

Weather app

Introduction to project

Setting up project

Adding the header component

Adding the Cart Button component

Adding Meals Component

Adding individual mealitem and displaying them

Adding Form

Working on Cart component

Adding a Modal via React Portal

Managing Cart and Modal State

Adding a cart context

Using the context

Adding a cart reducer

Working with Refs and Forward Refs

Outputting Cart items

Working on a more complex reducer logic

Making items removable

Project completed