React JS Course for Beginners – 2021 Tutorial

Ecommerce Empire Academy

This is a full premium course. Learn React.js from the ground up with fundamentals to more intermediate and advanced topics. You will learn by building a real app!

💻 Starter files:

Course from Thomas Weibenfalk. Check out his channel:

Learn:
– React
– JSX
– Styled Components
– React Router
– State and Props
– Context
– CSS
– API handling
– Hooks
– Typescript
– Persist state in SessionStorage
– Deploy to Netlify
– And MUCH more …

⭐️ Course Contents ⭐️
⌨️ (0:00:10) Introduction
⌨️ (0:00:57) The App
⌨️ (0:03:27) The Movie DB – API Key
⌨️ (0:05:09) What is React?
⌨️ (0:10:49) Starter Files
⌨️ (0:14:16) Quick about tooling
⌨️ (0:15:50) Bootstrap with CRA
⌨️ (0:19:11) Install dependencies
⌨️ (0:24:17) Copy fils from starter files
⌨️ (0:28:34) Setup API Key and walkthrough of API files
⌨️ (0:33:24) React without JSX
⌨️ (0:40:10) Short about JSX
⌨️ (0:42:52) Crash course in Props and State
⌨️ (0:55:12) Short about Styled Components
⌨️ (0:58:23) Global Styles
⌨️ (1:08:01) Header Component
⌨️ (1:21:09) Header Component – Styles
⌨️ (1:25:40) Home Component – Scaffold
⌨️ (1:33:45) Short about built-in hooks in React
⌨️ (1:38:55) Fetch data from the API for Home Page
⌨️ (1:52:44) Custom hook for Home Page
⌨️ (1:59:49) HeroImage Component
⌨️ (2:11:22) HeroImage Component – Styles
⌨️ (2:20:23) Grid Component
⌨️ (2:26:06) Grid Component – Styles
⌨️ (2:29:44) Thumb Component
⌨️ (2:34:59) Thumb Component – Styles
⌨️ (2:37:28) Spinner Component
⌨️ (2:42:03) SearchBar Component
⌨️ (2:57:54) SearchBar Component – Styles
⌨️ (3:02:16) SearchBar Component – Logic
⌨️ (3:06:51) Button Component
⌨️ (3:10:42) Button Component – Styles
⌨️ (3:13:06) Button Component – Logic
⌨️ (3:19:50) Short about React Router
⌨️ (3:21:59) Routing with React Router
⌨️ (3:34:15) Movie Component – Scaffold
⌨️ (3:36:26) Fetch movie data from the API
⌨️ (3:49:38) BreadCrumb Component
⌨️ (3:54:49) BreadCrumb Component – Styles
⌨️ (3:57:46) MovieInfo Component
⌨️ (4:08:41) MovieInfo Component – Styles
⌨️ (4:17:35) MovieInfoBar Component
⌨️ (4:23:26) MovieInfoBar Component – Styles
⌨️ (4:26:38) Actor Component
⌨️ (4:32:09) Actor Component – Styles
⌨️ (4:34:16) Short about PropTypes
⌨️ (4:37:38) Validate Props with PropTypes
⌨️ (4:48:17) Short about SessionStorage
⌨️ (4:50:32) SessionStorage – Home
⌨️ (4:59:34) SessionStorage – Movie
⌨️ (5:03:17) Build and prepare for Netlify
⌨️ (5:05:58) Netlify drag and drop and Netlify CLI
⌨️ (5:10:29) Netlify Continous Deployment
⌨️ (5:13:48) Bonus – Classes – SearchBar Component
⌨️ (5:22:04) Bonus – Classes – Home Component
⌨️ (5:33:14) Bonus – Classes – Movie Component
⌨️ (5:40:39) Bonus – Typescript – Introduction
⌨️ (5:42:20) Bonus – Typescript – Bootstrap project and copy files
⌨️ (5:47:19) Bonus – Typescript – Refactor base files
⌨️ (6:04:16) Bonus – Typescript – Refactor Home and Components
⌨️ (6:14:55) Bonus – Typescript – Refactor Movie and Components
⌨️ (6:25:52) Bonus – Login – Short about TMDB login and rating system
⌨️ (6:29:25) Bonus – Login – Global Context
⌨️ (6:34:34) Bonus – Login – Login Component
⌨️ (6:50:49) Bonus – Login – Login Component – Styles
⌨️ (6:53:47) Bonus – Login – Login from Header
⌨️ (7:00:27) Bonus – Login – Rate Component
⌨️ (7:04:35) Bonus – Login – Rating from MovieInfo

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

