THE BIGGEST REACT.JS COURSE ON THE INTERNET ( PART 1 )

If You Want To Support My Work 👇

Follow Me On 👇

00:00 - Trailer
1:21 - Intro
3:44 - My Personal Request
4:36 - Course Requirements
7:32 - Course Setup
9:01 - Files & Folder Structure
12:15 - Removing Unnecessary stuff
13:38 - What is Component?
15:03 - Component Syntax
15:30 - Creating First Component
18:52 - Components Challenges
23:31 - Multiple Components
25:56 - Multiple Components Challenge
30:01 - What Is JSX
30:43 - Writing JSX
33:45 - JSX Challenges
35:03 - JSX Rules
39:41 - JSX Rules Challenge
41:35 - Expressions In JSX
42:37 - Embedding Dynamic Content
47:54 - Embedding Dynamic Content Challenge
51:42 - Rendering Lists Of Data
59:11 - Rendering List Of Data Challenges
1:05:39 - Props In Action
1:11:32 - Props Challenges
1:15:20 - Children Props
1:17:13 - What is Conditional Rendering In React
1:18:57 - Conditional Rendering In Action
1:24:23 - Conditional Rendering Challenges
1:31:18 - Let's Talk About Styling
1:38:40 - Styling Challenges
1:48:55 - State & Hooks Introduction
1:50:45 - State In Action
2:11:14 - Passing Function To useState
2:18:33 - useState Challanges
2:35:53 - What is React Portal
2:36:30 - React Portal In Action
2:43:32 - Advance Keys
2:46:52 - What is useEffect
2:48:47 - useEffect In Action
3:01:18 - useEffect Challenges
3:07:05 - What is Prop Drilling
3:08:33 - Prop Drilling In Action
3:10:45 - What is Context API
3:11:18 - Context API In Action
3:17:16 - What is useContext Hook
3:19:21 - useContext Challenge
3:27:02 - What is useReducer
3:28:44 - useReducer In Action
3:35:58 - useReducer Hook Challenges
3:43:40 - What is useRef
3:44:07 - useRef In Action
3:47:20 - useRef Challenges
3:51:59 - Custom Hooks Introduction
3:53:26 - Custom Hooks In Action
3:58:08 - What is useId
3:58:21 - useId In Action
4:01:42 - 10 Project For Beginners Setup
4:02:53 - Beginners Project 1
4:05:49 - Beginners Project 2
4:12:18 - Beginners Project 3
4:17:33 - Beginners Project 4
4:24:39 - Beginners Project 5
4:30:00 - Beginners Project 6
4:33:32 - Beginners Project 7
4:38:36 - Beginners Project 8
4:43:26 - Beginners Project 9
4:55:41 - Beginners Project 10
6:45:00 - React With TypeScript Setup
6:46:55 - Types For Props
6:55:16 - Types For Props Challenges
6:58:08 - Reusable Types For Components
7:05:14 - Reusable Types For Components Challenge
7:11:26 - useState Types
7:13:35 - useState Types Challenge
7:24:39 - useRef, Forms, Events Types
7:32:41 - useRef, Forms, Events Types Challenges
7:42:45 - Types For Context API
7:48:16 - Types For useReducer
7:51:58 - Types For useReducer Challenges
7:56:29 - Types For useEffect
8:01:12 - React with TailwindCSS
8:04:42 - Types For useEffect Challenge
8:10:15 - React With DaisyUI
8:14:26 - React with Radix UI
8:17:15 - React With ShadcnUI
8:23:20 - React Hooks Form Setup
8:24:22 - React Hooks Form Basics
8:35:24 - React Hooks Form Advance Project
8:45:30 - Welcome To React 19
8:48:15 - React 19 Setup
8:50:14 - What is USE In React 19
8:50:55 - USE For Fetching Data
8:55:06 - USE With Context
8:58:24 - React 19 Actions
8:58:43 - Let's write some actions
9:04:38 - useFormStatus Hook In React 19
9:05:02 - useFormStatus In Action
9:10:52 - useActionState Hook In React 19
9:11:47 - useActionState Hook In Action
9:17:23 - useTransition Hook In React 19
9:25:24 - React with TypeScript Project 1
9:55:22 - React with TypeScript Project 2
10:37:50 - React with TypeScript Project 3
11:21:20 - React with TypeScript Project 4
12:41:45 - Outro

