Get started with React.js & React Router 6+
Рет қаралды 136,883
Жыл бұрынReact.js is the most popular frontend JavaScript library you can learn these days. Get started with React.js, its core concepts & advanced topics like routing with React Router 6.4+.
🖥️ Official Website & Courses
academind.com/courses/
👨💻 Learn React.js Today
acad.link/reactjs
📝 Other Resources
Bestselling + 5 ⭐️ Rated React Book: www.amazon.com/React-Key-Conc...
👋 Social Media
/ maxedapps
/ academind_real
/ academind_real
/ academindchannel
💬 Academind Community on Discord
/ discord
----------
🎓 Course content:
00:00:00: Introduction
00:01:03: What Is React?
00:06:37: React requirements
00:08:43: Creating a React project
00:12:07: Exploring a new React project
00:15:31: Understanding how React works & the role of components
00:23:14: Building & using a custom component
00:34:26: Outputting dynamic values
00:39:27: Reusing components
00:45:24: Working with “props”
00:51:35: Styling & working with CSS Modules
01:01:39: Time to practice
01:08:07: Preparing the app for “state”
01:11:49: Listening to (user) events
01:19:37: Adding & using “state” (via useState())
01:29:33: Lifting state up
01:38:38: The special “children” prop
01:45:56: Rendering content conditionally
01:54:52: Sharing components & more state management
02:02:39: Adding form buttons
02:06:10: Handling form submission
02:12:25: Updating state based on previous state
02:17:53: Outputting list data
02:24:29: Connecting frontend & backend
02:30:36: Sending a POST request
02:34:46: Handling side effects with useEffect()
02:43:48: Handling “loading” state
02:48:08: Understanding & adding “Routing”
02:52:01: Adding routes with “React Router” (v6+)
02:57:34: Adding layout routes
03:01:40: Refactoring route components & more nesting
03:07:12: Adding links & navigation
03:15:19: Data fetching via “loader” functions
03:24:23: Submitting data via “action” functions
03:35:28: Adding dynamic routes
03:44:06: Summary
----------
📁 Attachments:
Starting project: github.com/academind/react-co...
Extra CSS & JS files: 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!
@aelohinjuz 7 ай бұрын
I've been doing React for a few years now, and your video is just so good that I am watching it entirely, it is not that I don't know the stuff, it is that it is so enjoyable. It is the best video course/tutorial, I have ever seen, to be honest, I wish I had had teachers like you when I started. I found you because is time to move on to the new react router 6.4+ but stayed for the rest of the information!
@buyssd 7 ай бұрын
That's amazing! Learning from scratch and being able to write a program after watching just one video is fantastic!
@anton9410 Жыл бұрын
Thorough and concise tutorial, thank you!
@hossamayman3587 Жыл бұрын
I'm overjoyed to see this crach course. Thank you Max, for providing this amazing course.❤️
@untalivan1350 Жыл бұрын
Thanks man, just finishing it up! So useful, did'nt knew you could do all that with the router implementation, thanks so much, keep up the great work!
@bakhtiyor_sulaymonov 11 ай бұрын
Thanks for the course Max, it was what I needed in the right time 👍
@madae160 Жыл бұрын
Excellent, excellent, excellent. Thank you so much Max. You're explanations are the best.
@numaanjaved 8 ай бұрын
I took your complete web development course 2.0 on udemy once, and it got me started on my job in a better way. Nice to see you again in this crash course for react as well.
@hliasfasilakhs6765 Жыл бұрын
Amazing job! Ihncredible in depth explanations for every part. You are one of the best . Thank you man
@WillBelden 7 ай бұрын
Thanks for making this available. I took one of your other courses (paid), and was surprised when I found you (Maximillian) doing this one!
@subhamsahu5600 Жыл бұрын
thanks for all of the amazing courses
@kim92se64 Жыл бұрын
Really first time I understand what is the difference between imperative and declarative coding approach
@codingwithhafiz Жыл бұрын
You Solved my ReACT Router Problem i was facing in lastest version Thanks man
@swarnimpaudyal Жыл бұрын
Already about to complete the course Max! I would really suggest the one seeking to learn react should get his course in udemy. Excellent course. Thankyou
@sagiv30 Жыл бұрын
The course published 6 years ago. Is it still relevant. I know more videos added in the last years, but sometimes its not enough and in some reviews of courses in udemy there are complains about things that not updated.
@eriikelnino6545 8 ай бұрын
@@sagiv30 he just updated the course
@rafidev2099 Жыл бұрын
Wow that is awesome - greate crash course 😊 Thank You to share this on YT - this by the way is a great idea for promo - with that quality - I'm your client - this what I learned here make me hungry for more - finally someone who explain me react as should be 😊 Thank You Max and Academind 🙏 😊
@PeterNatasha11 Жыл бұрын
As always from Maximillian, the best tutorials ever!
@becbet1670 Жыл бұрын
Another great Crash Course from The best instructor Max ❤
@dm-bn4nq Жыл бұрын
I will buy your book about React because i loved your NodeJS, Angular and React course. I learned a lot from you on udemy and youtube. This year i will learn react native with your course on udemy too
@hichemblackwish2046 Жыл бұрын
Thnx .. Finally ! Someone giving us a new course of 2023 and not from ages ago ... Hope i could be comfy with react once i finish this one
@unknownman1 Жыл бұрын
are u comfy now?
@khalilmarzouki636 Жыл бұрын
@@unknownman1 🤣🤣
@CarlosHenriqueBarbosa Жыл бұрын
Amazing course, great stuff! Thanks!
@DJCava3000 Жыл бұрын
what's the app you're using to create rectangles with the computer's cursor???
@mel-182 Жыл бұрын
Hi Max, is this the same content in Udemy?
@eng-sarah Жыл бұрын
Thank you very much would you make a similar new crash course for react native ?
@PurpleWarlock Жыл бұрын
Done. Thank you very much. I think I should try the Full Stack course instead. :D
@Shubhamkumar-lz2br Жыл бұрын
My most awaiting video😍
@ua2894 Жыл бұрын
oh man how i missed Max saying "ultiMATEly". the sheer joy!
@meenakshighodke2935 Жыл бұрын
Amazing Crash Course. Thanks a lot for always keeping your courses up to date. Your courses are awesome. Could you please make a course on FastAPI which is a Python Framework for backend. It would be valuable to learn FastAPI from you.
@ismailk5990 Жыл бұрын
is there a lot difference between this and that of 2021? I 'm watching 2021 and 1hour left to finish it, is it better to complete it first then watch this video? please
@guilhermecamargo5469 Жыл бұрын
Amazing, as always.
@FRITS-Kh 3 ай бұрын
Max, thank you for the amazing course, you're my favorite teacher! Are performance issues addressed in any other courses? For example, topics like UseMemo and UseCallback. This is interested because React often triggers unnecessary component renders.
@rcastillo8686 9 ай бұрын
MAX great job as usual. I just want to add some feedback. In today's industry you never see a react application without typescript and this changes substantially how react looks. I understand there are courses for both, but it would be really nice to have a crashcourse like this with React and typescript.
@panicdispenser6586 8 ай бұрын
Thats what i thought when i started the vid today. And maybe add tailwind to it
@rcastillo8686 6 ай бұрын
@@panicdispenser6586 he has a new video, react with typescript in UDEMY
@wassupdoc7742 Жыл бұрын
The king is back ♥
@rusiraliyanage6643 Жыл бұрын
hey max, my auto reformating upon saving is not working :)
@MohamedSalem-qu8et Жыл бұрын
Will you make a nuxt3js course soon?
@takurichardtaku4187 11 ай бұрын
please the part where you use onChange so that when you click on the back the form disapear. i had try to by pass it but mine not going .the form still remain. please how can i go about it?
@sanaullahaq5568 5 ай бұрын
Thanks for the free crash course
@akhmadulloshokirov1427 Жыл бұрын
Hi Max. What is the name of the VS extension that you use to auto-format react code?
@ronnelrodriguez8312 11 ай бұрын
Based on his 2021 react crash course, it's "Prettier".
@babar-khan Жыл бұрын
Did you update your course on udemy ?
@SharCourse Жыл бұрын
I'm happy for the video
@dastaten 3 күн бұрын
Everything worked perfectly until 3:08:00. Now I'm getting "[plugin:vite:import-analysis] Failed to resolve import "react-router-dom" from "src\main.jsx". Does the file exist?" Did something change with React Router? Another tutorial I saw was importing { BrowserRouter, Routes, and Route } and not { RouterProvider, createBrowserRouter }.
@atalibcodinglevel7518 10 ай бұрын
Amazing Course
@RAMANKUMAR-fc8sf Жыл бұрын
Thanks Max once again...
@kasper369 Жыл бұрын
Less go!
@kollabor8 Жыл бұрын
I've gone back to the root of CRA, which is webpack, its simple to build, I like bein in the control seat
@aadityavijayvargiya2299 10 ай бұрын
Hey can anyone help me to solve the issue of npm run dev command is not runnning and throwing error after everytime i closed the project and opening it after some days?? please help
@wibowomuhmmad 7 ай бұрын
Amazing crash course youtube video
@mohammedazharuddin7393 Жыл бұрын
Thanks max
@saidakbarmahmudxojaev3508 Жыл бұрын
Great !
@calvinwilliams729 Жыл бұрын
I wonder why I couldn't find this course early and wondered around
@umzzate 7 ай бұрын
where is the starting snapshot?
@discreetninja Жыл бұрын
Maybe can do a course update for React 18 and Next 13.
@businessuser5146 Жыл бұрын
Please do next 13 course too
@asakurayoh3909 Жыл бұрын
Coming from the Angular background, React looks quite simple.
@cancelbubble6535 Жыл бұрын
Any reason why you don't use typescript in your react?
@haroldsomehands4271 Жыл бұрын
because TS is for another course i think. he probably doesnt want to expose too much in a single course. smart move i must say.
@ismailk5990 Жыл бұрын
You have a react crash course for beginners 2021 Is it true to watch it first even we are in 2023 I have no idea about react
@higherpurpose1212 3 ай бұрын
Vue is better.
@brajagopalmukherjee1588 Жыл бұрын
Max we need updated next js course ...react course is done for.us
@Hersi-nj2hl Ай бұрын
Thans❤
@chippandenga6722 Жыл бұрын
I was making good progress until I installed react icons and tried fixing audit errors. I am now stuck and cannot restart the server app😢😢😢 Apparently need to downgrade my nodejs🙁😟😏
@BMikel 10 ай бұрын
What about "delete", "edit" post functionality for each individual post? Does this crash course cover this? Or only premium Udemy course has this? Thanks
@mizanurrahmankhan692 Жыл бұрын
max is great
@PurpleWarlock Жыл бұрын
Thanks for the tutorial. But things are weird. "Yeah, the form's state content is gonna be tied directly of the first post in the list. Forget the other list items." I guess this due to the component's logic you are trying to instill in us but it feels like there is too many curve balls.
@janithchamikara3062 11 ай бұрын
3:15:37
@mrfabulous3303 11 ай бұрын
1:30:00
@zakariabelassal1410 4 ай бұрын
1:21:35 its very important to understand how react works but it is not the most viewed! and this is the common mistakes made by ppl who want to learn new techs ! they omit how things are working under the hood!
@Lamberson_ Жыл бұрын
1.08
@CoconutwCoco 11 ай бұрын
1:03:00
@whitykhan-ny3oi Жыл бұрын
Anybody making notes
@MAHDI-ky3bp 2 ай бұрын
10:00
@connygu Жыл бұрын
am I first???
@traversethedom Жыл бұрын
So many good instructors these days just focus mostly on React. Almost like it is the only framework. It's a very popular framework, but I feel it is getting way too overblown now. Just wish we had a very good tutor who teaches Angular as well as Max teaches and loves React.
@andTutin Жыл бұрын
absolutely agree
@duztv5370 Жыл бұрын
Exactly.
@waleedsharif618 Жыл бұрын
We should only have one good framework and react is perfect
@traversethedom Жыл бұрын
@@waleedsharif618 How is React the perfect framework?
Жыл бұрын
I think the reason there are so many react tutorials is that react NEED tutorial :) other frameworks are just simpler, better documentation or batteries included :))
@AntonioCabralNumberOne 11 ай бұрын
Coming from VueJS, trying react is painful for being such a organizational mess. I wish I never needed to use React ever!
@higherpurpose1212 3 ай бұрын
Yep, pretty much like spaghetti coding, too many codes in too many places and it's becoming too irritating, plus now having too many frameworks to be used, starting to be overblown.
@devsomu1352 Жыл бұрын
Am i the first one😁
@williamnaymin2415 Жыл бұрын
too many confuse variable to understand clearly
@kim92se64 Жыл бұрын
2h 1m
@andTutin Жыл бұрын
react is a mess
@haroldsomehands4271 Жыл бұрын
yeah and i still wonder why people use it
@higherpurpose1212 3 ай бұрын
@@haroldsomehands4271because in an organization, a senior dev with only React exp as front-end, will suggest to start building the system using React, then he will leave halfway, then company will hire more React Devs to continue work, or hire devs with basic react experience to maintain the system, so the dev becomes senior after 2 years and leave, start in a new company and use React because that's the only one he's good at, then build another system and the cycle never stops
@ob34915 2 ай бұрын
At this point everyone knows react its not even skill anymore
@martinlietz5375 Жыл бұрын
funny how the Bavarian accent is disappearing :-)
@0164046424 Жыл бұрын
max are you update the big course in Udemy ? ❤❤😍😍😍😍😍😍❤❤❤❤
@ExpatTraderFX Жыл бұрын
2:31:51
ByteGrad
Рет қаралды 801 М.