React Crash Course for Beginners - Learn ReactJS from Scratch in this 100% Free Tutorial!
HTML-код
- Опубликовано: 6 июн 2024
- 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!
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.
THANK YOU!
This needs more upvotes.
Remember to add Routes to the import { Route } from 'react-router-dom';
Hero! 👍
Thank you!
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 });
A God walking amongst mere mortals.
Thank you so much!
Thankyou :)
This is same for Switch, It has been replaced with Routes
Thank you Steve, help much appreciated.
It will take me 2-3 days for me to learn your name, luckily I can learn react in 3 hours! Yay!
Lol
Same here 😂
😂😂😂 honestly, I don't even bother to pronounce it, I only refer t him as Academind 😂
Can u build this projects by yourself w/o tut
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 ❤️🔥🔥
then try stephen grider
@@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.
Hello How did you do the CSS part just started it though
I agree! I really understood it. The way he explains things is exceptional. Very clear and concise!
@@osamahashim smilga is awesome 👌
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!
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
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!
Your mode of explaining complex stuff thus making them easy truly makes you different and the best yet Max.
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
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.
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. ❤
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!!
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...
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.
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!
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!
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.
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.
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!
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.
I even regret after buying max's react course. Many students feel the same and complain but no follow-up from max
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.
This is by far, the best tutorial I've seen on react. It's also one of the only up-to-date ones.
Can't thank you enough Max, your content is great! Love to see passionate and dedicated ppl like you 💪
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 :)
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
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
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('/')
Ok
Thanks, saved me a lot of searching
@@MrValiantrobeàYYYyyyyyy3uzfg8gu88g8z8uz8878zz8
Finally, a programmer that also knows pedagogy! Big respect!
The Best React Js crash course I've ever seen. Truly recommendable.
The best tutorial I ever had watched and practiced. He tells everything so patiently that we don't need to look again and again. 👌👌👌❤️
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😅
@@njoy2075 but I didn't buy that because of class based comments
I have his node and react course.. both are really awesome!! Very hands on and step by step
@@kashmirtechtv2948 it's been updated using functional components
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.
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 💜
After this video I am going to start learning React right away. Thank you for this!
Just started learning React a few weeks ago. Great starting training to get anybody going. Hope to start the full training class soon.
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
Hands down the best beginner React tutorial on RUclips. This helped me a lot to do a quick revision of the basics!! Thanks a lot for such amazing content.
Man I like your style! You manipulate your voice up and down so I never get bored of just listening the material. Subscribed
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
haha..Sorry I think you are exaggerating...
Very clear and understandable. I like how you explain small things that adds context to what you are doing. Great job!
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!!
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 !!
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.
Up there with the best teachers on RUclips. Will use this as breakfast watching to sort out any missing React knowledge
That will be a long breakfast. :-)
@@webdevguy_ only a 3 hour breakfast is a good breakfast. :p
Amazing crash course: Your content is a cut above the rest when it comes down to breaking things into the simplest possible terms!
I love your teaching style, very clear and you left nothing major unexplained. Thank you!
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!
really you finish in one sitting
@@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
The care and effort put into this tutorial is just insane.
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.
You're the best. You actually take time to explain things nobody explains. Thanks!
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.
Are you able to tackle projects by yourself now?
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;
Thanks for this man! I lost almost an hour figuring this out lol.
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 !
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!
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
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?
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'
The The food
The
I’m
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.
Wooah this short course was awesome. Strictly on point. Thank you Max.
Best React tutorial. Explaining everything painfully simple. Thanks dude.
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 (
);
thanks a lot 😊
@@mosakibb welcome 😊
This should be pinned!
from last 15 days i was looking for this and you posted on it one of
the best teacher i can say
First time learn NodeJs from Max's RUclips. It's very clear. In couple weeks ago, I took 2 courses, PWA and MERN from Academind in Udemy. Thanks Max.
I have completed an hour tutorial so far and this course is awesome! very clear and to the point. Thanks Academind.
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 ❤
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.
thanks !!
Thank you!!!
@academind, please pin this comment!
Mine is keep showing a blank page, have any of you guys encountered the same problem?
A great walk-through and tutorial. A really clear way of explaining the fundamentals of React.
Maximilian being super clear as usual, now i fully grasp the concept of Context, is really easy thanks to you :) I got experience on vanilla class-based React and I can't believe how good it became being full functional with hooks. Definitely an upgrade to ReactJS.
This is comprehensive... and so nice! finally having a scaffolding of this whole React library!!! so happy that I got your tutorial
Ц
Цвпуип
Увдкурц
Ацц
Цуа
I find this infinitely more beginner friendly and understandable than Traversy Media 🥰
Traversy is overated….he doesn’t explain things well
Thank you! I find this to be the best React tutorial of all tutorials there are on youtube
A few rather difficult concepts been explained awesome and deep! Great job, Man!
nobody:
web dev related videos:
well, React will React.
Been reluctant to learn React, I guess this is the call. I'm in.
The way you explain is just perfect!
Thanks for the AMAZING job
I really appreciate this crash course! You're a remarkable instructor. Thank you so much!
Muito bom.. parabéns pelo conteúdo. A tempos que penso em me aventurar em REACT ou Vue. Isso me ajudou bastante.
Waiting for similar tutorial for VueJS 3
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.
True love React on your awesome course. Every single part of your all courses, you explained very well, which is always important rather than learning code. That the reason you are my favorite. Love from Chemnitz.
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?
Watch Caleb Curry's Java Course
in react-router-dom v6
Thanks a lot, dude ! ;) .... and 'Routes' has to be imported aswell
I don't know why you do them, but I love the pauses in between topics. Intentional or not, they're a nice "Now let that sink in" moment ☺
This is one of the best react tutorials. If you want to have the basic knowledge, please invest only four hours and trust me you will have the foundation and build your confidence. I would like to say thank you to the instructor for his professional work and devotion.
I need a course to pronounce your sweet name 😛❤️
Just call it, max sugarmiller😊
Where is the modified index.CSS? You did a magical step that is not explained.
I had followed him and each and everything worked completely fine for me.
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.
Max is the best. I sometimes find that learning from video is frustrating when you're not given a full explanation/background on why something is the way it is. Max always gives a complete background so that when something is used in a different context, you'll know why it requires a variation from the learning example.
I've watched all part and understood famous function of React!
It's so wonderful tutorial!
Thank you very much!
I've been enjoying your course on Udemy - but I'm glad I'm doing this before continuing with it as it allows me to see how you create an actual website. Thank you so much
People who provide free education will always have special place in my heart. :) Thank you, Max
Wanted a refresher on React and this was amazing to follow. Thank you!
I had a few gaps in concepts - you are fantastic.. really great content. +1 follower for the remainder of your career. Thank you.
I gotta say, this very thorough walkthrough is just amazing! 👌
I have find many react courses in youtube but this course is the best. With great explaination in each topic covered. Now i can do the react project. Go for this course if you want to start from scratch.
Extremely clear. Can't wait to begin programming in react using this video. Will purchase course with next crypto cash in. Has to be excellent because this was excellent.
This is an amaazzing course, it will help lives of many young and experienced developers also. Open heartedly we can say, you deserve a gift from any of us who completed full video.
Bro, i took your node.js course and you are the best instructor in udemy.
You explain everything simply and in a good order, this is great.
Simply put, you are a teacher of teachers! Thanks for this exposition.
If I could give you two thumbs up I would. I've been a backend developer for two decades and still have a sour taste in my mouth from late 90's JavaScript. I've tried for years to get into front-end coding, but with little success until this video. Job well done, sir. This is a great format for teaching this material.
which language is used for backand ? Is backand easier of front and ?
Great class! Very well explained. Really helpful to know what doesn't work (that you might expect to work) and why.
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.
Academind you guys are great, clearly can see your love for your work. It worth it all !
Thank you guys!