React Crash Course for Beginners - Learn ReactJS from Scratch in this 100% Free Tutorial!

Get Started with React.js and learn how to build amazing websites with ReactJS! Full Project included, 100% free!
🖥️ Official Website & Courses
academind.com/courses/
👨‍💻 Bestselling React Course
acad.link/reactjs
📝 Further Resources
React vs Angular vs Vue: academind.com/tutorials/angul...
REST API with NodeJS: academind.com/tutorials/build...
Connecting SPAs to Databases: academind.com/tutorials/conne...
What is State?: academind.com/tutorials/what-...
👋 Social Media
/ maxedapps
/ academind_real
/ academind_real
/ academindchannel
💬 Academind Community on Discord
/ discord
----------
Timestamps:
Introduction 00:00
What is React 00:27
First React Code 04:15
Building SPAs 11:40
React Alternatives 13:41
Creating a React Project 16:48
Setting Up a Code Editor 25:03
Diving Into the Created Project 28:07
How React Works & Understanding Components 34:38
More About Components & Styling with CSS Classes 42:15
Building & Reusing Another Component 47:50
Pros & Dynamic Content 55:09
Handling Events 1:00:27
Adding More Components 1:07:07
Introducing State 1:12:48
Event Props 1:21:07
Adding Routing 1:28:15
Adding Links & Navigation 1:45:07
CSS Modules 1:50:28
Outputting Lists 1:56:14
Adding More Components´2:02:04
Props Children 2:11:52
Adding a Form 2:20:31
Getting User Input & Handling Form Submission 2:29:30
Preparing the App for HTTP 2:39:15
Sending a Post Request 2:46:07
Navigating Programmatically 2:51:25
Getting Started with Fetching Data 2:55:07
useEffect 3:04:32
Introducing React Context´3:14:40
Context Logic & Different Ways of Updating State 3:25:43
Using Context in Components 3:31:37
More Context Usage 3:43:48
Summary 3:50:42
----------
Code Files & Snapshots:
Vanilla JS vs React Project Code: github.com/academind/react-co...
Style Files & Dummy Data: github.com/academind/react-co...
Code Snapshots: github.com/academind/react-co...
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

[@ChristyThomas07]

1:40:20 latest version of react-router-dom does not need a "switch" and the structure is different. The code will look like this. is encapsulated in and "exact" is not needed.

[@mtycoder]

THANK YOU!

[@jwfa6695]

This needs more upvotes.

[@therdeantube]

Remember to add Routes to the import { Route } from 'react-router-dom';

[@minimeh6693]

Hero! 👍

[@minajay4530]

Thank you!

[@kameshkotwani]

It will take me 2-3 days for me to learn your name, luckily I can learn react in 3 hours! Yay!

[@VYeS269]

Lol

[@bilalrasheed8272]

Same here 😂

[@engineerlawalhamzatademola4267]

😂😂😂 honestly, I don't even bother to pronounce it, I only refer t him as Academind 😂

[@HrissW]

Can u build this projects by yourself w/o tut

[@Stevedeniese]

For those getting this error: Attempted import error: 'useHistory' is not exported from 'react-router-dom'. useHistory is now replaced with useNavigate e.g. 1. Change the Import to: import { useNavigate } from "react-router-dom"; 2. Set your const variable as: const navigate = useNavigate(); 3. Replace history.replace("/") with: navigate("/", { replace: true });

[@tether23]

A God walking amongst mere mortals.

[@Triple._.A]

Thank you so much!

[@codingwithhani7449]

Thankyou :)

[@adeniyiadesanmi7897]

This is same for Switch, It has been replaced with Routes

[@tekskilldev8310]

Thank you Steve, help much appreciated.

[@bobDotJS]

Max singlehandedly contributed more to my career, skills, and ultimately- quality of life. I love this guy like a brother and I've never even met him. Keep changing lives my man!

[@avinashmurmu9070]

Just completed this 4 hour long course, took me 2 days to fully grasp it. Man I gotta say nobody's explaining the way he is. Thank you so much ❤️🔥🔥