[huxnwebdev]

😔 Once Again 😔

I've mentioned this in my other courses: if you choose not to support my work, that's completely fine. However, if you're benefiting from my courses, please refrain from downloading them. I put a lot of effort into creating these courses, handling everything from recording and structuring to designing and editing all by myself. It can be frustrating when people download my videos and then reach out to me on Instagram or X with screenshots when they get stuck. I'm not sure how to address that, but anyway, I hope you enjoy the video and stay happy!

COMPLETE REACT.JS COURSE ( PLAYLIST ) 👇

If You Want To Support My Work



00:00 - Trailer
1:21 - Intro
3:44 - My Personal Request
4:36 - Course Requirements
5:52 - What is React.js?
7:32 - Course Setup
9:01 - Files & Folder Structure
12:15 - Removing Unnecessary stuff
13:38 - What is Component?
15:03 - Component Syntax
15:30 - Creating First Component
18:52 - Components Challenges
23:31 - Multiple Components
25:56 - Multiple Components Challenge
30:01 - What Is JSX
30:43 - Writing JSX
33:45 - JSX Challenges
35:03 - JSX Rules
39:41 - JSX Rules Challenge
41:35 - Expressions In JSX
42:37 - Embedding Dynamic Content
47:54 - Embedding Dynamic Content Challenge
50:56 - Lists In React.js
51:42 - Rendering Lists Of Data
59:11 - Rendering List Of Data Challenges
1:04:14 - What are Props in React.js
1:05:39 - Props In Action
1:11:32 - Props Challenges
1:15:20 - Children Props
1:17:13 - What is Conditional Rendering In React
1:18:57 - Conditional Rendering In Action
1:24:23 - Conditional Rendering Challenges
1:31:18 - Let's Talk About Styling
1:38:40 - Styling Challenges
1:44:29 - What are Events In React.js
1:48:55 - State & Hooks Introduction
1:50:45 - State In Action
2:11:14 - Passing Function To useState
2:18:33 - useState Challanges
2:35:53 - What is React Portal
2:36:30 - React Portal In Action
2:43:32 - Advance Keys
2:46:52 - What is useEffect
2:48:47 - useEffect In Action
3:01:18 - useEffect Challenges
3:07:05 - What is Prop Drilling
3:08:33 - Prop Drilling In Action
3:10:45 - What is Context API
3:11:18 - Context API In Action
3:17:16 - What is useContext Hook
3:19:21 - useContext Challenge
3:27:02 - What is useReducer
3:28:44 - useReducer In Action
3:35:58 - useReducer Hook Challenges
3:43:40 - What is useRef
3:44:07 - useRef In Action
3:47:20 - useRef Challenges
3:51:59 - Custom Hooks Introduction
3:53:26 - Custom Hooks In Action
3:58:08 - What is useId
3:58:21 - useId In Action
4:01:42 - 10 Project For Beginners Setup
4:02:53 - Beginners Project 1
4:05:49 - Beginners Project 2
4:12:18 - Beginners Project 3
4:17:33 - Beginners Project 4
4:24:39 - Beginners Project 5
4:30:00 - Beginners Project 6
4:33:32 - Beginners Project 7
4:38:36 - Beginners Project 8
4:43:26 - Beginners Project 9
4:55:41 - Beginners Project 10
6:45:00 - React With TypeScript Setup
6:46:55 - Types For Props
6:55:16 - Types For Props Challenges
6:58:08 - Reusable Types For Components
7:05:14 - Reusable Types For Components Challenge
7:11:26 - useState Types
7:13:35 - useState Types Challenge
7:24:39 - useRef, Forms, Events Types
7:32:41 - useRef, Forms, Events Types Challenges
7:42:45 - Types For Context API
7:48:16 - Types For useReducer
7:51:58 - Types For useReducer Challenges
7:56:29 - Types For useEffect
8:01:12 - React with TailwindCSS
8:04:42 - Types For useEffect Challenge
8:10:15 - React With DaisyUI
8:14:26 - React with Radix UI
8:17:15 - React With ShadcnUI
8:23:20 - React Hooks Form Setup
8:24:22 - React Hooks Form Basics
8:35:24 - React Hooks Form Advance Project
8:45:30 - Welcome To React 19
8:48:15 - React 19 Setup
8:50:14 - What is USE In React 19
8:50:55 - USE For Fetching Data
8:55:06 - USE With Context
8:58:24 - React 19 Actions
8:58:43 - Let's write some actions
9:04:38 - useFormStatus Hook In React 19
9:05:02 - useFormStatus In Action
9:10:52 - useActionState Hook In React 19
9:11:47 - useActionState Hook In Action
9:17:23 - useTransition Hook In React 19
9:25:24 - React with TypeScript Project 1
9:55:22 - React with TypeScript Project 2
10:37:50 - React with TypeScript Project 3
11:21:20 - React with TypeScript Project 4
12:41:45 - Outro

