Тёмный

Get started with React.js & React Router 6+ 

Academind
Подписаться 911 тыс.
Просмотров 139 тыс.
50% 1

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!

Опубликовано:

 

8 фев 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 104   
@aelohinjuz
@aelohinjuz 8 месяцев назад
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!
@untalivan1350
@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!
@anton9410
@anton9410 Год назад
Thorough and concise tutorial, thank you!
@hossamayman3587
@hossamayman3587 Год назад
I'm overjoyed to see this crach course. Thank you Max, for providing this amazing course.❤️
@buyssd
@buyssd 8 месяцев назад
That's amazing! Learning from scratch and being able to write a program after watching just one video is fantastic!
@bakhtiyor_sulaymonov
@bakhtiyor_sulaymonov Год назад
Thanks for the course Max, it was what I needed in the right time 👍
@madae160
@madae160 Год назад
Excellent, excellent, excellent. Thank you so much Max. You're explanations are the best.
@hliasfasilakhs6765
@hliasfasilakhs6765 Год назад
Amazing job! Ihncredible in depth explanations for every part. You are one of the best . Thank you man
@subhamsahu5600
@subhamsahu5600 Год назад
thanks for all of the amazing courses
@CarlosHenriqueBarbosa
@CarlosHenriqueBarbosa Год назад
Amazing course, great stuff! Thanks!
@WillBelden
@WillBelden 8 месяцев назад
Thanks for making this available. I took one of your other courses (paid), and was surprised when I found you (Maximillian) doing this one!
@kim92se64
@kim92se64 Год назад
Really first time I understand what is the difference between imperative and declarative coding approach
@PeterNatasha11
@PeterNatasha11 Год назад
As always from Maximillian, the best tutorials ever!
@rafidev2099
@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 🙏 😊
@numaanjaved
@numaanjaved 9 месяцев назад
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.
@codingwithhafiz
@codingwithhafiz Год назад
You Solved my ReACT Router Problem i was facing in lastest version Thanks man
@swarnimpaudyal
@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
@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
@eriikelnino6545 9 месяцев назад
@@sagiv30 he just updated the course
@becbet1670
@becbet1670 Год назад
Another great Crash Course from The best instructor Max ❤
@hichemblackwish2046
@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
@unknownman1 Год назад
are u comfy now?
@khalilmarzouki636
@khalilmarzouki636 Год назад
@@unknownman1 🤣🤣
@ua2894
@ua2894 Год назад
oh man how i missed Max saying "ultiMATEly". the sheer joy!
@dm-bn4nq
@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
@Shubhamkumar-lz2br
@Shubhamkumar-lz2br Год назад
My most awaiting video😍
@meenakshighodke2935
@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
@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
@PurpleWarlock
@PurpleWarlock Год назад
Done. Thank you very much. I think I should try the Full Stack course instead. :D
@guilhermecamargo5469
@guilhermecamargo5469 Год назад
Amazing, as always.
@eng-sarah
@eng-sarah Год назад
Thank you very much would you make a similar new crash course for react native ?
@wassupdoc7742
@wassupdoc7742 Год назад
The king is back ♥
@DJCava3000
@DJCava3000 Год назад
what's the app you're using to create rectangles with the computer's cursor???
@SharCourse
@SharCourse Год назад
I'm happy for the video
@sanaullahaq5568
@sanaullahaq5568 6 месяцев назад
Thanks for the free crash course
@wibowomuhmmad
@wibowomuhmmad 8 месяцев назад
Amazing crash course youtube video
@atalibcodinglevel7518
@atalibcodinglevel7518 11 месяцев назад
Amazing Course
@takurichardtaku4187
@takurichardtaku4187 Год назад
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?
@MohamedSalem-qu8et
@MohamedSalem-qu8et Год назад
Will you make a nuxt3js course soon?
@FRITS-Kh
@FRITS-Kh 4 месяца назад
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.
@mel-182
@mel-182 Год назад
Hi Max, is this the same content in Udemy?
@rcastillo8686
@rcastillo8686 10 месяцев назад
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
@panicdispenser6586 8 месяцев назад
Thats what i thought when i started the vid today. And maybe add tailwind to it
@rcastillo8686
@rcastillo8686 7 месяцев назад
@@panicdispenser6586 he has a new video, react with typescript in UDEMY
@RAMANKUMAR-fc8sf
@RAMANKUMAR-fc8sf Год назад
Thanks Max once again...
@dastaten
@dastaten Месяц назад
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 }.
@rusiraliyanage6643
@rusiraliyanage6643 Год назад
hey max, my auto reformating upon saving is not working :)
@akhmadulloshokirov1427
@akhmadulloshokirov1427 Год назад
Hi Max. What is the name of the VS extension that you use to auto-format react code?
@ronnelrodriguez8312
@ronnelrodriguez8312 Год назад
Based on his 2021 react crash course, it's "Prettier".
@saidakbarmahmudxojaev3508
@saidakbarmahmudxojaev3508 Год назад
Great !
@mohammedazharuddin7393
@mohammedazharuddin7393 Год назад
Thanks max
@kollabor8
@kollabor8 Год назад
I've gone back to the root of CRA, which is webpack, its simple to build, I like bein in the control seat
@calvinwilliams729
@calvinwilliams729 Год назад
I wonder why I couldn't find this course early and wondered around
@kasper369
@kasper369 Год назад
Less go!
@aadityavijayvargiya2299
@aadityavijayvargiya2299 11 месяцев назад
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
@babar-khan
@babar-khan Год назад
Did you update your course on udemy ?
@asakurayoh3909
@asakurayoh3909 Год назад
Coming from the Angular background, React looks quite simple.
@cancelbubble6535
@cancelbubble6535 Год назад
Any reason why you don't use typescript in your react?
@haroldsomehands4271
@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.
@Hersi-nj2hl
@Hersi-nj2hl 2 месяца назад
Thans❤
@discreetninja
@discreetninja Год назад
Maybe can do a course update for React 18 and Next 13.
@businessuser5146
@businessuser5146 Год назад
Please do next 13 course too
@chippandenga6722
@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🙁😟😏
@umzzate
@umzzate 8 месяцев назад
where is the starting snapshot?
@ismailk5990
@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
@higherpurpose1212 4 месяца назад
Vue is better.
@brajagopalmukherjee1588
@brajagopalmukherjee1588 Год назад
Max we need updated next js course ...react course is done for.us
@BMikel
@BMikel 11 месяцев назад
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
@mizanurrahmankhan692 Год назад
max is great
@Lamberson_
@Lamberson_ Год назад
1.08
@whitykhan-ny3oi
@whitykhan-ny3oi Год назад
Anybody making notes
@mrfabulous3303
@mrfabulous3303 Год назад
1:30:00
@MAHDI-ky3bp
@MAHDI-ky3bp 3 месяца назад
10:00
@janithchamikara3062
@janithchamikara3062 Год назад
3:15:37
@PurpleWarlock
@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.
@CoconutwCoco
@CoconutwCoco Год назад
1:03:00
@connygu
@connygu Год назад
am I first???
@zakariabelassal1410
@zakariabelassal1410 5 месяцев назад
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!
@devsomu1352
@devsomu1352 Год назад
Am i the first one😁
@traversethedom
@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
@andTutin Год назад
absolutely agree
@duztv5370
@duztv5370 Год назад
Exactly.
@waleedsharif618
@waleedsharif618 Год назад
We should only have one good framework and react is perfect
@traversethedom
@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
@AntonioCabralNumberOne Год назад
Coming from VueJS, trying react is painful for being such a organizational mess. I wish I never needed to use React ever!
@higherpurpose1212
@higherpurpose1212 4 месяца назад
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.
@williamnaymin2415
@williamnaymin2415 Год назад
too many confuse variable to understand clearly
@kim92se64
@kim92se64 Год назад
2h 1m
@andTutin
@andTutin Год назад
react is a mess
@haroldsomehands4271
@haroldsomehands4271 Год назад
yeah and i still wonder why people use it
@higherpurpose1212
@higherpurpose1212 4 месяца назад
@@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
@martinlietz5375
@martinlietz5375 Год назад
funny how the Bavarian accent is disappearing :-)
@ob34915
@ob34915 3 месяца назад
At this point everyone knows react its not even skill anymore
@0164046424
@0164046424 Год назад
max are you update the big course in Udemy ? ❤❤😍😍😍😍😍😍❤❤❤❤
@ExpatTraderFX
@ExpatTraderFX Год назад
2:31:51
Далее
You might not need useEffect() ...
21:45
Просмотров 149 тыс.
React Tutorial for Beginners
1:20:04
Просмотров 2,6 млн
А что если не умеешь играть?🥲
00:46
React Router 6.4 - Getting Started
44:31
Просмотров 84 тыс.
Why Signals Are Better Than React Hooks
16:30
Просмотров 452 тыс.
You don't need a frontend framework
15:45
Просмотров 99 тыс.
Git MERGE vs REBASE
16:12
Просмотров 1 млн
React router crash course
55:54
Просмотров 29 тыс.
State Managers Are Making Your Code Worse In React
13:33
Web Developer Roadmap (2024) - Everything is Changing
25:02
All The JavaScript You Need To Know For React
28:00
Просмотров 554 тыс.
А что если не умеешь играть?🥲
00:46