[@kuldeepbhatt8475]

then try stephen grider

[@kuldeepbhatt8475]

@@rortan no, actually he is on udemy. Traversy is good too. I usually watch bunch of them like deborah kurata, John papa, grider and much more. Max is good at introduction and fundamentals but for intermediate and advance you need to diversify.

[@akaypee12]

Hello How did you do the CSS part just started it though

[@pioleonardo]

I agree! I really understood it. The way he explains things is exceptional. Very clear and concise!

[@adetayoazeez5789]

@@osamahashim smilga is awesome 👌

[@johndivine8068]

Your mode of explaining complex stuff thus making them easy truly makes you different and the best yet Max.

[@TacoStanMan]

Of all of your content, my favorite parts are when you illustrate common mistakes - especially those that would otherwise be logical in JS - and concisely yet comprehensively explain why the mistake does not work with React. That alone has saved me what likely would have been hours trying to figure out why XYZ is not working. Great tutorial, I hope you continue creating content!

[@dev.regotube]

It took me a few days to complete this video, but I finally finished! Very very informative, I think this is one of the best react tutorial on planet Earth

[@ShereefHisham]

Finally done with the course. This was one of the best tutorial I have ever seen. Very comprehensive and to the point. No time wasted. Complete example. Everything I was looking for in a crash course. Thank you Maximilian

[@karanacharya18]

Fantastic tutorial! One update: @2:51:25 (Navigating programmatically) useHistory is now replaced by useNavigate. Instead of: const history = useHistory() history.push('/') We now use: const navigate = useNavigate() navigate('/')

[@crazystories221]

Ok

[@MrValiantrobe]

Thanks, saved me a lot of searching

[@ibrahimshifau588]

@@MrValiantrobeàYYYyyyyyy3uzfg8gu88g8z8uz8878zz8

[@tenc6491]

Hi there! Just came across your channel while I was looking around for React tutorials. Honestly, I was blown away by your teaching skill. Immensely informative, crystal clear explanation and great dedication in making sure your viewers understand what you're trying to say. I am happily subscribing to your channel in order to learn more. Man, now I feel pumped up! Thank you mate!

[@itchyJaw]

if you got stuck in router part which is here 1:40:40 the problem is we get a blank page and no error code. SOLUTION: import { Routes, Route } from 'react-router-dom'; import AllMeetUpsPage from './pages/AllMeetups'; import FavoritesPage from './pages/Favorites'; import NewMeetUpPage from './pages/NewMeetup'; function App() { return ( ); } export default App;

[@ronnelrodriguez8312]

Thanks for this man! I lost almost an hour figuring this out lol.

[@AustroPower]

Can't thank you enough Max, your content is great! Love to see passionate and dedicated ppl like you 💪

[@fadibakour7936]

This was simply awesome, I just watched the entire video in one sitting, the explanation was clear, the topics where almost everything you need to start with react, thank you so much for this video.

[@adeniyiadesanmi7897]

I have watched other tutorial videos, but none is as good as this. He really explained everything from scratch, and made me fall in love with react.

[@Miguel-ox8jb]

I've been dragging through react courses and most of them were boring and very little on hands, this fits all my needs and I highly recommend it! Loved it. Cheers!!

[@Hiruma_]

I am just an hour into the tutorial and I can already say that this is by far the best beginner tutorial on React I have seen until now. You truly start from zero unlike many other people which makes it easy to follow you. Thank you so much in advance. Now I'll continue watching...

[@achiyazigi3869]

ive used react for couple of project and still took your curse. i was shocked to discover some of the topics you covered as it could save me a lot of time if i was familiar with it. especially the create&use context as well as useRef + routing and preventDefault. thank you very match! hope to see some react bootstrap kicking in in the next curse!

[@JT-sz7ik]

Hands down the best beginner React tutorial on KZbin. This helped me a lot to do a quick revision of the basics!! Thanks a lot for such amazing content.

[@stevenpalm9484]