38 thoughts on “React JS Course for Beginners – 2021 Tutorial”

  1. Has anyone noticed free code camp has been absolutely KILLING it (even more than usual) ever since quarantine last year?!
    Truly thank you guys!!

    1. HotcakesLeGourmet

      @JAMIU KOLAWOLE Absolutely YES!. When I landed in my first I’m going to support them monthly. Thank you so much guys! :’)

    2. @Almighty Prajapathi is that why people like you will stay making 50k and people who know that every framework has its own use make over 200k?

  2. Really enjoying this course! Thanks for all the hard work that’s gone into it!

  3. Chandler Chaudhary

    Hello Sir
    Thanks for this wonderful course, excited to start learning
    Have one question before going in- Is Functional components used in this course

    1. @E V
      I’m at 4:23 right now.
      And I too learned a lot due to Repeatative structure

      Edit:😁
      It’s actually 4:23:00

    2. 1:09:57 —— 1:11:32 Can anyone explain whats he talking about here , I’ve listened to it multiple time still I dono’t understand what’s he is trying to explain . Thanks in advance

    3. @hey man He’s just talking about how he structures his folders and file names. Using the name index.js for all your components saves you a little time when importing them, but it might get confusing should you have multiple tabs open and they are all labeled index.js. You can name your files the way you want. It’s just a preference everyone has and not really related to the course itself. Hope that helped.

  4. code with sahul

    No words to appreciate free code camp,
    You are better than many paid course on the internet,
    Thanks.

  5. 0:00 – Introduction
    0:47 – The App
    3:17 – The Movie DB – API Key
    4:59 – What is React?
    10:39 – Starter Files
    14:06 – Quick about tooling
    15:40 – Bootstrap with CRA
    19:01 – Install dependencies
    24:07 – Copy fils from starter files
    28:24 – Setup API Key and walkthrough of API files
    33:14 – React without JSX
    40:00 – Short about JSX
    42:42 – Crash course in Props and State
    55:02 – Short about Styled Components
    58:13 – Global Styles
    01:07:51 – Header Component
    01:20:59 – Header Component – Styles
    01:25:30 – Home Component – Scaffold
    01:33:35 – Short about built-in hooks in React
    01:38:45 – Fetch data from the API for Home Page
    01:52:34 – Custom hook for Home Page
    01:59:39 – HeroImage Component
    02:11:12 – HeroImage Component – Styles
    02:20:13 – Grid Component
    02:25:56 – Grid Component – Styles
    02:29:34 – Thumb Component
    02:34:49 – Thumb Component – Styles
    02:37:18 – Spinner Component
    02:41:53 – SearchBar Component
    02:57:44 – SearchBar Component – Styles
    03:02:06 – SearchBar Component – Logic
    03:06:41 – Button Component
    03:10:32 – Button Component – Styles
    03:12:56 – Button Component – Logic
    03:19:40 – Short about React Router
    03:21:49 – Routing with React Router
    03:34:05 – Movie Component – Scaffold
    03:36:16 – Fetch movie data from the API
    03:49:28 – BreadCrumb Component
    03:54:39 – BreadCrumb Component – Styles
    03:57:36 – MovieInfo Component
    04:08:31 – MovieInfo Component – Styles
    04:17:25 – MovieInfoBar Component
    04:23:16 – MovieInfoBar Component – Styles
    04:26:28 – Actor Component
    04:31:59 – Actor Component – Styles
    04:34:06 – Short about PropTypes
    04:37:28 – Validate Props with PropTypes
    04:48:07 – Short about SessionStorage
    04:50:22 – SessionStorage – Home
    04:59:24 – SessionStorage – Movie
    05:03:07 – Build and prepare for Netlify
    05:05:48 – Netlify drag and drop and Netlify CLI
    05:10:19 – Netlify Continous Deployment
    05:13:38 – Bonus – Classes – SearchBar Component
    05:21:54 – Bonus – Classes – Home Component
    05:33:04 – Bonus – Classes – Movie Component
    05:40:29 – Bonus – Typescript – Introduction
    05:42:10 – Bonus – Typescript – Bootstrap project and copy files
    05:47:09 – Bonus – Typescript – Refactor base files
    06:04:06 – Bonus – Typescript – Refactor Home and Components
    06:14:45 – Bonus – Typescript – Refactor Movie and Components
    06:25:42 – Bonus – Login – Short about TMDB login and rating system
    06:29:15 – Bonus – Login – Global Context
    06:34:24 – Bonus – Login – Login Component
    06:50:39 – Bonus – Login – Login Component – Styles
    06:53:37 – Bonus – Login – Login from Header
    07:00:17 – Bonus – Login – Rate Component
    07:04:25 – Bonus – Login – Rating from MovieInfo

  6. Daily uploads
    Free
    Helpful

    I really appreciate everything you are doing, stay safe, and keep killing it! Dont stop! Thank you !

  7. Thank you so much for this, I’m switching from Angular to React, 7 hrs of tutorial! awesome!

  8. James Bouchard

    I had to wait until I completed all the steps in the section – Header Component – Styles – for all of the styles to render, so be patient. It works. Thanks for this course. So far, it’s a good intro.

    1. Why does it not render properly until finished? For me, until I finish the section, the logos and content cover half the screen.

  9. Thank you! A fantastic course. Thank you for your effort and for your good work. You are a wonderful teacher.

  10. Harsh Chaudhary

    If the initial timestamp in the description is changed to 0:00 from 0:00:10, YouTube will render them as chapters and it would make navigating between timestamps easier.
    Keep the killer content following…

  11. hereispatrick

    Hi I am a beginner in JS and React. Which package extension for syntax highlighting in VS code would you recommend for this tutorial if any?

  12. Absolutely loving it. Feels like watching Batman Dark Knight’s Bane conducting the course. Thank you @Weibenfalk for this wonderful course.

  13. Thank you for your tutorial! I very much appreciate your effort in creating this 7-hour full React course. I hope you continue sharing your knowledge and keep inspiring others 😀

  14. W.A.L. SilenceDoGood

    Started with FCC years ago, went to a BootCamp well prepared and now am a software engineer, keep up the good work folks 🙂

  15. I’m at 2 hours in. I’d say that this is not beginner friendly, especially if you don’t know anything about React at all before this. It’s easy to get lost and there’re bunch of libraries involved. Not just React. But I think it is good for someone who knew basics and want to solidify the concept with practical website building. He also introduced many nice tools for development. It’s clear that he spent much effort on this course.Thank you!

    1. Robert Underwood

      Maybe bears should stick to eating nuts & berries rather than trying to learn modern web frameworks!

    2. @Robert Underwood why being rude! the guy is being helpful! and FYI, React is not a framework 🙂

    3. Robert Underwood

      @Pritesh Soni what are the most common frameworks used with react?? Like django, .Net, etc..??

  16. Stavros Kefaleas

    Thank you for this content!
    I believe you should change Hero Image background-position to top, because if you leave it as it is, you will not see the head of the actor in many movie pictures!
    Also in Searchbar/index.tsx the setSearchTerm function definition in the type Props object could be (searchTerm: string) => void

  17. It’d be helpful to see a visual mapping of how the myriad imports & exports are relating; it’s way too easy to get lost in the import/export/wrapped/styled/components (‘infinite’ nesting)… can’t see the forest for the trees here;

Comments are closed.