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

🖥️ Official Website & Courses

👨‍💻 Bestselling React Course

📝 Further Resources

👋 Social Media

💬 Academind Community on 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:
----------

[ChristyThomas]

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.
<Routes>
<Route path="/" element={<AllMeetupsPage />} />
<Route path="/new-meetup" element={<NewMeetupsPage />} />
<Route path="/favorites" element={<FavoritesPage />} />
</Routes>

<Route> is encapsulated in <Routes> and "exact" is not needed.

[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!

[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 });

[avinashmurmu]

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 ❤️🔥🔥

[kameshkotwani]

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

[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

[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!

[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...

[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

[johndivine]

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

[studentcse]

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.

[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. ❤

[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 (
<div>

<Routes>
<Route path='/' element={<AllMeetUpsPage />} />
<Route path='/new-meetup' element={<NewMeetUpPage />} />
<Route path='/favorites' element={<FavoritesPage />} />
</Routes>
</div >
);
}

export default App;

[karanacharya]

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('/')

[tenc]

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!

[adeniyiadesanmi]

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.

[kensutherland]

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.

[achiyazigi]

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! <3

[Miguel-oxjb]

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!!

[dennosgil]

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!