React Router Tutorial | React For Beginners
Вставка
- Опубліковано 3 тра 2019
- Check out my courses and become more creative!
developedbyed.com/
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
In this episode we are going to cover a popular react library called React Router. React Router allows us to create client side routing in our react project.
Probably one of the best thing it allows us to do is create dynamic routes and fetch api calls based on route parameters.
📕 Things covered in this video:
- React Router
- How to use the BrowserRouter, Route and Switch.
- How to fetch apis with react router
❤Become a patreon for exclusive videos and more!
/ dev_ed
🛴 Follow me on:
Twitter: / deved94
Instagram: / developedbyed
Github: github.com/DevEdwin
🎵 Music:
Outro:
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: / lakeyinspired
Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ / aka-dj-quads
Creative Commons - Attribution-ShareAlike 3.0 Unported- CC BY-SA 3.0
creativecommons.org/licenses/b...
#javascript #react - Наука та технологія
![Lp. Последняя Реальность #82 ТРИНАДЦАТЬ ОГНЕЙ [Целая память] • Майнкрафт](http://i.ytimg.com/vi/A_YRj4oIEo8/mqdefault.jpg)
As of approximately November 3rd, 2021, react-router-dom v6 (stable) was released and there are a few things outlined in this tutorial that need to be changed in order for it to function properly.
1. Instead of importing and using the Switch component, import and use the Routes component instead. (e.g. import { Switch } from ‘react-router-dom’; becomes import { Routes } from ‘react-router-dom;’
2. The “component” prop within a Route should be specified as an “element” prop instead (e.g.
Also make sure that the element is JSX i.e. element={}
Way to helpful thank you
this comment and answer by Chimwemwe removes the bug... Thank you guys
wow thanks!
I hope Ed would see this.
Routes are impressive. But, what's more impressive is how you magically 'routed' all this information to my brain in half an hr... what kind of wizardy is this?!!
His explanations are always amazing.
yes exactly ... +1
My point exactly, I never believed I could learn this much in half an hour if I was thinking of gathering all the pieces myself, it would take days probably to finish gathering if not more. Thanks a lot, Edddddd!
If you guys understand that, why I can reach each page separately by refreshing, but cant reach from about "/about" to home dir "/" back.
These videos made me buy his courses, they are absolutely amazing
this tutorial is now slightly out of date, to fix issues:
after timestamp 08:30 to 12:20 solution is below.
after 12:20 to 14:35 we don't need to add exact keyword to anymore, due to last changes to react-router-dom.
at 29:52 if match object doesn't work use useParams( ) from react router dom, const params = useParams(); add this in ItemDetail( ) , now use params.id in fetch function.
step 0 -- > don't use App.js
step 1 -- > create RouteSwitch.js in src folder.
step 2 -- > add this code below to RouteSwitch.js
step 3 -- > let index.js render RouteSwitch.js instead of App.js
step 4 -- > continue to learn.
// start to copy here
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import About from "./About";
import Nav from "./Nav";
import Shop from "./Shop";
const RouteSwitch = () => {
return (
);
};
const Home = () => {
return (
Home Page
);
};
export default RouteSwitch;
// end copy here
thanks! Coming from theodinproject and this is very relevant
Yes you are right
Thanks this helped!
What is the reason for needing to use RouteSwitch.js versus App.js? Shouldn't these function the same so long as your index.js is set properly?
Thanks big time
**UA-cam recommendation**: ...
After 5 seconds:
- I am react developer now
after serious hours of struggling with react routes i finally stumble into this awesome 30min vid that save ma life . Thanks Ed now i can handle routes without any prob
same here, all the react router tutorials out there are just simply "menu" style, but we need something like this to understand how the f!"·$% it works, thank you so much for your time sir.
Totally agreeeeeeeeeee hahahaha!!
True said... making simple to understand
God, it' so refreshing to actually see someone teaching code that HAS a personality.
Makes the video go by 10x faster.
Keep up the good work, my dude!
Swear! Like you are totally right my man, this dude is awesome.
Exactly! Every other video out there for tutorials are droning.
I dunno man, by 0:32, I was too annoyed to continue, so I'm moving on to the next search result.
Same, I love Ed, I would choose to watch him over anyone else because his voice has more than one setting
@@RonWarnerBubbleKing Maybe your knowledge is the same with what siri said about react router and your ego is too high to hear other opinion. Or you prefer long and boring two hours of video with indian accent, fast speech, and loud key presses...
Such a squeaky clean, easy to understand, well structured guide. I also love the overall friendly, upbeat vibe of the whole thing. This is honestly among the very best tutorial videos I've ever seen, thanks a lot, Ed!
Dev Ed is a very effective teacher, he’s not irritating to listen to, he’s humorous, he’s direct, and all he says are comprehensive so kudos. I learned react fundamentals thru him. Thanks, man.
when you need to come back to his videos multiple times, those querky way to present is kind of annoying. For the first time, it's ok for me though.
@@aluuusch your problem not his
Your React tuts are the absolute best. So fun and educational. And your excitement is contagious! Thank you so much for creating all this content
This guy is a legend.. Thanks for the wonderful tutorial, I've learned a lot from you than my college professor.
I could relate to this !!
Your college teaches React??
Here you go Everything about React from Beginner to Advance level
ua-cam.com/video/ZWqfADc-0K8/v-deo.html
@@nirmitjatana1245 yes they do, from it's history to it's application on the real world.. And we didn't learn anything 😅
"easy peasy lemon squizanno" is the new abracadabra lol great tutorial!
Your content is SOOOO GOOD! Your teachings are great, you have personality and it's genuinely entertaining to watch. Learning ReactJS is going to be way more fun with your channel to help understanding the basics. Thank you very much for your work.
Thanks Ed, wonderful video...
very informative.. and to the point...
your 30min video saved my 3hrs to study, understand and implement the topic....
You deserve alot of credit for this video good sir. This was the quickest way to helping me get a react JS router setup in minutes. Keep up the good work.
It seems I am not the only one who felt a good personality from him. I am a newbie to the react world and this video really gives me confidence and motivation. Thanks bro!
I watched three other tutorials and read the docs before landing on this one. This was so clear and easy to follow. You're an amazing teacher and communicator! Thank you!!
Magic of this video is that not only you teach us but also have fun with all the work and little mistakes you do
I remember trying to learn React Router a couple years ago and being completely clueless from other tutorial videos. Thanks for this, it was so straightforward and easy to learn!
Same
Here you go Everything about React from Beginner to Advance level
ua-cam.com/video/ZWqfADc-0K8/v-deo.html
This is probably the useful 30 minutes i have ever spent on You tube. Thank you Ed.
In case anyone missed it, the reason match.params contains "id" at all is because he defined it inside the route by saying path="/shop/:id". So the value of id is essentially set to be the same as the last part of the URL. It could have been called anything else, e.g. if it was instead written as path="/shop/:itemId" then match.params would contain a key called itemId.
Please keep showering your knowledge . Great tutorial. Great voice and your communication skills keeps enjoying the crowd while learning :)
Your "Hey, Google..." set off my Google Home telling me about the weather today
I am a beginner in React and was looking for more concepts to learn then I came across this video and gave an instant like just for that intro.
Explanation was really helpful.
Keep it up! This is an appreciation for how you guys help the community.
Man you are a legend, I've studied for literally dozens of hours, got confused on a lot of stuff. Then in a few videos, not even 2 hours total of time I managed to learn everything that I couldn't before ( hooks, props, routers, redux and how to build a Todo list with ease)
Stop it! You're making me laugh out loud at work! XD
he is impressive first tutorial to enjoy
All you need for React
Formik for building Forms
ua-cam.com/video/3xMiK5mVBpM/v-deo.html
React functional Hooks
ua-cam.com/video/HmOw-45vg80/v-deo.html
React JS Full Course
ua-cam.com/video/ZWqfADc-0K8/v-deo.html
This guy is a legend 😂
I want to be able to laugh at work one day 😔
It's good explanation....
This video is amazing! I love that you code everything from scratch. I like that you do four space indentation. IMO it's easier to read than two-space indentation. I love that you use pure CSS and not some CSS/Framework. Coding along we can see how everything works together. Keep up the excellent job! :)
Why I love Dev-Ed
Great Ed! Love your way of teaching, concise, straight to the point and fun.
Thank you so much for this! Really appreciated how smooth and thorough you were!
"INCORRECT!!" I did not see that coming 🤣
xD
You are awesome! This is exactly what I need for my project. Thank you so much.
Resoect to all programmers out there teaching us through tutorials , but Dev Ed teachings are in another level, straight to the point and extremly simple.... thanks Ed hats off to you
This video was exactly what I needed. Been looking for something like this all day.
That's some awesome content! I was waiting for a channel like this. Glad I found one today. Subbed instantaneously! Can you make a video on fetch API? That would really be helpful.
the world is so blessed to have people like Ed :)
This is honestly one of the best tutorials I've watched ever
Best teacher ever! 🏆🏆🏆 I was going nuts trying to figure out dynamic routes until now. You explain things so well, it's like sitting down with a good friend who knows lots of cool stuff and likes to talk about it.
good video,it's worthy 30min, I understood almost everything, tks so much
The start was a little bit messy, but I liked very much the explanation of the dynamic route, thanks man
That was great, learned more than I expected to learn and I got a better understanding of React from these 30 min than from a 4 hour course!
Thank you!
Probably the best React router tutorial I have ever come across.So much energetic you are man !! Hats off !!
Thanks for a fun pedagogical tutorial :D This makes me want to learn react even more!!
what kind of weed do you smoke man you seem extremely happy lmao nonetheless i enjoyed this video so much and it was very helpful thanks
eh. funny guys often got some deep pain lol. he makes dark jokes if u listen carefully lolololol
I think this is the best tutorial for React Routing. I have watched so many videos to learn React Router but couldn't learn it. Finally I have found this tutorial and learned the React Router properly. Thanks Ed.
Man whenever i'm fed up with anything web related i come to watch this guy and calm down, i love his way of explaining things so simple and he just seems as lost as me when coding then BAM everything works
ahah the intro is amazing!!
Love Your Videos! ❤️! I learn a lot from them! Thank You So Much!!! ❤️
Edit: OMG Thanks for the heart ❤️❤️
lol heart is no more
Even with the outdated components, still the best introductory video I've seen on Router so far. Plus, the comment section plus the documentation (read the docs, always) managed to keep this video useful, especially to understand the principles of this library.
That legit blew my mind. I needed the first 10 minutes to figure out how to do basic routing, I stayed for the rest and now my brain is on fire with ideas lol
Shouldn't `` components be inside `` and not the other way around? Just saying. 😜
It's a react thing...
just watched this video for 6 times.. i literally got 20% of understanding.. will watch more and more times to get 100% understanding
9 month ago, what is progress? How many times have you watched that?
@@pyloolex did couple of projects now, so much to learn, not finding difficult but learning is fun
I've watched like 3-4 videos on Routing, and no one, absolutely no one, made it this easy to understand! :)
Thank You Ed!! :)
Before knowing power of routes I was feeling there would be a tough time setting backend but after , it's super clear . Thanks Ed
LMFAOOOOO WHEN YOU SAID "this is the part of development that makes me feel... alive"... im DYING. i know man its so dry sometimes lol
Me: ditches uni lectures because you explain things so much better :)
I love how you explain with great simple, real live examples.. amazing teacher!
All you need for React
Formik for building Forms
ua-cam.com/video/3xMiK5mVBpM/v-deo.html
React functional Hooks
ua-cam.com/video/HmOw-45vg80/v-deo.html
React JS Full Course
ua-cam.com/video/ZWqfADc-0K8/v-deo.html
I just LOOOOOOVE your videos. You make my studies so much easier. Thank you !
API has changed, so use it like this.
const fetchItems = async () => {
const data = await fetch('fortnite-api.theapinetwork.com/upcoming/get');
const items = await data.json();
console.log(items.data);
setItems(items.data);
}
return (
{items.map(item => (
{item.item.name}
))}
)
Thanks man 😍
Helpful dude saved my time Thanks
"Easy squeezy lemon squeezano" .... I lost it there 😂😂
Here you go Everything about React from Beginner to Advance level
ua-cam.com/video/ZWqfADc-0K8/v-deo.html
Yeah 😂.. Its easy peasy i guess
Once again, Ed comes through with a winner. One can actually follow along with this and construct a working application. Some issue with the API used in the course, but suitable substitutes are available. I love the way he says "back ticks." I wind up repeating it every time he uses it.
The way you deliever the tutorial is genius. The thing that I highly appreciate is that you are able point out the key things to avoid mistakes and make me understand better. Thanks so much.
Why at 32:20 images field was needed to set to empty?
Hey, I have a question. You are using useState. Is it different from converting App.js to class and then setting a constructor with this.setstate? Because this looks som much simpler and cleaner. Thanks.
I ask myself same question...
@ As far as I know using the state hook is pretty much the equivalent as you cant use any hooks in React class components. They allow you to use React without classes.
When you use function based components, this is the only way to set state, with the "useState" Hook. You can't use setState in a functional component as you can in a Class Based one. BTW, you don't need a Constructor in a Class Based component to use setState. I only use a Constructor if I need to initiate something else (other than setState).
It does the same thing. useState is a React hook which provides the ability to implement states in functional component. It's a simple and cleane way than using the class components.
i wasted hours looking other devs but no one do and explain this basic but real life exercise better than you in this video, easy to understand. Thank you!
THANK YOU! Finally a good dynamic link tutorial, just what I was looking for.
Cool tutorial, thanks for sharing! Question: when console.logging "item.images" I do see the props inside, but when calling "item.images.transparent", like you, I get the undefined error. How come I can see it but not use it? Why do I have to declare the images object in the state first?
i was wondering this too at first. It's because the page renders once before the API request is complete. It therefore reaches the return statement before the API request is complete and runs the code calling "items.images.transparent". Before the request is complete this is undefined. If you add a console.log('test') or something after the FetchItem function is called, you'll see the 'test' appear twice: once before, and once after the API data loads
@@seanbarker4713 did you solved it? I've been dealing with the same problem for two days and still can't solve it :c
@@karsi14_ what I said above should work
@@seanbarker4713 I have a lot of console.log in all the code (I was testing why it was throwing the error) and that's how I discovered how it was rendering, I have a console.log after the FetchItem function is called and it still doesn't work, still throwing the same error :(
Some comments above someone told me to update my npm and React hahaha hope that combining both things it finally works c:
Thank you c:
since the API link has updated so add this in your shop.js file
{items.map(item => (
{item.item.name}
))}
My good man, you have no idea how much it means to me that I have found your tutorial.
I've been at work for two days trying to figure out how to do this. I was at my wits' end on why I could access all my data, but not one by Id.
You have my eternal gratitude! Have my like, have my subscription! HAVE EVERYTHING!
Thank you!
My next video I was going to check up on was setting up the API with Router and BOOM there it was included. This tutorial is PERFECT. Thank you!
In order for 'react-router-dom' to work I had to first install it... If you have this problem just open the terminal (on your project's folder) and run 'npm i react-router-dom'.
Well, he tells us to install it in the beginning :D
@@KalleZz_ oh I didn't notice it :P
Awesome tutorial! FYI - the API you're using in this example now returns "access denied."
Amazing tutorial! Loved how I learned some details there aside from Router like the image empty so that it changes as soon as it loads.
that was basically all i needed to get started on react coming from VueJs. going typescript too but should be similar :) thnx a lot. way more info than expected (like the hooks thing), even covered fetch. for a beginner thats an outstanding tuto!
* THE BESTEST REACT TUTORIAL EVER *
6th?
Ed , can you pls upload the codes
hey dev, the API link doesnot work. How to solve that issue. Thankx
You just made my day. I've been looking for an answer to this for two days now. Your content is on point and you're hilarious!
You absolutely smashed it! I've learned more in the last 30min than in the entire week!
The API is different now. In order to do it you can write the following:
1. Shop.js
- const data = await fetch('fortnite-api.theapinetwork.com/upcoming/get');
- setItems(items.data);
- {item.item.name}
2. ItemDetail.js
- const fetchItem = await fetch(`fortnite-api.theapinetwork.com/item/get?id=${match.params.id}`);
- setItem(item.data.item);
- {item.name}
-
Thank you
while following his tutorial I had a ,ype error with using items.map items.data worked. before i lost all my work on codesandbox i couldnt figure out how to map through and return all the names like he did at first in his first fetch call in shop.js how would you have done it?
This tutorial is outdated everyone
this was really helpful thank you...I got lost at a point when I was trying to implement it on a site I'm working on and this put me on track
You continue to help me make some of my favorite dream projects, thank you!
I don't usually comment or like tutorial videos but I just love this guy. Thanks for sharing your knowledge with us. You're a good UA-camr
this is something meaning full, clear crystal explanations. impressive MAN
Thanks for your help Ed! Was really stuck on how to use the dynamic part of the URL. This finally made some sense!
OMG, you make it so clear. Thanks! I hope you feel better soon, so we can see more of this marvelous content
Man your tutorials rock!!! Love your energy and interesting way of teaching. God bless you Ed.
You sir, are a great teacher. You make the whole process a joy. Your pleasant voice adds to it
Awesome tutorial, man. Very thorough and comprehensive.
I really liked that the workflow goes with actual human intuition!! super easy to understand and very practical. Thanks!!
One of the best tutorials I've seen to react. Great job dude!
This is Ed, the start of the video says it all!
Thanks man!
The best video for this subject. And your personal notes and presentation adding even more to it. THANKS!
Dude, thank you so much for create this content! I was figthing with routers for a week. You save my life Ed.
The best video I have ever seen regarding React-Router! Thank you so much!
Easily the best video explaining how routing in react works. Thank you so much!!!
wow, great video! good pace, well planned out, very clear and to the point!
Another awesome video. Thanks, man. I was very entertained, honestly. You explaining it makes it really easy to understand things. Ps: was laughing the whole time. God bless you and your family, Ed. Thank you ❤️
It is such a delight to watch you and you really make stuff easy!
I like your teaching style. I thought that react is so hard. But after finding, your react videos I fall in love with react. Thank you so much.❤❤❤❤❤
Love watching your tutorial, it give me energy to continue on my projects
I couldn't help but smile the whole freakin' time. Thanks, very clear!