Excellent job, made me go buy the full course. Thank you for your clear style with plenty of background as to why you are doing it right alone with actually doing it. Very helpful.

[@studentcse1309]

I love it when acknowledged you took a long time explaining the set up because you really want us to understand what is going on instead of juts throwing a bunch of code at us, expecting we understand what is going on. That right there is why you are the best person to learn this stuff from. Most tutorial creators out there just tell you to follow along, which is great except you could not replicate that on your own and its very frustrating.

[@nathanielcolbert9070]

For anyone that had an issue setting up the Routes, the way you write the code was changed in v6 of Routing. The new syntax is like this: This update takes care of the whole switch issue btw, so that code is unnecessary.

[@TheRiterislt]

[@youssefel-sebaie8098]

thanks !!

[@pascaruionela9526]

Thank you!!!

[@pascaruionela9526]

@academind, please pin this comment!

[@reminderclips]

Mine is keep showing a blank page, have any of you guys encountered the same problem?

[@dennosgil6567]

Looked around for a starting Point in my React journey (for a new job) and NEVER thought I would come across a tutorial that explains the basics/fundamentals as great as you have done here.. Especially taking the time to explain every single thing you did, and because of this to be able to follow you so easily.. much appreciated! I have worked with Angular for a few years already so I had much of this already down, but even for ppl that just start out with frontend developing it's a great vid! Thank you for making this, great job, insanely well done!

[@cedrics7374]

I love your teaching style, very clear and you left nothing major unexplained. Thank you!

[@James_XXIY_crafts]

Only an hour in and I have to say massively thank you, for talking to me like I am a child, because when it comes to this type of coding, I am, most other tutorials expect you to already know what they're teaching you, so this is exactly what I need, thank you so much. ❤

[@melincognito9560]

Took a few days to get through to fully grasp everything but this was great content explaining the fundamentals for a beginner to React.... This is exactly what I was looking for, thank you. Will be moving forward to more advanced topics :)

[@besmirgjata8322]

Wooah this short course was awesome. Strictly on point. Thank you Max.

[@ShanilPanara]

This is such a great course, coming from someone who's dabbled before without ever taking time to understand what things actually mean, got explain things so well! Thank you 💜

[@lionelrynjah8021]

The Best React Js crash course I've ever seen. Truly recommendable.

[@kashmirtechtv2948]

The best tutorial I ever had watched and practiced. He tells everything so patiently that we don't need to look again and again. 👌👌👌❤️

[@njoy2075]

I have his react course of about 32 hrs. Believe me as per him this is just a summary of what is there in react😅

[@kashmirtechtv2948]

@@njoy2075 but I didn't buy that because of class based comments

[@njoy2075]

I have his node and react course.. both are really awesome!! Very hands on and step by step

[@kevyyar]

@@kashmirtechtv2948 it's been updated using functional components

[@philosophicalninjagenericl3793]

This is by far, the best tutorial I've seen on react. It's also one of the only up-to-date ones.

[@stanimirnikolov159]

A great walk-through and tutorial. A really clear way of explaining the fundamentals of React.

[@eminm6383]

This an absolute masterclass. I was always doubtful to buy your courses on udemy but after watching this, I ll have no doubt from now on.

[@ahmadimamadyan1396]

I even regret after buying max's react course. Many students feel the same and complain but no follow-up from max

[@radhikav2911]

I have purchased your udemy course but not able to finish the course due to its length. But this one is awesome. All main points included with decent explanation. Thank you max

[@joseperazah.2596]

Amazing crash course: Your content is a cut above the rest when it comes down to breaking things into the simplest possible terms!

[@lizalmeida845]

Wanted a refresher on React and this was amazing to follow. Thank you!

[@SadDamniT]

After this video I am going to start learning React right away. Thank you for this!

[@kensutherland3940]

By far, the best React tutorial I've ever seen (on any platform). Max is incredibly thorough and explains each bit of code beautifully. I would recommend any developer who is new to REACT to watch this video.

[@noji7603]

I really appreciate this crash course! You're a remarkable instructor. Thank you so much!

