Build a Custom E-Commerce Site in React + JavaScript Basics
Build a Custom E-Commerce Site in React + JavaScript Basics, available at $49.99, has an average rating of 4.23, with 88 lectures, based on 274 reviews, and has 53930 subscribers.
You will learn about 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 This course is ideal for individuals who are Students interested in learning the Foundations of JavaScript or Students interested in learning the Foundations of ReactJS Library or Students interested in Building Interactive UI Components using React or Students interested in learning how to build a fully customized E-Commerce Site in React It is particularly useful for Students interested in learning the Foundations of JavaScript or Students interested in learning the Foundations of ReactJS Library or Students interested in Building Interactive UI Components using React or Students interested in learning how to build a fully customized E-Commerce Site in React.
Enroll now: Build a Custom E-Commerce Site in React + JavaScript Basics
Summary
Title: Build a Custom E-Commerce Site in React + JavaScript Basics
Price: $49.99
Average Rating: 4.23
Number of Lectures: 88
Number of Published Lectures: 88
Number of Curriculum Items: 88
Number of Published Curriculum Objects: 88
Original Price: $49.99
Quality Status: approved
Status: Live
What You Will 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 Should Attend
- 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
Target Audiences
- 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
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.
Course Curriculum
Chapter 1: Introduction to the Document Object Model (DOM)
Lecture 1: DOM Introduction
Lecture 2: DOM Manipulation
Chapter 2: JavaScript Overview
Lecture 1: Introduction
Lecture 2: JS Placement
Lecture 3: External JavaScript
Lecture 4: JavaScript Output
Lecture 5: JavaScript InnerHTML
Lecture 6: JavaScript Commenting
Lecture 7: JavaScript Constants
Lecture 8: JavaScript Variables Introduction
Lecture 9: JavaScript Assignment Operator
Lecture 10: JavaScript Arithmetic Operations
Lecture 11: JavaScript Arithmetic Operations Continued
Lecture 12: JavaScript Operator Precedence
Lecture 13: JavaScript Data Types
Lecture 14: JavaScript Objects
Lecture 15: JavaScript Object Output
Lecture 16: JavaScript Strings
Lecture 17: JavaScript String Length
Lecture 18: JavaScript Special Characters
Lecture 19: JavaScript Random Numbers
Lecture 20: JavaScript Min and Max Function
Lecture 21: JavaScript Math Round Function
Lecture 22: JavaScript Arrays
Lecture 23: JavaScript Array Attributes
Lecture 24: JavaScript Arrays – Pop – Push – Shift – Unshift
Lecture 25: JavaScript Changing and Deleting Elements
Lecture 26: JavaScript Splicing an Array
Lecture 27: JavaScript Sorting an Array
Lecture 28: JavaScript Joining Arrays
Lecture 29: JavaScript Conditional Statements
Lecture 30: JavaScript Comparisons
Lecture 31: JavaScript Booleans
Lecture 32: JavaScript For Loops
Lecture 33: JavaScript For-In Loop
Lecture 34: JavaScript While Loops
Lecture 35: JavaScript Do-While Loop
Lecture 36: JavaScript Break and Continue
Lecture 37: JavaScript Functions
Lecture 38: JavaScript Events
Lecture 39: JavaScript Project 1 – BG Color Changer
Lecture 40: JavaScript Project 2 – Photo Gallery
Lecture 41: JavaScript Project 2 – Completion
Chapter 3: Intro to React
Lecture 1: Skills Required
Lecture 2: What is React?
Lecture 3: Hello React
Lecture 4: Tools Needed
Lecture 5: Code Pen
Lecture 6: Intro to JSX
Chapter 4: React Project – Build an E-Commerce Store
Lecture 1: Project Overview
Lecture 2: Scaffolding the Project
Lecture 3: Intro to JSON Server
Lecture 4: Fetch API
Lecture 5: Styling the Store
Lecture 6: Rendering the Categories
Lecture 7: Binding the Products
Lecture 8: Refactor the Fetch API call
Lecture 9: Dealing with errors in Fetch API
Lecture 10: Tidy the Fetch API call
Lecture 11: Styling the Product List
Lecture 12: Installing React Router
Lecture 13: Fixing the Key Warning
Lecture 14: React Router – Detail Page
Lecture 15: Fetch API – Get Product By Id
Lecture 16: Product Description
Lecture 17: Intro to Styled Components
Lecture 18: Styled Components – Product Description
Lecture 19: Dangerously Set HTML (yeah really)
Lecture 20: Refactor the Categories
Lecture 21: Refactor the Layout
Lecture 22: Refactor the Home Page
Lecture 23: Intro to Context in React
Lecture 24: UseContext Hook and UseReducer Hook in React
Lecture 25: Basket Layout
Lecture 26: Implementing the Basket
Lecture 27: Implementing Basket Icons
Lecture 28: Implementing Basket Total
Lecture 29: Finishing the Checkout
Lecture 30: Checkout – Fixing the State
Lecture 31: Implementing the Order Confirmation
Lecture 32: Intro to Local Storage
Lecture 33: Implementing Search Results
Lecture 34: Better Searching with Debouncing
Lecture 35: Validating Forms in React – Part 1
Lecture 36: Validating Forms in React – Part 2
Lecture 37: Validating Forms in React – Part 3
Lecture 38: Validating Forms in React – Part 4
Lecture 39: Project Summary
Instructors
-
YouAccel Training
8+ Million Enrollments, 70k+ Reviews. Register Today.
Rating Distribution
- 1 stars: 9 votes
- 2 stars: 8 votes
- 3 stars: 35 votes
- 4 stars: 91 votes
- 5 stars: 131 votes
Frequently Asked Questions
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!
You may also like
- Top 10 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024
- Top 10 Gardening Courses to Learn in November 2024