Learn React by Building an eCommerce Site – Tutorial

Ecommerce Empire Academy

Learn React by building an e-Commerce application with Class Components.
You will learn component basics, rendering various items in components, parent-to-child component communication, lifecycle methods, forms, REST-API calls with JSON server and basic routing.

💻 Source code:

✏️ This course was developed by Mr. Harsha Vardhan. Check out his Youtube channel:

🔗 Complete React course with Hooks and Redux by Harsha Vardhan:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:03:45) What is React
⌨️ (0:12:52) Understanding Components
⌨️ (0:19:05) Create New React App
⌨️ (0:29:41) React React App From Scratch
⌨️ (0:44:19) Load Bootstrap
⌨️ (0:52:14) Create React Components
⌨️ (1:07:55) Add CSS Styles
⌨️ (1:11:10) Add Bootstrap NavBar
⌨️ (1:18:22) Fix Error – DOM property class
⌨️ (1:21:54) Nested Components
⌨️ (1:35:35) Render Expressions
⌨️ (1:41:31) Handle Events
⌨️ (1:47:11) Update Component State
⌨️ (1:51:58) Render List
⌨️ (2:00:13) Render Conditionally
⌨️ (2:05:53) Render Methods
⌨️ (2:13:46) Render Images
⌨️ (2:18:32) Render CSS Styles
⌨️ (2:25:19) Render CSS Classes
⌨️ (2:29:36) Pass Event Arguments
⌨️ (2:40:57) Render Child Components
⌨️ (2:49:58) Props
⌨️ (3:02:48) Props vs State
⌨️ (3:12:11) Props.Children
⌨️ (3:16:15) Handle Child Events
⌨️ (3:41:59) Delete Child Components
⌨️ (3:52:57) Life Cycle Phases of Components
⌨️ (3:57:22) Mounting Phase
⌨️ (4:07:45) Updating Phase
⌨️ (4:17:16) Unmounting Phase
⌨️ (4:22:10) Life Cycle of Child Components
⌨️ (4:30:02) Error Handling Phase
⌨️ (4:36:16) Basic Form
⌨️ (4:45:01) Two-Way Binding
⌨️ (4:56:36) Form Submit Button
⌨️ (5:04:51) HTTP Requests
⌨️ (5:18:09) Async and Await
⌨️ (5:25:28) Login Form with HTTP Request
⌨️ (5:34:00) Basic Routing
⌨️ (5:40:15) "404" Page
⌨️ (5:43:51) Switch
⌨️ (5:45:20) Link

🎉 Thanks to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 AppWrite

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

41 thoughts on “Learn React by Building an eCommerce Site – Tutorial”

    1. @Hiro absolutely. Please let me know if you find anywhere a e commerce website by functional components

    2. In complex enterprise environments you’ll use class based components.Of course, you have to be able to understand them, otherwise it’s easy to say “use functional components only”.

  1. Appreciate the efforts putting into 5+ hours of video, however functional components approach would have helped more in 2021. React just release their new docs mostly based on functional components.

    1. @FrancoTr20 thanks for that, so hooks are simply events listeners just in a fancier name right?
      Can you explain a bit what you mean by lifecycle methods aka how it works compared with the hooks

    2. @Jermaine Haughton oh great explanation although i thought that oop was more efficient way to do it or it just not suits for this kind of task? If so why is it the case and for which real life applications oop is more efficient and for which ones functional is usually more efficient? Thanks again

  2. Web University by Harsha Vardhan

    Hello, I am Harsha, Instructor for this React course. Thank you for your interest in this course.

    These are 3 reasons why should you learn ‘class components’ still.
    1) Many Enterprises still use class components-based react projects; they need people who understand, manage, update, support those projects.
    2) In many React interviews, they still ask few questions regarding class components – expecting you should have a background of ‘class components’ also – apart from functional components.
    3) For react beginners, it is very easy to understand many concepts like state, props etc., in class components.
    Once they are good enough in class components, yes – they should learn ‘functional components’ as mentioned in this course.

    Full React course with ‘functional components’ is available on Udemy. It also includes with Redux (along with Redux toolkit) and JavaScript lectures to brush-up your JavaScript knowledge; because many React interviewers ask questions from JavaScript too. Course link is in the description.

    1. Venkata Raghava Kurada

      @PETER PARK May be when a function keyword is used I think we are loosing the this pointer may be because of that.. I am not sure though Newbie here

  3. About the comments in this video, I think people just forgot that it’s almost 6 HOURS of free knowledge. If you don’t understand and prefer to comment BAD things because you simply think the content is out of date or because you know a better way to teach, etc… DO IT BETTER.

  4. I am having trouble understanding how the componentDidUpdate function works when prevState === this.state. In your example you identify that the previous state shows zeros across all shopping cart items when in fact it shows that the Samsung TV product has a quantity of 1. This is the same value that you identify in the this.state. Please check timestamp 4:13:40 for the prevState values and 4:13:51 for the this.state values

    1. Hello, I ran into the same issue. This is happening because on line 59 the handleIncrement function uses the spread operator (i.e. […this.state.products]) to create a copy of the state and store it in allProducts. Although the array containing the products is now unique, it is not a deep copy. This means the elements inside are still referencing the same objects from prevState. In other words, products in allProducts are the same products from prevState so updating one will update the other. To fix this you will need to perform a deep copy of the product. This can be done using the map function:

      const allProducts = products.map((p, i) => {
      if (p.id === prod.id) {
      return { …p, quantity: p.quantity + 1};
      }

      return p;
      });

      Essentially, when a product is incremented, compare the index with the index of the products in the array. When the index matches, make a unique copy and update the quantity.
      Finally set the state. If the console shows proper incrementing but UI doesnt your Products component may be resetting the value so check your Products component.

      Hope this helps.

  5. Venkata Raghava Kurada

    Thank you for this course, it helped me to understand the basic stuff.
    There is something important to mention, it seems the ReactRouterDom v6 is up and running so as part of it @5:39:57 the code should be replaced with


    } />
    } />
    }/>

    }/>
    }/>

  6. Note to other users:
    If you’re getting a compile error at the 50:30 mark, instead of npm install popper.js –save, do:
    npm install @popperjs/core –save
    Bootstrap 5 requires “Popper.js Core”, not Popper.js

    At the 1:47:30 mark if your badge isn’t showing up it’s because the documentation has different syntax, it’s “badge bg-secondary” not “badge badge-secondary”.

    If around the @3:18:20 mark you can’t figure out why the Buy Now button won’t align right, use className=”text-end me-2″. Aannddd if your badge isn’t showing up, remember for Bootstrap 5+ the syntax is “badge bg-light text-dark”.

    If at the @5:29:30 mark you can’t figure out why the template literals aren’t working, you have to wrap the URI string in BACKTICKS, not single quotes.

  7. It’s a very comprehensive video, I really respect your effort. I like your style of teaching very simple and you follow a good sequence thank you.

  8. makwana jignesh narendra bhai

    Very well explained fundamentals,
    In updating phase @ 4:13 prevState shows 1 quantity.

  9. Though now days uses functional components ( hooks ) , but as working professional, where already build project in class components , this tutorial is very helpful 👍🏻👍🏻 keep it up

  10. Very easy to understand. Good work. The way you are speaking makes it easy to follow. Thanks.

  11. The bad thing about this course is that he’s using class components instead of functional components which is much easier !!!

Comments are closed.