watermark logo

6 Views· 16 August 2022

React JS Course for Beginners - 2021 Tutorial

Advertisement


MaggieN383
Subscribers

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: https://github.com/weibenfalk/....react-rmdb-v3-starte

Course from Thomas Weibenfalk. Check out his channel: https://www.youtube.com/channe....l/UCnnnWy4UTYN258FfV

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

Show more


Up next

Advertisement


0 Comments