Build a Custom E-Commerce Site in React + JavaScript Basics

Focused View

YouAccel Training

6:52:00

15 View

1. Introduction to the Document Object Model (DOM)

1. DOM Introduction.mp4

03:12

2. DOM Manipulation.mp4

01:17

2. JavaScript Overview

1. Introduction.mp4

05:41

2. JS Placement.mp4

02:09

3. External JavaScript.mp4

01:50

4. JavaScript Output.mp4

01:41

5. JavaScript InnerHTML.mp4

01:03

6. JavaScript Commenting.mp4

01:48

7. JavaScript Constants.mp4

01:34

8. JavaScript Variables Introduction.mp4

04:31

9. JavaScript Assignment Operator.mp4

01:05

10. JavaScript Arithmetic Operations.mp4

03:43

11. JavaScript Arithmetic Operations Continued.mp4

03:45

12. JavaScript Operator Precedence.mp4

00:58

13. JavaScript Data Types.mp4

01:13

14. JavaScript Objects.mp4

01:42

15. JavaScript Object Output.mp4

01:22

16. JavaScript Strings.mp4

03:11

17. JavaScript String Length.mp4

00:41

18. JavaScript Special Characters.mp4

01:18

19. JavaScript Random Numbers.mp4

00:54

20. JavaScript Min and Max Function.mp4

01:05

21. JavaScript Math Round Function.mp4

01:38

22. JavaScript Arrays.mp4

02:14

23. JavaScript Array Attributes.mp4

01:28

24. JavaScript Arrays - Pop - Push - Shift - Unshift.mp4

02:04

25. JavaScript Changing and Deleting Elements.mp4

01:58

26. JavaScript Splicing an Array.mp4

01:35

27. JavaScript Sorting an Array.mp4

01:24

28. JavaScript Joining Arrays.mp4

01:04

29. JavaScript Conditional Statements.mp4

06:17

30. JavaScript Comparisons.mp4

02:26

31. JavaScript Booleans.mp4

01:21

32. JavaScript For Loops.mp4

02:40

33. JavaScript For-In Loop.mp4

00:46

34. JavaScript While Loops.mp4

02:08

35. JavaScript Do-While Loop.mp4

01:58

36. JavaScript Break and Continue.mp4

01:14

37. JavaScript Functions.mp4

01:53

38. JavaScript Events.mp4

01:18

39. JavaScript Project 1 - BG Color Changer.mp4

02:13

40. JavaScript Project 2 - Photo Gallery.mp4

02:24

41. JavaScript Project 2 - Completion.mp4

02:38

3. Intro to React

1. Skills Required.mp4

00:56

2. What is React.mp4

04:42

3. Hello React.mp4

06:23

4. Tools Needed.mp4

01:02

5. Code Pen.mp4

04:40

6. Intro to JSX.mp4

04:05

4. React Project - Build an E-Commerce Store

1. Project Overview.mp4

01:53

2. Scaffolding the Project.mp4

03:57

3. Intro to JSON Server.mp4

04:00

4. Fetch API.mp4

10:33

5. Styling the Store.mp4

04:07

6. Rendering the Categories.mp4

10:48

7. Binding the Products.mp4

08:05

8. Refactor the Fetch API call.mp4

08:49

9. Dealing with errors in Fetch API.mp4

08:25

10. Tidy the Fetch API call.mp4

02:21

11. Styling the Product List.mp4

13:00

12. Installing React Router.mp4

06:07

13. Fixing the Key Warning.mp4

03:56

14. React Router - Detail Page.mp4

12:24

15. Fetch API - Get Product By Id.mp4

08:55

16. Product Description.mp4

05:25

17. Intro to Styled Components.mp4

13:00

18. Styled Components - Product Description.mp4

03:07

19. Dangerously Set HTML (yeah really).mp4

04:07

20. Refactor the Categories.mp4

08:23

21. Refactor the Layout.mp4

05:25

22. Refactor the Home Page.mp4

05:50

23. Intro to Context in React.mp4

08:53

24. UseContext Hook and UseReducer Hook in React.mp4

17:59

25. Basket Layout.mp4

11:11

26. Implementing the Basket.mp4

06:22

27. Implementing Basket Icons.mp4

04:36

28. Implementing Basket Total.mp4

07:50

29. Finishing the Checkout.mp4

01:07

30. Checkout - Fixing the State.mp4

12:31

31. Implementing the Order Confirmation.mp4

06:43

32. Intro to Local Storage.mp4

13:07

33. Implementing Search Results.mp4

14:23

34. Better Searching with Debouncing.mp4

07:36

35. Validating Forms in React - Part 1.mp4

08:47

36. Validating Forms in React - Part 2.mp4

09:15

37. Validating Forms in React - Part 3.mp4

08:11

