ReactJS Tutorial for Beginners - Full Course in 20 Hours [2022]

In this tutorial you're going to learn all about:

👉 Functional components in React JS 🔥
👉 Props and States in React JS 🚀
👉 Styling your react apps using Styled Components ✨
👉 Firebase Google Authentication 🔒
👉 Navigating pages using React Router 📄
👉 Firebase storage to store images of a website 🗄️
👉 Real-time databases with Firebase firestore ⚡
👉 Managing states in your applications using Redux ⚛️

and a lot more...

⏲️ Timestamps

00:00 - Tutorial Intro

1️⃣ Tesla Clone

01:30 - Tesla Clone Intro
04:30 - Create React Redux App
07:30 - Starting server & remove unnecessary files from the Project
09:10 - Components break down
10:48 - Create the Header Component
14:17 - Create the Home Page
15:40 - Installing Styled Components & styling the Home Page using Styled Components
18:34 - Create Section Component
22:30 - Style Section Component
26:38 - Create & Style ItemText Component
29:05 - Create & Style ButtonGroup Component
38:57 - Create & Style DownArrow Component
48:01 - Add Media Queries to ButtonGroup Component
49:05 - Using Props to customize Section Components
01:02:25 - Customising the Accessories Section Component
01:03:42 - Short break
01:07:32 - Create and Style the Logo, Main Menu, and Right Menu in the Header Component
01:29:49 - Add React Reveal to the Project
01:31:38 - Animating homepage components using React Reveal
01:33:37 - Create Sidebar Component in the Home Page
01:49:36 - Using UseState to open and close the Sidebar Component
01:57:12 - Adding Transition to Sidebar Component
01:59:05 - Setting up Redux & removing boilerplate code from the Project
02:00:25 - Using Redux to create carSlice
02:06:56 - Mapping carSlice in the Main Menu & Sidebar Component
02:13:15 - Tesla Clone Outro

2️⃣ Disney+ Clone

02:17:22 - Disney+ Clone Intro
02:18:38 - Create React Redux App
02:22:55 - Start server
02:23:49 - Remove Unnecessary Files from Project
02:25:40 - Components break down
02:27:27 - Create Header Component
02:29:13 - Installing Styled Components
02:29:58 - Create Header Component
02:32:17 - Create Home Component
02:34:18 - Build & Style the Header Component
03:09:12 - Build & Style the Home Component
03:21:07 - Create ImageSlider Component
03:23:00 - Installing React Slick
03:25:13 - Build & Style ImageSlider Component
03:49:30 - Build & Style Viewers Component
04:04:35 - Build & Style Movies Component
04:18:19 - Create Detail Component
04:18:57 - Installing React Router DOM and Setting our Navigation
04:24:38 - Build & Style Detail Component
05:00:29 - Build & Style Login Component
05:32:10 - Break
05:39:20 - Build Review
05:41:00 - Installing and Configuring Firebase
05:45:34 - Fetching Movies Data from Firebase using useEffect
05:53:00 - Setup Redux to display Movies Data
06:05:29 - Using movieSlice to store Movies Data
06:09:35 - Using movieSlice to Display Movies in Home Component
06:17:53 - Using Link to route to Detail Component onClick in Home Component
06:23:19 - Displaying data dynamically in Detail Component
06:39:55 - Setup Login functionality using Firebase Authentication
07:16:39 - Deploying App online using Firebase Hosting

3️⃣ Clubhouse Clone

07:21:39 - Clubhouse Clone Build Showcase
07:25:14 - Create ReactJS Project & Install Dependencies
07:27:37 - Remove Unnecessary Files from Project
07:29:26 - Welcome Page
07:35:46 - Style Welcome Page
07:39:24 - Add PlanLayout for more Clubhouse look
07:42:14 - Add Buttons using React Router
07:50:23 - Add & Style PhoneConfirmation Page
08:00:55 - Add Phone Number Input
08:02:58 - Add Navigation Links Throughout the App
08:07:13 - Apply Global Styles on Buttons and Links
08:13:00 - Create Confirmation Screen
08:22:42 - Request Notification Screen
08:39:25 - More Global Styling
08:43:51 - Add Home Screen Header
08:59:00 - Add Home Screen (Rooms)
09:13:34 - Add Rooms
09:32:21 - Add Bottom Buttons & Sheet on Home Screen
10:17:19 - New Room Page
10:51:52 - New Room Bottom Navigators
11:01:44 - Explore Page
11:43:52 - Building the Profile Page & Quick Fixes
12:11:13 - Challenge for YOU!
12:12:41 - Deploy Clubhouse LIVE & Closing Remarks

