React Tutorials - Beginner to Pro - A Complete React Tutorial Series

React Tutorials - Beginner to Pro - A Complete React Tutorial Series


Basic Concept & Installation

Day 01 - What is React and Why We’ll Learn It with all of the questions answer

Day 02 - Install React Project with CLI & Run Our First React App

Day 03 - Setting Up Editor Environment & Necessary Extensions


JavaScript Necessary  Basics

Day 04 - ES6 Introduction - Var Let/Const 

Day 05 - ES6 Introduction - Arrow Function

Day 06 - ES6 Introduction - Class, Object, Inheritance


React Application Intro

Day 07 - Project Structure and Basic Demonstration

Day 08 - React Component - What is Component & Why

Day 09 - React Component - Stateful Class Base Component

Day 10 - React Component - Stateless Functional Component

Day 11 - state in Class Base Component, Display Dynamic Data in JSX

Day 12 - Display List Data in React Application using map()

Day 13 - Conditional Logic & Function Separator in React App with JSX

Day 14 - Update State Data using setState() in Class Base Component

Day 15 - props,  state vs props - Pass props to one component to another

Day 16 - Distruring props, state and any other variable in React

Day 17 - Styling React Element, Add style also from other File

Day 18 - Form Handling (Contact Form) in React Part 1

Day 19 - Form Handling (Contact Form) in React Part 2 (Validation and More)

Day 20 - Project 1: Todo Application using React


Props Management

Day 21 - Pass Data From Parent to Child and Change Data from Child to Parent

Day 22 - Convert Todo Application to a Real-World Application Example

React Lifecycle and Hook API

Day 23 - React Lifecycle Hook of Class Base Component

Day 24 - React Hook in Functional Component - useState()

Day 25 - React Hook in Functional Component - useEffect()

Day 26 - Develop a Custom Hook in React


React API Handling - axios

Day 26 - Employee List Bind Using API with axios with Search Implementation

Day 27 - Create New Employee with API

Day 28 - Edit and Delete Employee with API -                                                                 

Project 2: Simple Employee Management Application with API 


React Router - Multi Page and Routing

Day 29 - React Router - Create Router in React

Day 30 - Route Passing Parameters and Props

Day 31 - Route Query String and Nested Routing

Day 32 - Complete Employee Management Application with React Router - Part 1

Day 33 - Complete Employee Management Application with React Router - Part 2


React - Mastering Any Template with Real World Website

Day 34 - Mastering An Application with React

Day 35 - Complete Website Mockup with React JS with Multiple Page

Project 3: Simple Website with React, React Router, Axios and All


React - Context API - Shared Data among Components without props

Day 36 - React Context API Part 1

Day 37 - React Context API Part 2

React - Higher Order Component

Day 38 - Higher Order Component Part 1

Day 39 - Higher Order Component Part 2


React - Redux For Managing State

Day 40 - Redux Concept in React - Introduce Redux Pattern

Day 41 - React Redux - Create Action, Reducer, Dispatch in React

Day 42 - React Redux - mapStateToProps()

Day 43 - React Redux - mapDispatchToProps()

Day 44 - useSelector, useDispatch() hook in React-Redux - Replacing mapStateToProps() and mapDispatchToProps()

Day 45 - React Redux - Make Combine Reducer

Create Employee Using Redux

List of Employees Using Redux, Search Employees Using Redux

Edit Employees Using Redux

Delete Employees Using Redux

Project 4: Finishing Up Employee Management Project with Management of React-Redux


Project 5: React Ecommerce Application Project (React, Redux, Next JS, Thunk, Hook API, Context API, all)

Next JS Introduction and Installation For Ecommerce Project

Mastering Ecommerce Template - Part 1 - React Bootstrap Setup

Mastering Ecommerce Template - Part 2

Redux Setup in Ecommerce Project

Product List Display, with Component Architecture

Single Product Display

Product Search Simple

Brand, Category, Price Wise Product Filtering 

Add to Cart System

Cart List Management

User Authentication - Login

User Authentication - Register

User Authentication - Forget Password

User Favorite Product with Protected Route

Checkout Order  with Protected Route

Payment Via Paypal/Stripe

User Order List

User Order Details

User Profile Management

Finishing Up and Deploy Application to Server




#4 - let vs const vs var - Clear the ES6 concepts and makes simpler path to learn React
Higher Order Component in React - In depth discussion about React HOC