Learn React by Building an eCommerce Site - Tutorial

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.

🔗 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

--

[balajigupta]

Have you all watched this video full??? Basically not this video came 2 minutes ago. How can you say 'nice video' without watching it full? Are you all time travellers.

[adnanniaz]

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.

[jashwanthgowda]

This Course should have been in functional components 🙏

[venkataraghavakurada]

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
<BrowserRouter>
<NavBar/>
<div className="container-fluid">
<Routes>
<Route path="/" exact element={<Login />} />
<Route path="/db" exact element={<Dashboard />} />
<Route path="/cust" exact

<Route path="/cart" exact element={<ShoppingCart/>}/>
<Route path="*" element={<NoMatchFound/>}/>


</Routes>
</div>
</BrowserRouter>

[mayankvikash]

I don't know why if an Indian teach something there is another level of confidence in me.

[victor-honorato]

dude, i'm brazilian but your english is easy to understand

[sivaprakash]

Just thinking about learning react thank you!!

[Learning-king]

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

[SachinYadav-ehvg]

Why are you using class components, they are history now !

[leogarza]

Never pressed like in a video this fast in my life

[DeepAmbientDrone]

I like that you first describe what you want to do and then show the solution. This way you can pause the video and try to find your own solution first. This has a higher learning effect when you actively deal with a problem.

For the method handleIncrement, for example, I only passed the productId and searched for the product in the state using the filter function. It was interesting to see that you can also pass whole objects to the method and not just the id. Theoretically, you could also have passed the index number from the map method :). Thanks a lot for your tutorial. It was simple, easily explained and I learned a lot.

[pilgrimemmanuel.]

Fantastic Lecture, I learned a lot. thanks for this tutorial. Note: Switch is now replaced in version 6 with Routes

[abdulazeezoluwanishola]

Thanks for this. Even though I follow doing my own using the functional Component. It is a huge experience and great learning process.
Thanks a bunch for the value dished for free.

[VinayakGNair]

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

[bhaveshgujar]

at 4:14:12 you are saying the prevProps must hold the previous State but in cosole it is not happens,
Just Check it ONCE !!!
How to access the previos State

[andrewdingle]

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

[makwanajigneshnarendrabhai]

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

[victorirekponor]

This is the best video I have ever come across on Youtube!!!!

[jens]

not the greatest course. Not really modern.

[musicpersempre]

This tutorial is old. No sense to learn react in this way now.