4️⃣ LinkedIn Clone

12:21:32 - LinkedIn Clone

19:28:52 - Outro

[jayctish]

Big up guys, doing a 20hr full react course ain't a joke. God bless Clever programmers

[noextrasugar]

Love this channel and the energy of the commenters. I'm in my first fulltime job after graduation, it's stressful as I am comfortable in the backend side but my role here is full stack. I struggled a lot in frontend and was searching for some good resources. This channel is definitely helping me connecting the dots of FE. I'm making the amazon clone following this channel and also this react course. Don't get much time after the job, but I utilize my downtimes and breaks as their teaching style is so fun, and enthusiastic. Thank you all the commenters too, I feel a sense of community and you guys give me fuel to get going and excelling in my being a Software Engineer journey. Thank you!

[theabdizumiye]

For those having in running at 4:24:28..there is changes or updates in react-dom where switch is imported as Routes not Switch

[Kalisto]

My God!! this course makes me feel for the first time doing the things rigth. It's really pleasant to see the progress. You're didactics is really really nice!

[adeeshsharma]

This tutorial has provided me more value than my engineering degree just in the first 2 hours, NGL.

Great content! Love it. Appreciate the effort that has gone into making this for the community. <3

[joedimagio]

For those who have problems to import the firebase

Put this :
import firebase from "firebase/compat/app"
import "firebase/compat/auth"
import "firebase/compat/firestore"
import 'firebase/compat/storage'

instead of :
import firebase from "firebase";

at the top of the firebase file

[kitcat]

I've been really sick for a week and missed so many lectures.... I'm still sick but feeling a little better. This came on the right time. I hope I'm able to catch up.

[NarcisMM]

At 6:36:00 I used await on getting the database info rather than Naz' solution, since it seemed more elegant - no need to wrap the entire return statement in the conditional.
Also, I might create a tutorial for those of us who still wanted to use the firestore database, since the database from clever programmer is no longer available and the logic for connecting to firebase 9 is different. If you would have liked to have this when you got to firebase, like this comment, it'd be useful to see how many people would want it.

[sasadhrirao]

For anyone who is adding the image as props, usually around 58:00 minute. the ' ' is actually ``, its matilda which you can find beside the number 1 key.

[vijaykr]

We will love to see using version 20th in ReactJS. It would be a Guinness world record. 😂😂😂

[dotaim]

You are the best online mentor by far, you explain things so good, I legit understand everything for now, you have cleared a lot of confusion why things are done certain way. Much love brother <3

[xarukane]

We all really waited for this. I'm so excited 😄. Thank all of you guys. Good luck 😃

[mohammedhashim]

i cannot wait for this
and in 20 Hours only
man you're a life saver
you owe me a lot if i ever get to make it to the web developing industry
says a man who lives in a developing country now

[theatypicaldeveloper]

great work! This guy is living ahead of time

[hunterg]

This tutorial is amazing! it takes it slow and acutally explains what is going on and how things work. Great job. Keep up the great work

[MrVisheshsingh]

I love the enthusiasm in your teaching Kudos 🙌. This is great content.

[sw_]

For me this is the Guinness world record
Thanx clever programmer ❤️

[theprimecoder]

I'm so excited to watch this all the way through

[diyasoor]

*If anyone is looking for this error* ⬇️
// Error: [Detail] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> //



This error happens because of the new Upgrade of the react-router-dom library.
Use "Routes" instead of "Switch" and do this:
<Route path="/" element={<Detail />} />
This is the solution for the version -> "react-router-dom": "^6.0.2"


Happy Coding! o.o

[AhmedHassan-nlgp]

I've recently learned reactjs but still I am gonna watch this tutorial.
Thanks for sharing knowledge. Appreciated :)