I want to thank you man, with your awesome courses and tutorials I finally got my first job. I deeply appreciate your great efforts. Huge love and respect. Stay awesome as always.
Just a quick note: React-Bootstrap's documentation says that "You should import individual components like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client." So in this video's case, the import ideally would be 'import NavbarBs from 'react-bootstrap/Navbar''
my best trick of learning is by putting the video at a speed of 0.75 then putting youtube on one side of my window and on the other side my code editor.. even thou the code exists on github, I practice bit by bit until the end of the video. Hope it helps some of you guys. Goodluck :)
I do the same and I think almost everyone should that as that really helps in learning and grasping the concepts which you can never learn just by watching:)
Off topic, but I had been looking for a React Hooks course and didnt realize you just made one! going to complete it this week. Thank you for consistent, high quality content. you are helping thousands of developers across the globe!
Literally one of the best channels on the platform. Always bringing stuff that we all are in need of! Thank you so much for all the effort, you can't even imagine how much you are helping us! God bless you.
your videos are so good, they show me how much more I have to learn to make truly professional sites like this. I’ve finally gotten to the point I can make full stack web apps, and I’m proud of myself for that, but my code always feels sloppy and unorganized. thanks for the inspiration!
Kyle I want to thank you for teaching me... actually when am searching anything I have to add your name to see if you posted anything on that topic.. thanks so so much brother.
No way! 🤩 I am just about to build a shopping cart for my project and was wondering if there was any comprehensive guide for it. And bam! A notification from WDS! Great video, thanks a lot!
Dude your videos are freaking awesome , i usually learn from people like yourself sir , and turn these projects into a full stack project connect an api , backend and so on , on my own i just wanted to say your awesome and keep up the simplicity
You make excellent content! Watched an older video on ditchin else statements last night and l am truly inspired by your way of deconstructing problem-solving. Your content is always on par so would just like to thank you for putting so much work into helping others become better developers. Brilliant!
Thank u SO much, the parts about handling typescript and the local storage have been extremely illuminating for me. I honestly am thinking about buying the full course😃
While your developer and teaching skills and the quality of this tutorial are outstanding, I can't honestly consider taking the full React course or recommend this tutorial to anyone because there is not a single line of comments anywhere in the code. The ShoppingCartContext and useLocalStorage files are impossible to understand by reading them. I'm not sure how the web development community views comments in production code, but coming to this as a C++ developer, I find that comments are absolutely mandatory for any kind of tutorial learning experience. My recommendation would be to edit the source code in Git with comments on every other line of that code. I don't mean for this to be a negative comment, but I've been trying to add comments as I'm following your teaching, but I can't understand why it's written the way it is and there is no simpler or cleaner way to write it. Mostly what I am doing is copying what I see on the screen without any context to understand it. For example, why are there so many functions in the context file, can it be done with just 1 class and 4 functions? Why are there separate classes for StoreItem and CartItem, can't it just be an Item class? The only thing I comprehend is that it is just the way it has to be because Meta designed React this way. And I feel like by the time I'm done learning it, it's just going to be replaced with a better framework that is easier to use and simpler to read. Again, my comment is not to judge the tutorial, but I'm just explaining what it looks like from a student perspective. Thanks
Hey, things like Generic Types are used across most higher level languages, (TS just made it available to javascript since it was so flimsy). As for the structure of code I agree, there's a million ways to fix a bike To me it sounds like the more 'complex' parts of reacts like custom hooks, contexts, all mixed with inferred typing haven't fully clicked yet. Learn them first through docs and small projects yourself. Bit by bit. React can easily become a shitshow. Then what I do is come across tutorials like this is I approach the builds as if I was building them. For example when he creates types in files and doesn't properly structure them for larger projects I create a types folder and re structure it to my liking, as I know in a professional environment re writing types & using hacky methods doesn't infer proper practices and creates spaghetti monsters. React is here to stay IMO, TS makes it a million times easier once you understand the more advanced concepts. Use the tutorial as a half baked boilerplate and use your own gained knowledge through docs to build it 'better'. Helps you learn 100x easier.
this is sick bro! love it! maybe just need a little optimization of how to get the data, because it has so much looping in data. I don't know, maybe we do it because we works in local data json?
thank you kayle very nice tutorial. I wish if you made an express server connected to mongo db and put items there and maybe login route as seller (who will post items to db ) and a login as customer. but i will try to do these )
where can I find a good site for summarizing the different className possibilities? Google's giving me results different than how it's being used in this video. Thank you!
I am getting used to leaving the courses in the middle, coz they make it so hard to understand and keep on bringing more to more complex code that they write everyday
I am having this error when I am using props in my storeitems 'StoreItem' cannot be used as a JSX component. Its type '({ id, name, price, imgUrl }: any) => void' is not a valid JSX element type. Type '({ id, name, price, imgUrl }: any) => void' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'. Type 'void' is not assignable to type 'ReactNode'.
Bro, please, sometimes you speak too fast. I´m from Brazil and my English is... quite hard to say, but, I learn a lot here from you! Thanks! God bless you!
vite is a good one ,however , I notice an awful fact that not all vite project can be easily deployed ,....some time in the dev environment , it works very well with no error , but when you deploy...you will find some 130 error which is unpleasant , I don't know if kyle has the similar tutorial to fix this type of issue or we just wait vite to upgrade to version 4 to fix the but itself
Good tutorial over all. But would be better if you explained the last part a little more in depth. I mean working with storage, custom hooks and generic types.
With this project I'm probably going to create an Ecommerce website, cuz I was really thinking about it, but now I have everything I need if I will run into a problem.
Great job, Kyle! Unfortunately, after deployment thid project on Github pages all images dissapeared. I've tried different ways to fix it . Nothing helped. Anybody know how to fix it? Thank you in advance!
Why does one function return number and the other ones not (void)? type ShoppingCartContext = { getItemQuantity: (id: number) => number; increaseCartQuantity: (id: number) => void; decreaseCartQuantity: (id: number) => void; removeFromCart: (id: number) => void; };
Yoo nice tutorial man. I used the 'useCallback' hook on your functions inside the context tsx file to prevent unnecessary re-renders if the state variable is being updated. just wanted to ask if you think this is necessary. Thanks in advance
I am going to build this project but i want to add one more extra feature which is a discount card. so user can avail a discount card and can apply it when try to checkout so the total price will be reduced. Let's see...
Hi all, I implement the shopping cart, but I received the following error: const quantity = getItemQuantity(id); TypeError: getItemQuantity is not a function. Can someone help with that?
Can you make tutorial on that, user can add to cart without login which is store in local storage but when user login the cart item should store in database. After user logout the cart should empty. Amazon has that feature in their cart system.
I want to thank you man, with your awesome courses and tutorials I finally got my first job. I deeply appreciate your great efforts. Huge love and respect. Stay awesome as always.
Front end developer?
@@ManojKumar-iu3zh Yes, Front-End Web Developer with ReactJS
Congrats to you man !!
@@anweshandev thanks bro
Congrats, but how long does it take to get your first job?
This tutorial is really helpful to those who started integrating TS with React. Thanks a lot.
Just a quick note: React-Bootstrap's documentation says that "You should import individual components like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client." So in this video's case, the import ideally would be 'import NavbarBs from 'react-bootstrap/Navbar''
i thought no difference because you imported 'bootstrap/dist/css/bootstrap.min.css' in the index.js anyway or not?
@@kybkap8686 The import I mentioned is only related to the react-bootstrap JavaScript library and not the bootstrap css that you talked about.
Good advice, you might need to import it as a named import though to be able to rename it properly.
Your content is SICK! Please do more React-TypeScript, i would love to see you coding a MERN + TypeScript project
my best trick of learning is by putting the video at a speed of 0.75 then putting youtube on one side of my window and on the other side my code editor.. even thou the code exists on github, I practice bit by bit until the end of the video. Hope it helps some of you guys. Goodluck :)
Rewriting code is a good method of getting better at coding.
I do the same and I think almost everyone should that as that really helps in learning and grasping the concepts which you can never learn just by watching:)
I thought this was implied to be honest, idk why else someone would wanna watch this lmao
Off topic, but I had been looking for a React Hooks course and didnt realize you just made one! going to complete it this week. Thank you for consistent, high quality content. you are helping thousands of developers across the globe!
A huge result for an one hour duration tutorial. Thank you!
Literally one of the best channels on the platform. Always bringing stuff that we all are in need of! Thank you so much for all the effort, you can't even imagine how much you are helping us! God bless you.
this tutorial is awesome! made me understand typescript better instead of struggling on my own
I expected you would do in typescript in future but it happens now wow
Spent the whole day doing this, my confidence is going up at the speed of light. 26th June 2022
the reason i love kyle web dev simplified is that you learn a lot in a short amount of time..
was waiting for typescript project from a long time fr. Thanks kyle ,really looking forward to building this
It was a very nice tutorial. Especially because this video is so up to date (React V18, React Router Dom V6). Thanks for everything, I learned a lot.
your videos are so good, they show me how much more I have to learn to make truly professional sites like this. I’ve finally gotten to the point I can make full stack web apps, and I’m proud of myself for that, but my code always feels sloppy and unorganized. thanks for the inspiration!
Master! One of the best tutorials I have ever watched. Thank you !!!
Kyle I want to thank you for teaching me... actually when am searching anything I have to add your name to see if you posted anything on that topic.. thanks so so much brother.
Great work. Super nice. Everyone who watched this, should try to build an admin area, where you can add and remove items.
I might just do that! Always good to have some unguided homework!
I know it's going to be very helpful. Thank you very much. This is all that I needed.
hey i appreciate that you show the product in the demo part which let us visualize how the project going to turn out
big thanks man
Could you make a video on all the keyboard shortcuts you use?
No way! 🤩 I am just about to build a shopping cart for my project and was wondering if there was any comprehensive guide for it. And bam! A notification from WDS!
Great video, thanks a lot!
wow, dude, just wow. you're an absolute beast and I want to be as good as you. thanks for the awesome tutorial.
Dude your videos are freaking awesome , i usually learn from people like yourself sir , and turn these projects into a full stack project connect an api , backend and so on , on my own i just wanted to say your awesome and keep up the simplicity
Thanks you,
please also make a video on React testing , Jest etc
after watching this
i finally subscribe for 2 years watching your video's sorry and thank you this is gold
You make excellent content! Watched an older video on ditchin else statements last night and l am truly inspired by your way of deconstructing problem-solving. Your content is always on par so would just like to thank you for putting so much work into helping others become better developers. Brilliant!
I love your style. Simple and precise. Keep it up sir!!!🥰
Kyle, that one with TS trully helps, thank you so much, one day I will buy you a big coffee, promise
Thank you for this. Great one. I've finally got a good grasp on how to use TypeScript in a real world situation. Thanks again
Dude, you are super super super good. You make me realize how far I have to go. Thank you for the great content.
Thank you for everything you do for the community
Happy to see TypeScript videos, hoping to see more
awesome, it’s hard to find react videos that uses typescript, loved the video. thanks kyle
Thank u SO much, the parts about handling typescript and the local storage have been extremely illuminating for me. I honestly am thinking about buying the full course😃
I like the way you explain every detail sir, it helps me alot to understand every functions and details in this Typescript tutorial. Thank you sir.
Like this please do Fully loaded MERN project with typescript, which include all the real-world example.
Kyle … Thank you for everything you do a gazillion times over. ❤️
While your developer and teaching skills and the quality of this tutorial are outstanding, I can't honestly consider taking the full React course or recommend this tutorial to anyone because there is not a single line of comments anywhere in the code. The ShoppingCartContext and useLocalStorage files are impossible to understand by reading them. I'm not sure how the web development community views comments in production code, but coming to this as a C++ developer, I find that comments are absolutely mandatory for any kind of tutorial learning experience. My recommendation would be to edit the source code in Git with comments on every other line of that code. I don't mean for this to be a negative comment, but I've been trying to add comments as I'm following your teaching, but I can't understand why it's written the way it is and there is no simpler or cleaner way to write it. Mostly what I am doing is copying what I see on the screen without any context to understand it. For example, why are there so many functions in the context file, can it be done with just 1 class and 4 functions? Why are there separate classes for StoreItem and CartItem, can't it just be an Item class? The only thing I comprehend is that it is just the way it has to be because Meta designed React this way. And I feel like by the time I'm done learning it, it's just going to be replaced with a better framework that is easier to use and simpler to read. Again, my comment is not to judge the tutorial, but I'm just explaining what it looks like from a student perspective. Thanks
Hey, things like Generic Types are used across most higher level languages, (TS just made it available to javascript since it was so flimsy). As for the structure of code I agree, there's a million ways to fix a bike To me it sounds like the more 'complex' parts of reacts like custom hooks, contexts, all mixed with inferred typing haven't fully clicked yet. Learn them first through docs and small projects yourself. Bit by bit. React can easily become a shitshow.
Then what I do is come across tutorials like this is I approach the builds as if I was building them. For example when he creates types in files and doesn't properly structure them for larger projects I create a types folder and re structure it to my liking, as I know in a professional environment re writing types & using hacky methods doesn't infer proper practices and creates spaghetti monsters.
React is here to stay IMO, TS makes it a million times easier once you understand the more advanced concepts. Use the tutorial as a half baked boilerplate and use your own gained knowledge through docs to build it 'better'. Helps you learn 100x easier.
this is sick bro!
love it!
maybe just need a little optimization of how to get the data, because it has so much looping in data.
I don't know, maybe we do it because we works in local data json?
more React and TypeScript content please!
thank you kayle very nice tutorial. I wish if you made an express server connected to mongo db and put items there and maybe login route as seller (who will post items to db ) and a login as customer. but i will try to do these )
Congratulations! A nice example on how to apply the useContext hook!
Your videos are amazing! I'm learning a lot from you. Keep going my man!
"Link from React Router" And he teleports 10 feet to the left . Good job on project !!
Thank you Kyle for this amazing tutorial. Really helped me.
Exactly what I was looking for.
Bless you Kyle
where can I find a good site for summarizing the different className possibilities? Google's giving me results different than how it's being used in this video. Thank you!
I am getting used to leaving the courses in the middle, coz they make it so hard to understand and keep on bringing more to more complex code that they write everyday
I am having this error when I am using props in my storeitems
'StoreItem' cannot be used as a JSX component.
Its type '({ id, name, price, imgUrl }: any) => void' is not a valid JSX element type.
Type '({ id, name, price, imgUrl }: any) => void' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'void' is not assignable to type 'ReactNode'.
Bro, please, sometimes you speak too fast. I´m from Brazil and my English is... quite hard to say, but, I learn a lot here from you!
Thanks!
God bless you!
If the premium course package was cheaper I would buy it for sure!
vite is a good one ,however , I notice an awful fact that not all vite project can be easily deployed ,....some time in the dev environment , it works very well with no error , but when you deploy...you will find some 130 error which is unpleasant , I don't know if kyle has the similar tutorial to fix this type of issue or we just wait vite to upgrade to version 4 to fix the but itself
Great content, man.
Could you do a follow up of this project implementing a login page and a search bar?
Thanks a lot, Kyle for the tutorial. Really appreciate it
Thank you for this super course ! I am just wondering the last part with the custom hook where we use a generic type T
Very smooth brother. Amazing video
Thank you for this content, man, you look like homelander
i m stronger i m smatter i m better
You're a gem in this man
Good tutorial over all. But would be better if you explained the last part a little more in depth. I mean working with storage, custom hooks and generic types.
With this project I'm probably going to create an Ecommerce website, cuz I was really thinking about it, but now I have everything I need if I will run into a problem.
Great job, Kyle! Unfortunately, after deployment thid project on Github pages all images dissapeared. I've tried different ways to fix it . Nothing helped. Anybody know how to fix it? Thank you in advance!
Why does one function return number and the other ones not (void)?
type ShoppingCartContext = {
getItemQuantity: (id: number) => number;
increaseCartQuantity: (id: number) => void;
decreaseCartQuantity: (id: number) => void;
removeFromCart: (id: number) => void;
};
More of this is needed!!
Thanks Kyle!
Please try to use something like chakraUi next time sir!
Yoo nice tutorial man. I used the 'useCallback' hook on your functions inside the context tsx file to prevent unnecessary re-renders if the state variable is being updated. just wanted to ask if you think this is necessary. Thanks in advance
Excellent video! Thanks for sharing your knowledge!
The training was excellent but very fast❤❤😍
You're a mind reader😍
This video is one of your best ones!
Great informative project well built, thank you Kyle
bro, just launch your own framework. You are just commendable. 👏
kyle is a mysterious wonder...
@@isaacopeyemirobert7868 definitely, he is.
nice video! I hope u will upload more react projects with typescript in the future.
Great videos! just a question, why that "as NavLink" needed in the NavBar?
So... how do you finalize your purchase from the cart?
I am going to build this project but i want to add one more extra feature which is a discount card. so user can avail a discount card and can apply it when try to checkout so the total price will be reduced. Let's see...
Hi all, I implement the shopping cart, but I received the following error: const quantity = getItemQuantity(id); TypeError: getItemQuantity is not a function. Can someone help with that?
Thank you so much. Hope to see more videos like that
The route example did not work for me; I had to add the element in the app component, wrapping all of the return code in it
You can't imagine how much I love you.
Won't justify-content-between do the same as me-auto. Is there any difference in usage?
Great project, it would have been great if you used an API for your data.
Wow! I have a question regarding the syntax. You placed ?.quantity after the find, what does this do? Thank you!
Thanks Kyle for this tutorial!
Great video. Followed step by step and completed the whole project! Thank you! If possible, upload more of these!
Thanks for sharing man, I have a question to you. Should we use "Decorators" while working on a React project
3 times did not start, but then it worked
i was waiting for your Typescript App!!!!
Good information
why do you use "style" for div and button instead of bootstrap class, why do we need to mix in this way?
why you are using normal functions instead of arrow functions on components and hooks?
Hi, Do you have a demo for place order page?
Although I don't need it but it sure is good to know about it in case I need it so thanks for the info
hey kyle, can you please make a video on improving core web vitals of a website?
I would hope if you can tell us the extensions you use specially the ones you used in this vidoe
Thank you for perfect video
You are amazing !!! Thank you for your tutorial Videos...!!! 🥰
Your videos are so amazing!
But I hope u can use a prettier theme instead of default VSC theme.
The default theme is more cleaner and easy to work with.
finally saw a tutorial not using react as a html container
I just want to say thank you ❤
Can you make tutorial on that, user can add to cart without login which is store in local storage but when user login the cart item should store in database. After user logout the cart should empty.
Amazon has that feature in their cart system.