[@waqasahmed8660]

Very well explained and presented. Your voice and pronunciation is so crystal clear that I never have to rewind to listen. Thanks for the amazing tutorial. Loved it !!

[@TheCesarGarciaITPro]

Just started learning React a few weeks ago. Great starting training to get anybody going. Hope to start the full training class soon.

[@Wlodixpro]

Its way easier if you know other lanuagues or at least JS, personally i have not touched js and understood pretty much everythig (which doesnt mean i could easily replicate it because its a lot info to take in) but it certainly will help me in my future project

[@armanmasangkay6513]

Very clear and understandable. I like how you explain small things that adds context to what you are doing. Great job!

[@galievramil1169]

A few rather difficult concepts been explained awesome and deep! Great job, Man!

[@abhishekpandey8766]

I have completed an hour tutorial so far and this course is awesome! very clear and to the point. Thanks Academind.

[@sanashaikh3238]

If experiencing blank page , in routing ( 1:28:29 ) use following method because latest version of react-router-dom does not use : App.js import { Route ,Routes } from 'react-router-dom'; return ( );

[@mosakibb]

thanks a lot 😊

[@sanashaikh3238]

@@mosakibb welcome 😊

[@jeremey2072]

This should be pinned!

[@snoz9048]

The care and effort put into this tutorial is just insane.

[@giuseppemirra1041]

Thank u a lot!! I found the other tutorials on youtube but i wasn't learning just writing their code on my IDE. Instead with this video i'm understanding the concept of React and how it works. So immediately subscribed and activated the bell! Thanks a lot man!!

[@lior7daniel]

The way you explain is just perfect! Thanks for the AMAZING job

[@stomperhk9107]

2:00:00 - You must use the map method here, because the map method can return values. If you use forEach, it won't be able to return any value, only undefined of course.

[@gustavoolivermaia]

I just wanted to tell you that this video helped me a lot, This video is so great that I wish I could like it multiple times. I had never studied React before and after watching this tutorial, I feel like I can start developing. Thank You, Max

[@muhammadsaqib-bi7vp]

haha..Sorry I think you are exaggerating...

[@brandonhopkins3438]

This was by far the best tutorial on React I've watched. The best thing about this is that not only does he go slowly and explains things extremely well, he encourages and shows you how to properly layout your files so that code doesn't get all jumbled. He enforces structure. Incredible tutorial, really. Thank you so much.

[@ejhong7986]

i ve watched many videos trying to understand the concept of react and what it does, and this video has the most clear and easy-to-understand explanation, for me at least. thank you !

[@aprilucid]

This is comprehensive... and so nice! finally having a scaffolding of this whole React library!!! so happy that I got your tutorial

[@chernin91]

Ц

[@chernin91]

Цвпуип

[@chernin91]

Увдкурц

[@chernin91]

Ацц

[@chernin91]

Цуа

[@libertinesrock]

Up there with the best teachers on KZbin. Will use this as breakfast watching to sort out any missing React knowledge

[@webdevguy_]

That will be a long breakfast. :-)

[@examplewastaken]

@@webdevguy_ only a 3 hour breakfast is a good breakfast. :p

[@TuncayKaya4]

Great video, don't waste your time by searching for another react vid. This is so marvelous.

[@user-sh5qp6uu1e]

Man I like your style! You manipulate your voice up and down so I never get bored of just listening the material. Subscribed

[@LuismaLorca]

49:46 - Actually since you're using default exports, the name of your component doesn't matter at all, it could be even snake case or having no name at all (anonymous function). That's why using default exports is generally a bad practice. It's harder to debug, find definition/references, etc. You should always use named exports.

[@agilustre]

I finished this in one sitting and I found it to be the best-explained one for a crash course! Really great content!!! I bought your course on TypeScript before and it's just sitting in my Udemy. But after watching this, I feel motivated to finish it and get your full course on React, too! Thank you so much for this course! Many more to come! Please! More power to you and Academind!

[@shaulrajput2668]

really you finish in one sitting