[tyengineer]

Holy crap brother this is insane! I am beyond stoked to watch this! I'm a senior software engineer and have been coding in React since its inception, so let me be the first to say, so far great job! I'm at the 3 hour mark and just wow people need to support this man he's a rare one for sure 🙌🏼💯

[anshumansingh]

00:10 Comprehensive React.js course covering fundamentals, advanced topics, and project-based learning
03:29 Prerequisites for the course
07:16 ReactJS allows building websites, mobile apps, desktop apps, and more
09:01 Understanding the project folder structure in React.js
12:50 Components in React.js are independent, reusable bits of code.
14:50 Creating components in React.js
18:19 Creating React components with proper naming conventions and returning HTML
19:57 Creating components for navigation, banner, sidebar, and appearance
23:14 Refactoring code to use arrow functions and creating components
24:53 Creating and using components in React.js
28:02 Creating navigation with anchor tags
29:42 Understanding JSX in ReactJS
33:12 Introduction to JSX in ReactJS and creating components
34:57 JSX rules for React components
38:18 Rules to follow when working with JSX in React.js
39:56 Creating a JSX rules component with JSX attributes
43:19 React.js compiler interprets JavaScript code.
45:05 Creating functions in JavaScript for multiplication
48:21 Creating components to render content dynamically
50:01 Rendering product information dynamically in React.js.
53:17 Understanding the importance of the unique key prop in React.js
54:56 Providing unique keys for elements in React.js arrays
58:12 Destructuring properties from an array in React.js
59:49 Creating and iterating over a user array in the React component
1:03:03 Understanding React.js map method and passing props from parent to child components
1:04:45 Passing data from parent to child component using props
1:08:03 Rendering props in React.js
1:09:46 Passing data from parent to child component
1:12:57 Rendering name and edge with props
1:14:38 Passing data from parent to child component
1:17:55 Rendering UI based on condition using Ternary Operator
1:19:34 Rendering components based on conditions
1:22:49 Conditional rendering based on the items in the card
1:24:25 Create conditional rendering for weather, user status, and greetings components.
1:27:53 Creating user status JSX component
1:29:38 Creating conditional rendering in React.js
1:33:05 Styling properties in React.js
1:34:42 Styling components using an inline, separate object, and index.CSS file
1:37:52 Styling challenge - creating style card and profile card components
1:39:37 Styling in React using inline CSS and objects
1:43:11 Creating and using custom icons in React
1:45:00 Attach event handler for button
1:48:21 Introduction to state and hooks in React JS
1:50:04 Introduction to use state hook in React.js
1:53:18 Creating a button to change the initial state value.
1:54:52 Using the set method is necessary for updating the state in React.js
1:58:08 Updating, cloning, and removing data in React.js arrays
1:59:41 Updating specific friends using React.js state
2:03:10 Refactoring code to use shorthand object notation for setting ratings
2:04:46 Rendering movie elements and handling state changes in React.js
2:08:26 Sharing state between components using props
2:10:14 Updating parent component from child
2:13:41 Creating a random number function and rendering it in the React component
2:15:23 Implementing state management with useState and local storage in React component
2:18:47 Creating components and managing state with useState
2:20:24 Creating a counter using React.js with initial value and state manipulation.
2:23:42 Creating a function to handle form submission
2:25:15 Updating and binding functions for input fields
2:28:27 Implementing profile information and handle change function
2:30:07 Creating a shopping list and form UI
2:33:31 Creating a new item and converting quantity to a number
2:35:11 React Portal allows rendering child components outside parent
2:38:44 Creating a callback function with set copy set to false and 2 seconds delay.
2:40:29 Using React Portal for rendering content to different places in the DOM
2:43:49 Creating dynamic content using React
2:45:29 Using key to make React elements unique
2:48:46 The use effect hook runs code on component render and data change.
2:50:23 Using the useEffect hook in React.js
2:53:52 Callback function firing based on component state changes
2:55:35 Avoid wrapping hooks inside conditional rendering for proper functionality
2:58:49 Fetching and rendering data using React.js
3:00:36 Using the useEffect to fetch data and update component on mount and state change.
3:03:57 Creating dynamic UI and fetching data
3:05:41 Fetching and storing data with React
3:08:55 Passing data between React components
3:10:31 Context API allows sharing state across components without manual prop passing.
3:13:42 Importing and using context in React components
3:15:12 Creating and passing data in React component
3:18:26 Using useContext to manage data and eliminate callback functions
3:20:08 Setting up user context with create context and useState in React.js
3:23:33 Fixing context error and creating user provider and update user component
3:25:19 Implementing input field and update button functionality
3:28:47 Using useReducer hook in ReactJS
3:30:31 Using dispatch function with action types
3:33:52 Using rules to change state and dispatch function in React.js
3:35:29 Using useReducer to manage a simple counter with increment and decrement actions.
3:39:01 Setting up useReducer and useState in ReactJS
3:40:42 Create functions to handle increment and decrement operations along with input field manipulation
3:44:09 Using useRef hook in React.js component
3:45:39 Manipulating HTML elements and focusing input fields
3:48:43 Creating a function to focus on input field when button is clicked.
3:50:22 Implementing timers using setInterval in React.js
3:53:34 Code refactored using custom hook
3:55:06 Creating a custom hook for fetching data
3:58:09 Use ID hook in React.js generates unique IDs.
3:59:48 Adding unique IDs to input fields using prefixes
4:03:05 Setting up counter with basic styling
4:04:33 Creating increment and decrement buttons for counter functionality
4:07:44 Implementing form submission functionality
4:09:17 Rendering content to UI and creating dynamic list of todos.
4:12:38 Setting up the project and importing necessary libraries.
4:14:09 Fetching and Displaying Data from API
4:17:24 Creating a calculator using React.js
4:19:05 Creating a clear function for input field.
4:22:22 Explanation of how the calculator function works using variables and a method
4:24:10 Executing JavaScript from a string is a security risk
4:27:33 Creating and styling elements in React.js
4:29:09 Changing colors based on background and button style.
4:32:40 Changing background color and setting show input to false
4:34:26 Creating and using testimonials and UI
4:37:41 Implementing next and previous buttons for product navigation
4:39:14 Creating and using Accordion component in React.js
4:42:31 Creating an accordion component in React.js
4:44:14 Creating multiple state variables for username, email, password, confirm password, errors, and color
4:48:06 Creating input fields for email and password with error handling
4:49:52 Creating input fields and button with event handlers
4:53:39 Setting password requirements and validation process
4:55:37 Creating a project using ReactJS without backend services
4:58:56 Filtering and displaying products with React.js
5:00:33 Setting up the project environment with React.js
5:03:53 Setting up components and importing dependencies
5:05:28 Creating navigation section and components.
5:09:10 Creating a sidebar with various folders and categories
5:11:08 Setting up folder structure and basic JSX elements for navigation section.
5:14:57 Adding React icons and styling the UI
5:16:41 Styling navigation container using CSS properties.
5:20:24 Creating a card section with image and details
5:22:11 Adding new price and styling the component
5:25:53 Troubleshooting import error in React.js component styling
5:27:45 Refactoring code and rendering items
5:31:11 Styling buttons and title with recommended classes
5:32:53 Creating a sidebar component with CSS file
5:36:20 Styling with Flexbox and margins
5:38:05 Creating and styling checkboxes and labels in React.js
5:41:49 Styling the checkbox and label container
5:43:38 Creating a white circle with border radius and adding a line
5:47:13 Refactoring the color component and updating color categories.
5:49:09 Refactoring code to separate components for better organization.
5:52:38 Demonstrating refactoring and reusing components.
5:54:22 Improving code reusability and planning for future refactoring.
5:58:02 Import and iterate over data from the DB folder
5:59:46 Handling filtering and radio filter in React.js

