Code 15 React Projects – Complete Course

Wordpress sites

Improve your skills with the React JavaScript library by building 15 projects using React.

🔗 Code:

🔗 React Fundamentals Course:

✏️ Course from John Smilga of the Coding Addict channel. Check out his channel:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:03:34) Starter Project Setup
⌨️ (0:07:18) 1-Birthday Intro
⌨️ (0:07:54) 1-Birthday Setup
⌨️ (0:13:31) 1-Birthday Complete
⌨️ (0:19:41) 2-Tours Intro
⌨️ (0:20:41) 2-Tours Fetch Data
⌨️ (0:32:04) 2-Tours Display Data
⌨️ (0:37:40) 2-Tours Toggle Button
⌨️ (0:43:17) 2-Tours Remove Tour
⌨️ (0:50:13) 3-Reviews Intro
⌨️ (0:50:36) 3-Reviews Info And React Icons
⌨️ (0:56:46) 3-Reviews Setup
⌨️ (1:05:39) 3-Reviews Prev And Next Person
⌨️ (1:12:14) 3-Reviews Random Person
⌨️ (1:17:22) 4-Accordion Intro
⌨️ (1:17:36) 4-Accordion Complete
⌨️ (1:27:27) 5-Menu Intro
⌨️ (1:28:16) 5-Menu Display Items
⌨️ (1:36:08) 5-Menu Manual Approach
⌨️ (1:40:59) 5-Menu All Button
⌨️ (1:43:34) 5-Menu Dynamic Approach
⌨️ (1:52:06) 6-Tabs Intro
⌨️ (1:52:52) 6-Tabs Setup
⌨️ (2:00:09) 6-Tabs Display First Job
⌨️ (2:06:42) 6-Tabs Buttons
⌨️ (2:13:40) 7-Slider Intro
⌨️ (2:14:07) 7-Slider Setup
⌨️ (2:24:59) 7-Slider Manual Setup
⌨️ (2:32:44) 7-Slider Setup Classes
⌨️ (2:40:12) 7-Slider Prev And Next
⌨️ (2:43:32) 7-Slider First And Last, Autoslide
⌨️ (2:50:53) 8-Lorem-Ipsum Intro
⌨️ (2:52:24) 8-Lorem-Ipsum Structure
⌨️ (3:00:32) 8-Lorem-Ipsum Complete
⌨️ (3:08:49) 9-Color-Generator Intro
⌨️ (3:10:33) 9-Color-Generator Structure
⌨️ (3:19:11) 9-Color-Generator Get Values, Error
⌨️ (3:26:05) 9-Color-Generator Single Color
⌨️ (3:42:34) 9-Color-Generator Copy To Clipboard
⌨️ (3:51:39) 10-Grocery-Bud Intro
⌨️ (3:53:10) 10-Grocery-Bud Structure
⌨️ (4:03:46) 10-Grocery-Bud Add Items
⌨️ (4:13:21) 10-Grocery-Bud Alert
⌨️ (4:23:06) 10-Grocery-Bud Clear List
⌨️ (4:25:18) 10-Grocery-Bud Remove Item
⌨️ (4:29:58) 10-Grocery-Bud Edit Item
⌨️ (4:37:12) 10-Grocery-Bud Local Storage
⌨️ (4:41:27) 11-Navbar Intro
⌨️ (4:42:07) 11-Navbar Structure
⌨️ (4:50:59) 11-Navbar Links Data
⌨️ (5:00:14) 11-Navbar Simple Toggle
⌨️ (5:03:10) 11-Navbar Class Toggle
⌨️ (5:07:20) 11-Navbar UseRef Approach
⌨️ (5:16:22) 12-Sidebar Intro
⌨️ (5:17:13) 12-Sidebar Structure
⌨️ (5:26:15) 12-Sidebar Global Context
⌨️ (5:36:39) 12-Sidebar Complete
⌨️ (5:44:46) 13-Stripe Intro
⌨️ (5:47:06) 13-Stripe Context Boilerplate
⌨️ (5:56:31) 13-Stripe Navbar
⌨️ (6:03:31) 13-Stripe Hero
⌨️ (6:06:18) 13-Stripe Sidebar
⌨️ (6:13:48) 13-Stripe Submenu
⌨️ (6:18:16) 13-Stripe Location
⌨️ (6:28:02) 13-Stripe Submenu Links
⌨️ (6:37:34) 13-Stripe Hide Submenu
⌨️ (6:41:55) 14-Cart Intro
⌨️ (6:42:44) 14-Cart Setup Overview
⌨️ (6:50:25) 14-Cart UseReducer Setup
⌨️ (6:57:16) 14-Cart Clear Cart
⌨️ (7:02:06) 14-Cart Remove Item
⌨️ (7:06:35) 14-Cart Increase
⌨️ (7:11:40) 14-Cart Decrease
⌨️ (7:15:41) 14-Cart Get Totals
⌨️ (7:27:23) 14-Cart Fetch Data
⌨️ (7:32:31) 14-Cart Toggle Functionality
⌨️ (7:39:57) 15-Cocktails Intro
⌨️ (7:41:13) 15-Cocktails Additional Info
⌨️ (7:41:51) 15-Cocktails Setup Overview
⌨️ (7:44:49) 15-Cocktails Router Setup
⌨️ (7:50:15) 15-Cocktails Navbar
⌨️ (7:53:20) 15-Cocktails Error About
⌨️ (7:56:28) 15-Cocktails Context Setup
⌨️ (8:06:54) 15-Cocktails API Overview
⌨️ (8:10:29) 15-Cocktails Fetch Drinks
⌨️ (8:20:51) 15-Cocktails Display List
⌨️ (8:26:17) 15-Cocktails Search Form
⌨️ (8:32:49) 15-Cocktails Single Cocktail Page
⌨️ (8:53:23) Hosting – Drag And Drop
⌨️ (8:58:45) Hosting – Continuous Deployment