38. Validating Forms in React - Part 4.mp4

07:55

39. Project Summary.mp4

02:45

Description

Build a Fully Customized E-Commerce Site with Product Categories, Shopping Cart, and Checkout Page in React.

What You'll Learn?

Introduction to the Document Object Model (DOM)
The Foundations of JavaScript
JavaScript Arithmetic Operations
Working with Arrays, Functions, and Loops in JavaScript
JavaScript Variables, Events, and Objects
JavaScript Hands-On - Build a Photo Gallery and Background Color Changer
Foundations of React
How to Scaffold an Existing React Project
Introduction to JSON Server
Styling an E-Commerce Store in React and Building out the Shop Categories
Introduction to Fetch API and React Router
The concept of "Context" in React
Building a Search Feature in React
Validating Forms in React

Who is this for?

Students interested in learning the Foundations of JavaScript

Students interested in learning the Foundations of ReactJS Library

Students interested in Building Interactive UI Components using React

Students interested in learning how to build a fully customized E-Commerce Site in React

What You Need to Know?

Basic Knowledge of HTML and CSS

Basic Computer Skills

More details

Description
This course takes you step-by-step through the process of building a fully functional calculator in React. React, also known as React JS, is a powerful JavaScript library used for building custom, interactive user interfaces using UI components. Some of the most well known examples of organizations using React for their front-end include Netflix, Facebook, and Airbnb. Developed and maintained by Meta along with a community of independent developers, React remains free and open-source. React is a component based library built entirely on JavaScript, which makes it perfect for designing complex UIâ€™s. With React, developers can build encapsulated components that efficiently manage their own state and render UI updates specifically when data changes. For example, think of the automated content refresh feature you see on a twitter feed, or facebook like button. Here the state of the UI component changes on the page, without having to manually refresh when the data is updated. This is just one small, yet powerful feature of React.

Through a complete hands-on project, this course will teach you all the fundamental principles of React that you must know to become a proficient React developer. We start right from the basics, including the tools needed to get started. From there we dive into JSX, functional components, props, callbacks, and various OnClick events. By this stage, the calculator will have a complete visual display, coupled with functional arithmetic operations. Students then move on to passing parameters in Callback functions, using the React State Hook, and debugging.

In addition to the hands-on React module, we also offer a comprehensive overview of JavaScript for those who need a refresher. Here we start with introducing students to the document object model (DOM) which defines the logical structure of HTML documents. From there we dive into JavaScript to demonstrate various methods in which DOM elements can be manipulated to add interactivity to static components. We start right from the basics, which includes JavaScript placement, and data output. From there we move on to variable declaration, arithmetic operations, operator precedence, data types, and objects. Once the foundations are covered, we move on to more complex operations using Arrays, Conditional Statements, JavaScript comparison operators, booleans and loops. Here students will learn to unleash the true power of JavaScript to render different outcomes based on user interaction. We will explore the use of functions to efficiently handle repetitive tasks and JavaScript events to handle output based on actions and occurrences. The section will conclude with a hands-on project where students will implement their knowledge to build a web based photo gallery and background color changer.

Who this course is for:
Students interested in learning the Foundations of JavaScript
Students interested in learning the Foundations of ReactJS Library
Students interested in Building Interactive UI Components using React
Students interested in learning how to build a fully customized E-Commerce Site in React

User Reviews

Rating

average 0

Total votes0

Focused display

YouAccel was founded in 2015 with the mission to be one of the most interactive e-learning platforms on the web. YouAccel is now a leading provider in online training, serving a global audience of over 2 million passionate learners. This includes 6+ Million enrollments, across 50 best-selling courses. YouAccel offers courses across numerous industries from Programming & IT to Business, Marketing, Design, and Productivity.The e-learning experience provided by YouAccel is Dynamic. Each course is streamed in High Definition with corresponding assignments, quizzes, and exams that are delivered and graded electronically. All YouAccel courses are taught by certified educators that have numerous years of work experience in the field for which they provide instruction. The courses can be taken at one's own pace and are offered at several levels including beginner, intermediate and advanced. Taking the experience to a new personalized level, free support is available to all students who register for a course. All courses come with a certificate of completion and no age restrictions apply.YouAccel strongly believes that the future of online learning will be through open community-based initiatives, where everyone’s voice is equally heard. This is exactly what YouAccel strives to achieve – an inclusive environment, where students have control over the direction of course content. YouAccel courses are continuously updated based on feedback from students and engaged community members. YouAccel instructors encourage communication at every step of the learning process. To date, hundreds of contributors around the globe have invested both time and resources, to ensure YouAccel courses meet the highest level of quality. YouAccel instructors are world renowned and many of them have been featured in mainstream publications such as Forbes, Mashable, Entrepreneur, and PBS among 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.