[@Wlodixpro]

@@shaulrajput2668 i mean its possible but as someone who barely touched vanilla js it took me 3 days (about 2-3 hours each day) to get to almost to 2h 30 minutes of this video... After reaching the firebase stuff i just watched simply because i dont see a need in repeating everything he does and I will try to make my own project and go back to this video whenever needed

[@nathanielnizard2163]

Ty for going on yt for this one. Your angular course helped me and my team quite bit few years ago. We delivered and we had 0 experience with it, few subway sessions of udemy and it went very well.

[@BananaFranchise]

I gotta say, this very thorough walkthrough is just amazing! 👌

[@eattoes]

This video taught me more in 4 hours than I learned in an expensive week-long React course. Excellent stuff here, thank you so much.

[@irwin98]

Are you able to tackle projects by yourself now?

[@va9if]

nobody: web dev related videos: well, React will React.

[@saharhasson6025]

Academind you guys are great, clearly can see your love for your work. It worth it all ! Thank you guys!

[@actionimme]

Finally, a programmer that also knows pedagogy! Big respect!

[@soniclasses7841]

from last 15 days i was looking for this and you posted on it one of the best teacher i can say

[@Thilina4321]

Please make a Aws advanced course. Your aws introduction course is superb. Love to take separate Aws advanced course from you max. Thanks for everything ❤

[@harshaniwanigasekara901]

Your teaching skill is amazing ,thanks for the great video..! Now gonna follow the full react js course of yours! One of the best programming utubers in utube! Looking forward for more videos from u!

[@javierguajardocanseco8519]

WOW, thank you so much. I've been trying to get into react for quite a while, and this tutorial got me really excited about learning more. Great teacher

[@hiuyi6350]

I find this infinitely more beginner friendly and understandable than Traversy Media 🥰

[@kaycampbell364]

Traversy is overated….he doesn’t explain things well

[@davebudah]

Been reluctant to learn React, I guess this is the call. I'm in.

[@austinfisher1928]

You explain everything simply and in a good order, this is great.

[@aigoof]

I had a few gaps in concepts - you are fantastic.. really great content. +1 follower for the remainder of your career. Thank you.

[@felipeparente]

Muito bom.. parabéns pelo conteúdo. A tempos que penso em me aventurar em REACT ou Vue. Isso me ajudou bastante.

[@codedjango]

Waiting for similar tutorial for VueJS 3

[@tasfiatzabir422]

Thank you! I find this to be the best React tutorial of all tutorials there are on youtube

[@panosbith4582]

One of the best tutorials I have ever seen. Really excellent explanation skills! :)

[@arcanea9598]

There are no java courses available online even though its widely used in the industry. Can you please make courses on java's popular frameworks such as Spring?

[@ahmedthegreat3973]

Watch Caleb Curry's Java Course

[@yusufdemir9531]

in react-router-dom v6

[@zauche81]

Thanks a lot, dude ! ;) .... and 'Routes' has to be imported aswell

[@salmanfarooq8570]

This person's simple yet thorough way of teaching finally made React click in my mind after I had failed to grasp it all multiple times in the past

[@fseitun]

You're the best. You actually take time to explain things nobody explains. Thanks!

[@academind]

React 18 Update: The video still teaches the latest version of React. The only update required is in index.js (use ReactDOM.createRoot() instead of ReactDOM.render()) - also see: academind.com/tutorials/react-18-update-guide#updating-from-react-17-to-react-18 Timestamps: Introduction 00:00 What is React 00:27 First React Code 04:15 Building SPAs 11:40 React Alternatives 13:41 Creating a React Project 16:48 Setting Up a Code Editor 25:03 Diving Into the Created Project 28:07 How React Works & Understanding Components 34:38 More About Components & Styling with CSS Classes 42:15 Building & Reusing Another Component 47:50 Pros & Dynamic Content 55:09 Handling Events 1:00:27 Adding More Components 1:07:07 Introducing State 1:12:48 Event Props 1:21:07 Adding Routing 1:28:15 Adding Links & Navigation 1:45:07 CSS Modules 1:50:28 Outputting Lists 1:56:14 Adding More Components´2:02:04 Props Children 2:11:52 Adding a Form 2:20:31 Getting User Input & Handling Form Submission 2:29:30 Preparing the App for HTTP 2:39:15 Sending a Post Request 2:46:07 Navigating Programmatically 2:51:25 Getting Started with Fetching Data 2:55:07 useEffect 3:04:32 Introducing React Context´3:14:40 Context Logic & Different Ways of Updating State 3:25:43 Using Context in Components 3:31:37 More Context Usage 3:43:48 Summary 3:50:42

