React - Build A Complete E-Commerce Application Step By Step

Learn React.js from scratch and build a Complete E-Commerce Front-end Application using JavaScript and JSX

What you'll learn

Learn React Fundamentals: SPA, JSX, Components, Hooks, State, Context, Effect, Props, etc.

Convert HTML and CSS Code into JSX Elements and React Components

Create a full E-Commerce Application using React, JavaScript and JSX

Perform CRUD Operations using an Open Source Backend Application (JSON Server)

Implement the Pagination, Search, Sort and Filter Functionalities to Read Data from a REST API

Implement Registration, Authentication and Role based Authorization using JWT

Form Validation: Client-side and Server-side Validation

Upload Images to the REST Server

Send HTTP Requests Using Fetch API: promise-based behavior and async/await calls

Routing using React Router: Create Routes and Protected Routes

Store and Access the Application Data on the Browser in the Local Storage

Add and Use Bootstrap Css, JS and Icons From the CDN

Requirements

Basic knowledge of HTML and JavaScript

Description

This course is for Beginners to React.js having some knowledge of HTML and JavaScript.In this course, I will show you how to build a complete front-end application using React. This application is also called a Single Page Application (SPA) because it contains a single HTML file that renders different views.We will use "JSON Server", which is a REST server, as our backend application. So we will only focus on creating the front-end application. We will perform CRUD (Create, Read, Update and Delete) operations on products by sending HTTP Requests to the backend application using the Fetch API. Then we will add Registration, Authentication and Role-based Authorization using JWT (JSON Web Token).In this course, you will learn:- How to create a React Application using JavaScript, JSX and Bootstrap- How to create React Components and how to Export/Import them- How to pass parameters (props) to React components- How to use useful React functions, called Hooks: useState, useEffect and useContext- How to use states within function components- How to create two types of forms: controlled and uncontrolled forms- How to validate forms using client-side validation and server-side validation- How to Implement Registration, Authentication and Role-based Authorization using JWT- How to perform CRUD operations (Create, Read, Update and Delete) on products using different HTTP requests and the Fetch API- How to use pagination (Split data on multiple pages), search, sort and filter functionalities- How to upload images to the server- How to store and access the application data locally on the browser using the local storage

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Source Code

Section 2: React Basics

Lecture 3 Create React Application

Lecture 4 Function Components and Class Components

Lecture 5 Include Bootstrap CSS, JS and Icons

Lecture 6 Convert HTML to JSX

Lecture 7 Default Export-Import

Lecture 8 Named Export-Import

Lecture 9 Use CSS with JSX

Lecture 10 JavaScript Arrays

Lecture 11 JavaScript Objects

Lecture 12 Component parameters - props

Lecture 13 List elements

Lecture 14 Component State and useState Hook

Lecture 15 Controlled Components

Lecture 16 Delete Components from a List

Lecture 17 Uncontrolled Forms

Lecture 18 Controlled Forms

Lecture 19 Store Data in the Browser - Local Storage

Lecture 20 React Hooks - useEffect Function

Lecture 21 React Hooks - useContext Function

Section 3: E-Commerce Application Setup

Lecture 22 React App and Bootstrap Setup

Lecture 23 Application layout - Navbar and Footer

Lecture 24 React Router - Add BrowserRouter

Lecture 25 React Router - Add Links

Section 4: Perform CRUD Operations on Products

Lecture 26 Introduction

Lecture 27 Setup Backend Server

Lecture 28 Read Products - Create the ProductList Component

Lecture 29 Read Products - Fill the Product Table

Lecture 30 Configure Backend Server for File Upload and Data Validation

Lecture 31 Create Products - Create the Form

Lecture 32 Create Products - Submit the Form

Lecture 33 Create Products - Show Server-Side Validation Errors

Lecture 34 Update Products - Create the EditProduct Component

Lecture 35 Update Products - Fill and Submit the Form

Lecture 36 Delete Products

Lecture 37 Read Products - Add Pagination

Lecture 38 Read Products - Add Search Functionality

Lecture 39 Read Products - Add Sort Functionality

Lecture 40 Read Products - Add Sort Arrow

Lecture 41 Home Component - Add Hero Section

Lecture 42 Home Component - Show Products

Lecture 43 Home Component - Add Pagination

Lecture 44 Home Component - Add Filter Functionality

Lecture 45 Home Component - Add Sort Functionality

Lecture 46 ProductDetails Component - Create the Layout

Lecture 47 ProductDetails Component - Read and Render Product Details

Section 5: Authentication and Authorization

Lecture 48 Introduction

Lecture 49 Setup JWT Authentication Server

Lecture 50 Create Register and Login Routes

Lecture 51 Create the Register Component

Lecture 52 Create the Login Component

Lecture 53 Store User Credentials in the Application Memory

Lecture 54 Store User Credentials in the Browser (Local Storage)

Lecture 55 User Logout

Lecture 56 Update the Navbar based on user Authentication and Role

Lecture 57 Route Protection Components

Lecture 58 Configure JWT Authentication Server - Enable Authorization

Lecture 59 Send JWT to Create and Update Products

Lecture 60 Send JWT in Delete Requests

Lecture 61 UserProfile - Route Setup

Lecture 62 UserProfile - Create Skeleton

Lecture 63 UserProfile - Show Profile Details

Lecture 64 UserProfile - Update Profile

Lecture 65 UserProfile - Update Password

Lecture 66 UserList - Create the UserList Component

Lecture 67 UserList - Show the List of Users

Lecture 68 UserList - Add Pagination

Lecture 69 UserDetails - Create the UserDetails Component

Lecture 70 UserDetails - Show the User Details

This course is for anyone who wants to learn React by creating a complete e-commerce application.