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
Has anyone noticed free code camp has been absolutely KILLING it (even more than usual) ever since quarantine last year?!
Truly thank you guys!!
can you please provide the link to the zip files? please?
@JAMIU KOLAWOLE Absolutely YES!. When I landed in my first I’m going to support them monthly. Thank you so much guys! :’)
@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?
I would give them more credit if they actually replied to comments.
@Almighty Prajapathi LMAO imagine using angular lol
Really enjoying this course! Thanks for all the hard work that’s gone into it!
awesome! I love tuts like this, you build everything from ground up.
Hello Sir
Thanks for this wonderful course, excited to start learning
Have one question before going in- Is Functional components used in this course
If you like my stuff and want to support me. Please follow me on my own channel =) http://www.youtube.com/weibenfalk
@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
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
@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.
@E V thanks for replying man , cleared my doubt π€
thank you so so much for making this available!
No words to appreciate free code camp,
You are better than many paid course on the internet,
Thanks.
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
thinks
Daily uploads
Free
Helpful
I really appreciate everything you are doing, stay safe, and keep killing it! Dont stop! Thank you !
Thank you so much for this, I’m switching from Angular to React, 7 hrs of tutorial! awesome!
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.
Why does it not render properly until finished? For me, until I finish the section, the logos and content cover half the screen.
Thank you! A fantastic course. Thank you for your effort and for your good work. You are a wonderful teacher.
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…
Hi, I am having some problems while working on this project, can you help me : )
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?
Absolutely loving it. Feels like watching Batman Dark Knight’s Bane conducting the course. Thank you @Weibenfalk for this wonderful course.
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 π
You’re a great teacher. Thank you so much.
Started with FCC years ago, went to a BootCamp well prepared and now am a software engineer, keep up the good work folks π
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!
thank you very much!
Maybe bears should stick to eating nuts & berries rather than trying to learn modern web frameworks!
@Robert Underwood why being rude! the guy is being helpful! and FYI, React is not a framework π
β@Pritesh Soni I’m just poking the bear π
@Pritesh Soni what are the most common frameworks used with react?? Like django, .Net, etc..??
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
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;