[@arcanea9598]

There are no java courses available online even though its widely used in the industry. Can you please make courses on java's popular frameworks such as Spring?

[@muhammadsaqib-bi7vp]

After Deleting file from src this error is occur when we run localhost 3000 ./src/index.js Module not found: Can't resolve './reportWebVitals' in 'D: eact-course\src'

[@zachariahrojas7257]

The The food

[@zachariahrojas7257]

The

[@zachariahrojas7257]

I’m

[@martinharris4416]

I need a course to pronounce your sweet name 😛❤️

[@hanesmitter1469]

Just call it, max sugarmiller😊

[@brucekleine1775]

Great class! Very well explained. Really helpful to know what doesn't work (that you might expect to work) and why.

[@2371996npistiolas]

Best React tutorial. Explaining everything painfully simple. Thanks dude.

[@raquelframe]

Where is the modified index.CSS? You did a magical step that is not explained.

[@kashmirtechtv2948]

I had followed him and each and everything worked completely fine for me.

[@acommunistdwarf]

Awesome, you are an absolutely beast of a teacher, super didactic. Thanks man, got me pumped to work some more on my project

[@just_eric]

Hi man, I just want to thank you for the magnificent tutorial that you have done and I can assure you that it is the best for beginners that I have seen, and I have seen quite a few, so thanks again and hopefully we have more quality work like this

[@TheDsixer]

I just finished this tutorial. Thanks a lot. Great work Maximilian

[@GabrielMartinez-ez9ue]

I have seen other guys tutorials, but this one just CLICKED. This is a 'must have' course. I ended up doing my own version using tailwindcss and worked great. What a powerful tool to use with react.

[@thongahuhu9362]

You totally are the second master that made me understand all the things you said, and your video changed my mindset. Thanks for spending your time to make this video.

[@srta.carlota696]

for anyone new wondering, in routing, Switch has been replaced with Routes also useHistory has been replaced with useNavigate

[@saheedat2829]

hi, after using Routes instead of switch, I still get a blank page in my browser. Do you know what I can do to fix that?

[@itchyJaw]

@@saheedat2829 YO! Im stuck on this problem too 1:40:44 Im not getting error codes as well Im getting plain white blank page

[@saheedat2829]

@@itchyJaw I've fixed it now

[@saheedat2829]

@@itchyJaw should I send you my GitHub link so you can check the code?

[@akachukwuudechukwu7761]

Nice one you made me some concepts have been struggling clear to me with this tutorial. Thank you

[@franssjostrom719]

Great video! I was nervous about this project I need to do but now everything feels fine, thanks man

[@kk-us5uq]

I've watched all part and understood famous function of React! It's so wonderful tutorial! Thank you very much!

[@orcunsarmis2959]

Thanks for sharing the beautiful course, specifically much appreciated for the clean set-up process at the beginning.

[@quintonnistico9347]

Thank you so much for this wonderful teaching! I am not well versed in vanilla javascript and I can understand everything you are teaching here learning react.

[@ayoubakkaoui]

You've explained everythings very well. Thank you for this video!

[@25kirtan]

Thank you so much for this course Max! Absolute banger!

[@cyprianbk]

This is my second course im following published for you and so far the best course. I love it and im only 1 hour in.

[@georgestavrou8785]

Excellent tutorial. I am new in React and i think many questions have been answered here. I think one of the best tutorial for beginners.