React 18 Tutorial

React 18 Tutorial
Full Video

Entire Playlist

Source Code

00:00 - Setup
29:43 - Folder Structure
42:08 - First Component
01:05:19 - JSX
01:19:21 - Nest Components
01:25:45 - Booklist
01:36:07 - CSS
01:46:41 - Images
01:54:41 - JSX - CSS
02:01:27 - JSX - Javascript
02:07:54 - Props
02:17:43 - Props - Somewhat Dynamic Setup
02:22:10 - Access Props - Multiple Approaches
02:26:54 - Children Prop
02:33:22 - Simple List
02:41:58 - Proper List
02:48:22 - Key Prop
02:52:30 - Props - Options
02:58:06 - Events
03:17:01 - Form Submission
03:20:45 - Mind Grenade
03:24:05 - Component Feature
03:29:10 - React Data Flow
03:34:52 - Challenge
03:44:01 - ES6 Modules
03:53:50 - Local Images (src folder)
03:59:35 - More Challenges
04:08:30 - Deployment
04:13:53 - useState Hook
05:43:29 - useEffect Hook
06:14:39 - Multiple Returns
07:23:12 - Folder Structure
08:22:17 - Forms
09:23:03 - useRef Hook
09:35:20 - Custom Hooks
09:51:30 - Context API
10:28:11 - useReducer Hook
11:11:49 - Performance

[sangameshkyatappanavar]

- (00:00:00) Setup
- (00:30:18) Folder Structure
- (00:42:43) First Component
- (00:53:10) Extensions and settings.json
- (01:05:54) JSX
- (01:20:06) Nest Components
- (01:26:20) Booklist
- (01:36:42) CSS
- (01:47:16) Images
- (01:55:16) JSX - CSS
- (02:02:02) JSX - Javascript
- (02:08:29) Props
- (02:18:18) Props - Somewhat Dynamic Setup
- (02:22:45) Access Props - Multiple Approaches
- (02:27:29) Children Prop
- (02:34:57) Simple List
- (02:43:33) Proper List
- (02:50:57) Key Prop
- (02:57:05) Props - Options
- (03:02:41) Events
- (03:21:36) Form Submission
- (03:25:20) Mind Grenade
- (03:28:40) Component Feature
- (03:33:45) React Data Flow
- (03:39:27) Challenge
- (03:48:36) ES6 Modules
- (03:58:25) Local Images (src folder)
- (04:04:10) More Challenges
- (04:13:05) Deployment
- (04:18:28) useState Hook
- (05:48:04) useEffect Hook
- (06:19:14) Multiple Returns
- (07:27:47) Folder Structure
- (08:26:52) Forms
- (09:27:38) useRef Hook
- (09:49:55) Custom Hooks
- (10:06:05) Context API
- (10:42:46) useReducer Hook
- (11:26:24) Performance

[franklinmayoyo]

I watched all the small chunks of this tutorial. Indeed John you are the best. I started learning web development exactly One year ago and today am a full stack developer thanks to your tutorials. You made a monster in a very short period of time. I've now polished my React knowledge. Be blessed uncle John ❤️❤️

[codewithguillaume]

Oh my god ! What a TUTORIAL man! Even if I am already coding in react I want to do it

[jealouspotato]

Out of all the coding teachers in youtube that I encountered, you are the best, especially in teaching! Thank you for this update tutorial!

[zubairkhan-cfwe]

Finished your old 10hrs react video and looking for react 18 and just find this one from one of the best teacher

[christophermawela]

Thanks John, Have watched several React videos, detailed explanation now I understand the folder structure, was only browsing through now I will complete this tutorial, by far the best React Tutorial I have watched so...

[DLeRoux]

John, you will always be my favorite teacher. Love your way of just being a dude explaining crap instead of trying to be all corporate and whatnot putting on an act.
You and Paul, you dudes rock. I may want to change my nationality someday and join you two :)

[ebenezeronuche]

Mr John, the way you have helped many of us achieve our dreams of becoming successful developers, it is my desire that everywhere you go people will always be there to help you achieve yours. keep on leading.. we will keep on following...

[nemi]

finished the entire thing. thank you so much

[piyushtyagi]

You are incredible Teacher. I learned react from your previous course on FCC. I was amazing .

[aliquliyev]

It'd be really perfect if you make a detailed React Native course like you did in React 18. I'll look forward to seeing it one day...

[redwansikder]

I started my React journey last year by your 15 react projects video. That video helped me a lot. If anyone will ask me for suggestion about starting React I'll recommend this video from now on.

[kutendasamakande]

indeed Mr John Smilga You are the best teacher ever i came to your channel knowing nothing but now i can develope a website thanks My all time teacher

[shauryagahlot]

00:00 - Setup
29:43 - Folder Structure
42:08 - First Component
52:35 - Extensions and settings.json
01:05:19 - JSX
01:19:21 - Nest Components
01:25:45 - Booklist
01:36:07 - CSS
01:46:41 - Images
01:54:41 - JSX - CSS
02:01:27 - JSX - Javascript
02:07:54 - Props
02:17:43 - Props - Somewhat Dynamic Setup
02:22:10 - Access Props - Multiple Approaches
02:26:54 - Children Prop
02:33:22 - Simple List
02:41:58 - Proper List
02:48:22 - Key Prop
02:52:30 - Props - Options
02:58:06 - Events
03:17:01 - Form Submission
03:20:45 - Mind Grenade
03:24:05 - Component Feature
03:29:10 - React Data Flow
03:34:52 - Challenge
03:44:01 - ES6 Modules
03:53:50 - Local Images (src folder)
03:59:35 - More Challenges
04:08:30 - Deployment
04:13:53 - useState Hook
05:43:29 - useEffect Hook
06:14:39 - Multiple Returns
07:23:12 - Folder Structure
08:22:17 - Forms
09:23:03 - useRef Hook
09:35:20 - Custom Hooks
09:51:30 - Context API
10:28:11 - useReducer Hook
11:11:49 - Performance

[mealiasghar]

Sir John's courses are really addictive God Bless

[michaeldugan]

5 hours in on YouTube. It is so good, I decided to support him by buying the course on Udemy.

[WanKy]

Great tutorial. In useCallback example at 11:44:31 you could use something like const removePerson = useCallback( (id) => setPeople((prev) => prev.filter((i) => i.id !== id)), []);

[BoopeaTech]

This is the best coding tutorial i've ever seen

[ahmetkotanci]

As my promise I will complete this splendor combination of photos put together by god

[abuzardawar]

Dear John,

I wanted to take a moment to appreciate the amazing content on your YouTube channel. Your videos are not only informative but also engaging and entertaining. I truly appreciate the time and effort you put into creating high-quality content for your audience.

Your expertise in React is truly remarkable, and I am grateful for the opportunity to learn from you. I can see that you have a wealth of knowledge and experience, which you are always happy to share with your viewers.

I also wanted to mention that I have taken your Udemy course on React, and I can confidently say that it has been one of the best courses I have ever taken. The way you explain complex topics in a simple and easy-to-understand manner is truly impressive.

Thank you for being such a great teacher, and for sharing your knowledge with the world. You are making a positive impact on the lives of so many people, and I am grateful to be one of them.

Keep up the amazing work, and I look forward to learning more from you in the future!
Best regards,
Abuzar