React - Build a Complete E-Commerce Application Step by Step

Focused View

Coding Courses

7:52:38

8 View

1. Introduction

1. Introduction.mp4

04:53

2.1 source code.zip

2. Source Code.html

2. React Basics

1. Create React Application.mp4

04:54

2. Function Components and Class Components.mp4

03:26

3. Include Bootstrap CSS, JS and Icons.mp4

01:14

4. Convert HTML to JSX.mp4

04:17

5. Default Export-Import.mp4

03:19

6. Named Export-Import.mp4

02:03

7. Use CSS with JSX.mp4

06:53

8. JavaScript Arrays.mp4

16:33

9. JavaScript Objects.mp4

07:53

10. Component parameters - props.mp4

10:21

11. List elements.mp4

06:50

12. Component State and useState Hook.mp4

09:01

13. Controlled Components.mp4

04:43

14. Delete Components from a List.mp4

04:47

15. Uncontrolled Forms.mp4

13:52

16. Controlled Forms.mp4

07:43

17. Store Data in the Browser - Local Storage.mp4

11:22

18. React Hooks - useEffect Function.mp4

03:42

19. React Hooks - useContext Function.mp4

10:45

3. E-Commerce Application Setup

1. React App and Bootstrap Setup.mp4

04:16

2. Application layout - Navbar and Footer.mp4

08:29

3. React Router - Add BrowserRouter.mp4

04:10

4. React Router - Add Links.mp4

03:34

4. Perform CRUD Operations on Products

1. Introduction.mp4

03:33

2. Setup Backend Server.mp4

06:33

3. Read Products - Create the ProductList Component.mp4

04:26

4. Read Products - Fill the Product Table.mp4

11:20

5. Configure Backend Server for File Upload and Data Validation.mp4

08:15

6. Create Products - Create the Form.mp4

06:36

7. Create Products - Submit the Form.mp4

10:40

8. Create Products - Show Server-Side Validation Errors.mp4

04:02

9. Update Products - Create the EditProduct Component.mp4

07:25

10. Update Products - Fill and Submit the Form.mp4

08:24

11. Delete Products.mp4

03:10

12. Read Products - Add Pagination.mp4

13:06

13. Read Products - Add Search Functionality.mp4

05:24

14. Read Products - Add Sort Functionality.mp4

09:42

15. Read Products - Add Sort Arrow.mp4

05:24

16. Home Component - Add Hero Section.mp4

06:57

17. Home Component - Show Products.mp4

08:10

18. Home Component - Add Pagination.mp4

02:56

19. Home Component - Add Filter Functionality.mp4

06:26

20. Home Component - Add Sort Functionality.mp4

06:26

21. ProductDetails Component - Create the Layout.mp4

05:33

22. ProductDetails Component - Read and Render Product Details.mp4

06:44

5. Authentication and Authorization

1. Introduction.mp4

02:53

2. Setup JWT Authentication Server.mp4

03:50

3. Create Register and Login Routes.mp4

05:02

4. Create the Register Component.mp4

15:39

5. Create the Login Component.mp4

10:18

6. Store User Credentials in the Application Memory.mp4

08:37

7. Store User Credentials in the Browser (Local Storage).mp4

04:04

8. User Logout.mp4

02:32

9. Update the Navbar based on user Authentication and Role.mp4

04:42

10. Route Protection Components.mp4

07:52

11. Configure JWT Authentication Server - Enable Authorization.mp4

04:32

12. Send JWT to Create and Update Products.mp4

07:55

13. Send JWT in Delete Requests.mp4

04:41

14. UserProfile - Route Setup.mp4

03:19

15. UserProfile - Create Skeleton.mp4

09:31

16. UserProfile - Show Profile Details.mp4

04:46

17. UserProfile - Update Profile.mp4

14:27

18. UserProfile - Update Password.mp4

12:09

19. UserList - Create the UserList Component.mp4

09:38

20. UserList - Show the List of Users.mp4

06:04

21. UserList - Add Pagination.mp4

05:30

22. UserDetails - Create the UserDetails Component.mp4

08:35

23. UserDetails - Show the User Details.mp4

05:50

Description

Learn React.js from scratch and build a Complete E-Commerce Front-end Application using React JS, 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

Who is this for?

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

What You Need to Know?

Basic knowledge of HTML and JavaScript

More details

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
Who this course is for:
This course is for anyone who wants to learn React by creating a complete e-commerce application.

User Reviews

Rating

average 0

Total votes0

Focused display

I have more than 15 years of experience as software developer and more than 7 years of experience as university professor in computer science. I master many programming languages, frameworks and technologies. My main topic covers C#, ASP.NET, PHP, Laravel, Java, Android, JavaFX, C/C++, Computer Security and Wi-Fi Networks. I love programming, teaching and sharing my knowledge with others.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.