[chaitanyaswaroop]

Bro!! You are one of the most hardworking guys on YouTube. Thanks for everything man!!

[himanshugusain]

My man you are the most passionate human i have ever seen, making such course is no joke to teach and share the knowledge

[danimusbar]

I never skip the Ads show from every Your tutorial in YouTube 😊

Thankyou for your effort, AWESOME

[gime]

If this course lands me my entry job, I swear I'm coming back and donating to you a big gift. 🙏

[maestrogoldring]

Bro dropping 12 hours as a part one like it’s no big deal 💎
By the way, thank you for adding typescript. More and more I see that typescript is asked for in job descriptions but it’s not often taught in tandem with React. You’ve earned a “Epic Thank You of Gratitude +100”

[AkaBilla-ox]

Your content is better than any subscription. Hats off for your hardwork. Thanks ...!!

[b__yag]

u are the definition of developer angel

[deniswastaken]

The grind never stops, thanks mate, will immediately start watching it right now, just after looking at the inclusion of all the libraries, I am feeling pretty hyped up, thanks mate :)

[Abhishekvictor-ed]

Today is the date October 26 2024 and I started learning web development and I saw your channel you have posted lot of free stuff which is so helpful even I buy lot of courses that will not provide that much information which you provided in free version so I highly appreciate you one day I will get the job and I will come back to you channel and
I will do from my side what I can do the best wait for me 4:53

[KrisztianKiss-jw]

I’ve just started this video but man, I feel like I just have to say thank you right away. You are awesome. Now back to the video

[SeRoShadow]

38:05 for anyone confused
className attribute is used to assign CSS classes to JSX elements

[skalijan]

It is looking like you are on mission to teach a single thing of react, thank you so much sir ..

[englishspacitel]

Dude sorry for my language but YOU JUST BROKE THE F*CKING INTERNET! i WILL WATCH EVERY SECOND OF THIS ON YT TO SUPPORT YOU BRO.

[AwkwardCompilations]

I've seen your many videos and your one of my top 5 favourite teacher on YouTube. I started react 2 weeks ago on coursera.
Thanks for the everything.
Sending love from Kashmir 🇮🇳

[priyanshuganatra]

Loved it! I'm yet to watch part 2, but I hope when I'm done with part 2, the part 3 would've been uploaded!

[imagination]

Can't wait to see next part. 2 hope there will gonna be also nextjs included in that as well

[MuhammadUsman-ezj]

bro your course is the best. I am currently at 2 hour but I gotta say you teach far better than the others. thanks for this free course. GOD bless you.