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:
Thanks so much for this!! 🤗
This Course should have been in functional components 🙏
Why u think functional is better?
absolutely, the reason they didnt do it is for us to pay for the udemy course 😔
@Hiro absolutely. Please let me know if you find anywhere a e commerce website by functional components
I agree 100%
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”.
very detailed explanation. Thank you.
You should use const instead of var
Wonderful!!!! Thanks for this video.
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.
@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
@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
@Adnan Niaz learning class based react at this point is just beyond useless.
@AXE- Z That is exactly my point.
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.
@Pankaj Sanam what a weak comeback. Zero creativity. As I said useless
@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
no thx
Please make videos on Spring boot also..
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.
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
Have u figured this
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.
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
Thank you bro!!!
Thank you!!
Thank you, so will the ‘Switch’ tag not be needed? Is it not used anymore?
you are an angel thank youuuuuuuuuuuuuuuuuuuu
This is the best video I have ever come across on Youtube!!!!
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.
thanks
Thank you so much!!!!!!
Text-end m-2 not working
Float-end works me..
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.
Very well explained fundamentals,
In updating phase @ 4:13 prevState shows 1 quantity.
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
solid tutorial!!! and introduce me to bootstrap which is amazing
Very easy to understand. Good work. The way you are speaking makes it easy to follow. Thanks.
Redo with functional components please 🙂
The bad thing about this course is that he’s using class components instead of functional components which is much easier !!!