⚛️ Join Profit with React 👉 https://www.cleverprogrammer.com/pwr?utm_source=youtube&utm_medium=yt-description&utm_campaign=fem-all-day&utm_content=17-sep-21-20-hr-react-js-tutorial
⭐ Join the BEST Discord Community for Developers on the planet 👉 https://www.cleverprogrammer.com/discord?utm_source=youtube&utm_medium=yt-description&utm_campaign=fem-all-day&utm_content=17-sep-21-20-hr-react-js-tutorial
🔥Links to download files: https://drive.google.com/drive/folders/1G5RYGvHSj7eXL5m6f7GoyF35a6vxUR1J?usp=sharing
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
#react #webdeveloper #javascript Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships