React Tutorial - Fundamentals, Hooks, Context API, React Router, Custom Hooks

Complete React Tutorial (inc. Hooks, Context API, React Router, Custom Hooks)

Products I Use:

Books I Recommend:

Disclosure: This video is not sponsored. Some links above are affiliate links, and l may earn a small commission from any purchases at no additional cost to you. Thank you for supporting my channel!

Timeline
Intro 00:00
About React 01:09
Goals 06:51
Structure 08:50
Course Requirements 09:46
Dev Environment Setup 11:45
Text Editor Setup 16:26
Command Line Basics 18:20
NPM Basics 25:00
Create-React-App 35:07
Install Create-React-App 37:05
Folder Structure 43:19
Clean Boilerplate 52:25
First Component 54:00
Text Editor Setup 1:04:13
First Component In Detail 1:12:29
JSX Rules 1:19:18
Nested Components And Tools 1:28:55
Mini Book Project 1:34:50
CSS Basics 1:42:59
JSX Css 1:54:41
JSX Javascript 2:01:31
Props 2:09:30
Props Destructuring 2:25:41
Props - Children 2:29:44
Simple List 2:36:13
Proper List 2:45:12
Key Prop And Spread Operator 2:52:49
Event Basics 2:58:52
Import And Export Statements 3:11:12
Free Hosting 3:23:25
Advanced Intro 3:28:22
Get Starter Project 3:30:42
Install Starter 3:31:35
Starter Overview 3:33:43
UseState - Simple Use Case 3:39:00
UseState - Basics 3:48:44
General Rules Of Hooks 4:00:47
UseState - Array Example 4:03:39
UseState - Object Example 4:17:27
UseState - Multiple State Values 4:23:00
Simple Counter 4:26:17
Functional Update Form 4:32:10
Matching Project 4:44:55
useEffect - Basics 4:47:27
useEffect - Conditional 4:57:47
useEffect - Dependency List 5:01:40
useEffect - Cleanup Function 5:07:13
useEffect - Fetch Data 5:19:24
Multiple Returns 5:31:29
Multiple Returns - Fetching Data 5:37:09
Short - Circuit Evaluation 5:52:07
Ternary Operator 6:02:50
Show/Hide Component 6:11:30
Form Basics 6:20:15
Controlled Inputs 6:28:53
Add Item To The List 6:38:09
Multiple Inputs 6:50:32
useRef 7:06:29
useReducer - UseState Setup 7:16:20
useReducer - Refactor 7:29:52
useReducer - Add Item 7:37:15
useReducer - Remove Item 7:53:14
Prop Drilling - 8:00:56
Context API / - useContext 8:14:36
Custom Hooks - useFetch 8:26:22
PropTypes - Setup 8:38:09
PropTypes - Images 8:47:48
PropTypes - Default Values 8:55:48
React Router Intro 9:00:41
React Router - Basic Setup 9:05:52
React Router - Error And Switch Component 9:15:50
React Router - Links 9:18:51
React Router - URL Params And Placeholder 9:23:22
React Optimization Warning 9:37:51
useCallback 9:49:50
useMemo 9:58:00
useCallback - Fetch Example 10:04:15

[zalodias]

You're the only tutor on YouTube that I will happily spend 10 hours hearing. The way you inject humor in your teaching really makes it so much easier, and I believe it is what sets you apart from the rest.

[mdirshath]

I 've seen your HTML CSS Tutorial, JavaScript Tutorial and now finished react tutorial as well, now on my way to learn node and express. Thank you so much for the free content sir. I cannot afford to pay you now. After getting my job i will buy all your courses. Best Teacher ever. I wish you a happy and healthy life.

[hassanogunniyi]

I'm really kicking myself for not finding this sooner... Best React Tutorial ever and it's freee

[iredits]

if all teachers were like him the world would be a better place

[cbclapp]

I seriously couldn't listen to a single person talk as long as I have listened to you without getting frustrated because they don't explain things as well as you do and as in depth. You're very verbose and you say things multiple times and talk about each piece and I appreciate that. Everyone else just brushes over things. I think what you've done here is not only set us up to follow along and learn but to look back at individual pieces that we don't understand. The structure of the tutorial starter-code is perfect for that and labeled for it, so when I say "Oh man how do I use such and such technique?" I just go and look for the exact name of that technique in the folder.

Thank you for this amazing course.

[Vasko]

I almost never comment on a videos, but...

I have to say this: THIS IS BY FAR THE MOST USEFULL TUTORIAL ON REACT EVER!!

This is pure gold dude!!!

[ahmedessam]

The best instructor i have ever seen.
All love from Egypt 🇪🇬

[tejasnikam]

This guy giving his important time to teach us just for free We are really grateful heads off to you !!!!

[siemen_subbaiah]

So, I just started learning react.
Yesterday I first saw traversy media's crash course... and then boom!
Look at John with a 10 hour course!
Thank you so much!

[vgname]

When John says this is a "COMPLETE React course" it means the course is actually COMPLETE. Teachers like John can be counted on one hand. This channel is a gold mine and I'm not just talking about node or react projects.
John you deserve more visibility, for some time now when I'm asked for advice on topics you've already covered I redirect people to your channel because I know in advance that they will find all the answers to their questions they have now but also answers to all the questions they will ask themselves in the future. Keep it up!
And I say, for all the topics that John has covered, this is the best channel.

[chirag_soni_]

I just don't have words to express how grateful I am.

[tomaszstec]

I really need to say this: I finished many tutorials (TM, Academind, WDS, Scrimba, FCC and more...) - but courses made by this guy are the most valueable, he teaches in the way I really get full understaning. So... thank You John Smilga.

[AbhinavSushanthG]

It's so hard to find an exhaustive react tutorial based on the new functional components and hooks, since majority of other tutorials still use the older class based, and instead just add a tiny 1 hour section at the end of their old tutorial on hooks. But John's is all hooks based on the latest React features. Thanks John for this amazing tutorial.

[neerajdighade]

finally, I was able to understand react...please do the same for node.

[kelvinkamau]

Hats off, thank you Sir. Service to humanity is service to God.

[brad]

John Smilga is the greatest tutor on Youtube, I have watched Dev Ed, traversy media etc, but I keep coming back to John's channel because he explains everything so well and in detail and in the right phase that it really sticks and also very interesting!

[benatakaan]

Best instructor on the planet! I am about to graduate from a 6-month bootcamp at a very reputable(and equally overpriced) school, yet I have learned more from your youtube tutorials/projects in the past month than I learned from my bootcamp in five frustrating months! People give up on learning programming so easily because there are very very few people like you who truly understand how to teach this shit! We are so fortunate to have you! Thank you!!!

[mohameddekow]

I'm about to finish the 10 hour javascript fundamentals...this guy is a great tutor 🥰

[floydfernandes]

I'm going to watch one hour of this course for the next 10 days starting from today.

[SimPwear]

You're untouchable when it comes to breaking complex topics down. Your tutorials have helped me grow as a developer and gave me confidence. Thank you so much for the great work you're putting out.