⭐️ Special thanks to our Champion supporters! ⭐️
🏆 Loc Do
🏆 Joseph C
🏆 DeezMaster

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:

39 thoughts on “Code 15 React Projects – Complete Course”

  1. siddhartha duggirala

    your work is absolute gift to humanity… i really appreciate all the hard work you put in.

    1. @Miloš Leng Regardless, it takes a lot of effort to produce the videos, perform the commentary, format the lessons and explain it in a way that beginners can understand. Then if you buy his courses he responds to a lot of the comments quickly. Have to hand it to him, he does put in a lot of work, especially for free content.

  2. Why would people dislike this tuts?? This is gem for react developers especially those who are struggling to grasp the concept..

    1. @Symbiotic Parasite a tutorial is indeed a tutorial.. but it does not follow that it cannot be a project.. telling someone lacking in understanding is not the same as calling a duck a horse, its just say you need to understand other people more and not put everything in a box..

  3. Hello John. Are you a great and kind hearted person.
    You are one of those greatest and Advanced YouTubers (Developers) who are always instructing us in the right path.
    Thanks very much for all these high quality tutorials projects.
    They are very interesting to anyone who want to depth deeper into react.js.
    thanks for all the hard works towards us.
    You are one of my best and greatest instructors on YouTube.
    Please keep up the great work. Thanks.

  4. For those who are doing npm install on every project, to make things go faster just copy the node_modules folder to the project you want to work with and do npm install in that project, it should be much faster.

  5. Oluwatobi Akinlade

    John Smila tutorials on react js and react projects is one of the best you can get other there. He explains every concept to the lowest level of a beginner’s understanding. This guy is the best react js tutor!

  6. You are a true angel, thank you so much for this tutorial. This is a big help to us poor people who can’t afford to enroll in a course. More power and blessings to you sir.

  7. I am in shock and feeling so grateful that all of this content is provided to us for free! John is an incredibly thorough and knowledgeable teacher.

  8. This is the reason i feel proud be associated with IT industry as a developer, because people have generosity to share such content freely. Thanks buddy.

    1. @Dulshan Samarakoon He uses data files instead of an api but it doesn’t change the code much, instead of requesting data from the file, you would get the data from the server but the output of the data would stay the same.

    2. Awesome Bear Audiobooks

      ​@pyroghost11 Of course it SHOULD be watched IF ONE WANTS. Saying ”you shouldn’t watch this video because it doesn’t help with coding” is the same as saying ”you shouldn’t listen to Spanish music because it doesn’t help with talking”. Yes it does. We learn first and foremost by imitating others. Only when we have some familiarity with the subject, it becomes really enjoyable. In the beginning, trying to make something from scratch can lead to very unsatisfactory results like coming up with your own bad coding practices…

      Let’s return to the Spanish analogy…
      Of course one can learn Spanish by just reading dicitonaries and trying to write your own essays from the get go. But both the quality of your essays and the quality of your pronunciation will be better, not worse if you watch films or listen to music in your free time. In fact, it will be your antidode to a burn-out. On the other hand, always writing essays (or code), especially as a beginner, can quickly lead to a burnout.

    3. @pyroghost11 while I agree with you that it is better to figure things out on your own, this isn’t always the most optimal solution for somebody who has absolutely no grounding in the particular technology. I think there are a ton of things that can be learned from these videos from the perspective of how React works and general work flow. I find a good approach is to try and pause the video and see if you can implement a feature or just going back and doing it on your own after watching it. But to figure out how to do all of theirs from scratch without a solid foundation in React would take a very long time IMO and not everybody has this much time. Many people are watching these vids after their work day and trying to learn how to code in what ever spare time they can find in their busy lives.

    4. @pyroghost11 ????i mean obviously after watching this video people would create more projects on their own

  9. Thanks so much for explaining everything in detail, it helps so much! I watch the tutorial and make this practices after each topic of the tutorial! You are a great teacher! 😀

  10. Thanks a lot for this video, it took my training to another level, for more people like you who share the knowledge!! LEGEND!!

  11. At the beginning I feel like my head was about to explode, but it’s getting easier and easier as I keep on repeating the steps. Everything become clearer. And I learn more tricks on HTML and CSS too as a bonus Thank you sir!

  12. Carlos Peña

    I already finished this course and I can assure you this is by far the best course I have seen about web development. Thank you so much for taking the time to do all of this possible!

    1. @Mehedi HasanYes for now as I am working in a warehouse for £17.50 per hour at the moment and will try again in the new year

    2. @Mehedi Hasan Well, actually, the job was some distance away so I bought a car on finance to enable myself to do it. The car died in 24 hours and is being returned. So, I ended up taking a more local job for £12.50 an hour so I am at a loss there but at least I don’t have a car to pay for now.

  13. This style of video where you just build tons of stuff quickly and iterate (similar to Wes Bos’s Javascript 30 course) is perfect for my learning style. Thank you so much! This is the definition of a banger.

  14. This is a quite brilliant series. I’ve done lots of tutorials on React, Redux, Context, etc, but you do cover it all very well with concrete examples. Good job. 👍🏻 I just binged watch the whole 9 hours at 3x and it was still easy to follow.

  15. I’ve just started watching the video but i can already tell that you’re amazing! all the folders super organised and prepared for out convenience… thank you!

  16. Jeyaraj Software

    Hello John, Amazing tutorial. Thanks for the great work! One issue I noticed in the 04-accordion project have one issue that it’s fixed by applying this contains a “pId” attribute out of the box which is deemed invalid by React and throws an error and plus button was not working. Since this is a problem related to the used third-party package itself (ref), I superseded react-icons/ai with react-icons/bs which doesn’t throw any such error.

  17. THIS is exactly what I have been looking for! A lot of tutorials I come across focus on bigger complex projects, where I quickly lose overview, where as these are small simple projects, where I actually undertand what is going on!

  18. Jonathan Tang

    I just started node/express and react a few weeks ago and I find your videos the best. step by step and do every single tutorial together with your video. Really learn a lot. Soon I will be able to do a project on my own.

  19. I have just went through the first two projects. Thank you so much. Great teaching!

Comments are closed.