I liked it a lot! I love when tutorials are fun, and have real mistakes and not just a copy paste as most tutorials are. Mistakes make us learn, and you made your mistakes funny, so a lot better!. Excelent tutorial. Im beggining with react, and this was very helpful to me.
I love Dev Ed! It's so nice to see someone being natural and themselves. The main thing I liked about this video was starting with the fetch, a lot of tuts leave it until the end when there's lots of code already over the place but this made it a lot clearer for me. Thanks Ed!
"As a thank you for all the things you've done to me." lolol. You're the best. Every time I need to learn something I check with you first. Thanks man.
I have done so many tutorials. This one and your other react intro are by far the best tutorials I have come across. You are relatable and you explain things very concisely. You don't overload us with too much information but make sure we understand things. Thank you very much for this. It is excellent!
I just finished this project. Thank you! My strategy: I first watched the whole video at 1.5x speed. Then I went to learn about React concepts like useState, useEffect from Codevolution yt channel. After that I tried to fetch just the dishes' names on my own, then I just displayed the names, ingredients, and image in a raw, unstructured form, and I peeked a little in the video to implement the recipe boxes using map method of javscript. And finally at last I styled the boxes according to my own style with CSS.
You're the man Ed! Just wanted to give you a shout, about a year ago I started coding because your videos. Now I'm 10 weeks into a 15 week bootcamp and still coming back to your videos :D
Amazing ! Just wow. I searched for many tutorials to get started with react, but this is just wow. Learnt a lot quickly easily and happily. You are super cool awesome!!
You are absolutely authentic I have been following your videos for a while now I hope you are well in the chaos of this pandemic please please do not stop providing content for us aspiring developers it means so much now more than ever...cheers!!!!!!
I built my first react app following through this tutorial, it was awesome! Thank you for the detailed explanation, learnt a lot and will keep learning! Thank you again :)
Hi! Sorry to disturb you but the api link is not working for me. Could you tell me how you did it? I keep getting the error: "Unhandled Rejection (TypeError): Failed to fetch". I would be very thankful if you could help me
ive added ur weather app , ping pong , rock papers scissorrs into my resume, it happend just bcoz of ur crisp explanation thank you dev Ed . i will definitly contribute a small part of my first salary to ur channel. just loving ur videos.
You are an excellent teacher and your voice is very motivating, very encouraging. Those who watch your videos and buy your courses are sure to learn fast. I'm from Brazil and I'm grateful to have watched your video. Thanks! Great!
I like your calm tone of explaining and also the way you make the project. Not rushed and nicely explained! Not robatic as you go through mistakes as well! Please make more tutorial videos in the future. I am asking for a Vue.js tutorial!
@@HelloTrending You can become a Tier 1 Patreon for $1 (or more) per month and get the source code (with comments and tips) for every video. www.patreon.com/dev_ed
Magnificent. After following Brad, Max, Quentin and Clever Programmer, I have to say that was the best tutorial I've ever seen. Great energy and very illustrative. The only hard part was when the recipes came up because I'm starving. Thank you so much for this excellent tutorial.
: React Hook useEffect has a missing dependency: 'getRecipes'. Either include it or remove the dependency array react-hooks/exhaustive-deps this query plz solve it
Ed your tutorials are the best I've seen! Your way of teaching makes difficult concepts easy and your humor is a breath of fresh air in tutorials. Thank you so much for everything you do and please keep it up! I feel a lot of progress following your stuff! and can easily see you becoming as big as Traversy!
at 37:04 it shows me error 'React Hook useEffect has a missing dependency: 'getRecipies'. Either include it or remove the dependency array' please some one help.
30:30 for the search to update onchange, i had to add the following line of code: onChange={(e) => updateSearch(e)} i am on react 16.1 i believe. where e is the event in const updateSearch = (e)
Bro you're literally the best. I'm in my upper div interaction design class for CS majors and we have to build a web app using an api we find on google. This has clarified so much stuff about react I was confused about. Keep giving us the gold man its invaluable
Thank you Ed for this wonderful tutorial, I have been struggling to understand state from long time and watched many videos from different tutors but this was my last video on the topic. ADVICE: If someone is struggling to understand a topic, please try different tutors and you will soon find a technique of tutor which hits your mind and you can say that was so easy people were making it complicated. For me funny things in between helped me like a refresh button before I get overwhelmed :)
Wow man! This was fun! Thank you for sharing this and keep the great work up!! ☺️😍👌🏻 Just finished this and I'm gonna style it later today, and andddd gonna share the result here!!
Use this `cors-anywhere.herokuapp.com/api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}` . This will resolve your issues. After this If you see 401 error, it means you crossed access limit. Wait for 5 mins to gain access again. Hope this helps.
I love people who are passionate,.and love what they do.Today I watched some of your journey videos and I can relate the situation and good luck for your journey.
@@daveluma big up bro, does really there in the degree so much useful things that we can't see as self taught ? Do u learn more from youtube or university plz ?
@@cutscenes3399 I’d have to say TH-cam taught me more practically applications & nuance for software development, but University helped build my confidence through hard projects (to be able to research and test solutions - pretty much learn that using stack overflow is a given). Personally University was crucial to keep me learning especially when I wanted to quit at the beginning, but I realized I wasn’t alone as I “suffered” together w/ other students. Now I have a boost of confidence, but I feel everything my university gave me is available online. University more or less in my case provided a tangible path that allowed me to explore different avenues in programming without thinking I’m over my depth. Pretty much the confidence to learn more outside of school.
This is an awesome tutorial, not only on building the app but also on the detailed explanations you give to each part of code. I really needed this! I am stuck working on a project for my portfolio, and with this video i get a better understanding of how React works. Loved it!
I keep get the error that useState and useEffect are not deffined I have been stuck here for quite some time. My code is identical to yours. Is it possible that only certain version of react support this?
Thank you Dev.. this is exactly what i was looking for - quick and short tutorial on how to create simple react app using external APIs... looking forward for more such videos..
Hey, when mapping the recipes from the API you can use the index instead of the label name. The code would look something like this, {recipes.map((recipe,index) => ())} This should take care of some issues you have when there are two recipes with the same name. It's not good practice to use Index. However, if you're not modifying any data like removing then index should be fine.
You taught us very clearly..thanks for the vedio...i dont get master in just one vedio..but u explained very nicely about 80 percent i catched..thanks for tutoral carry on more.🙂
quick useEffect explanation: useEffect is actually new to react which allows you to run some code whenever the component rerenders.it mean useEffect will run 1- when the component get render 2- when component updates 3-when component unmount also it takes in a second parameter which is an array that contains the values on which useEffect depends.
Great video Ed. If you don't already have one, I think true beginners would love to have a video just about creating create-react-app with the terminal and a few of the other basic commands. I had to pause the video and refresh my memory to get caught up. I also agree about Udemy's pricing, it's unfair that classes are always $100+ and then constantly "discounted" to $20.
i just wanna say i love you bro you are so passionate abt what you do best channel for web development i recommend this to my friends too just keep up the work man!!
of all the videos that I have seen yours is very good, grateful for sharing knowledge, I can ask you for a video where you can make a list with the added recipes, store them in a list and take data from that list and calculate it as an example: calculate the cost of a prescription
I know this was posted awhile back, but a way to make limited api calls stretch a bit farther would to just cache the calls. If it's the same recipe's over and over again, just cache the api call in local/session storage.
awesome. i'm halfway through the video. great seeing react being used on a realistic application. great explanation. And your excitement when it works is good to see, like when I (we) get it working too. :) thank you.
I liked it a lot! I love when tutorials are fun, and have real mistakes and not just a copy paste as most tutorials are.
Mistakes make us learn, and you made your mistakes funny, so a lot better!.
Excelent tutorial. Im beggining with react, and this was very helpful to me.
Have been struggling with react until i found this video... Love from The Smiling Coast of Africa ,The Gambia
You're a very good teacher, usually I start zoning out after about 20 minutes, but with your way of teaching I was following all the way to the end.
Same, the 48 minutes went so so fast
Best react intro tutorial I've found over the course of a week and feels much shorter than 40 minutes, it actually makes some sense now
I love Dev Ed! It's so nice to see someone being natural and themselves. The main thing I liked about this video was starting with the fetch, a lot of tuts leave it until the end when there's lots of code already over the place but this made it a lot clearer for me. Thanks Ed!
"As a thank you for all the things you've done to me." lolol. You're the best. Every time I need to learn something I check with you first. Thanks man.
I have done so many tutorials. This one and your other react intro are by far the best tutorials I have come across. You are relatable and you explain things very concisely. You don't overload us with too much information but make sure we understand things. Thank you very much for this. It is excellent!
I actually like it when you make mistakes or when you cheat it just makes programming more realistic 😂
It also teaches what not to do, how you can easily make a mistake, and how to fix it
No one cares.So yeah stfu or 1v1 me on fortnite
@@elpolodiablo5486 lol
@@elpolodiablo5486 wtf
@@elpolodiablo5486 lmaooo
This has been the best React tutorial where I actually learned by doing. I'm so glad I found your channel!!
Finally someone that actually describe what they do instead of "you can look it up yourself".
Thank you so much!!
Oh man!! dont know how to thank ppl like u... have no words man! Love ur work...
One word to say! You are so good. Combination of clear voice and good teaching skill.
Thanks for a quick starter tutorial on React/ Create-React-App! This is just what I needed to get going. Great explanations too.
I guess you dont even realise how much impact you have in our, developers' lives !! You are amazing.
I just finished this project. Thank you!
My strategy:
I first watched the whole video at 1.5x speed.
Then I went to learn about React concepts like useState, useEffect from Codevolution yt channel.
After that I tried to fetch just the dishes' names on my own,
then I just displayed the names, ingredients, and image in a raw, unstructured form,
and I peeked a little in the video to implement the recipe boxes using map method of javscript.
And finally at last I styled the boxes according to my own style with CSS.
You're the man Ed! Just wanted to give you a shout, about a year ago I started coding because your videos. Now I'm 10 weeks into a 15 week bootcamp and still coming back to your videos :D
“What this means is that React is quite stupid” 😂😂 love that line
Amazing ! Just wow. I searched for many tutorials to get started with react, but this is just wow. Learnt a lot quickly easily and happily. You are super cool awesome!!
Ed is a person that we all want to make as a friend :D
You are absolutely authentic I have been following your videos for a while now I hope you are well in the chaos of this pandemic please please do not stop providing content for us aspiring developers it means so much now more than ever...cheers!!!!!!
I built my first react app following through this tutorial, it was awesome! Thank you for the detailed explanation, learnt a lot and will keep learning! Thank you again :)
Hi! Sorry to disturb you but the api link is not working for me. Could you tell me how you did it? I keep getting the error: "Unhandled Rejection (TypeError): Failed to fetch". I would be very thankful if you could help me
@@siddhantjain1255 Hello, did you figure out? I am getting same error
@@Adrian-ro4xz Hi! Unfortunately I wasn't able to figure it out
your way of explaining is really appreciable,you can even make tough things look so simple
This is an amazing tutorial! As a beginner to React I learned quite a bit! So thank you so much for taking the time to showcase this!
ive added ur weather app , ping pong , rock papers scissorrs into my resume, it happend just bcoz of ur crisp explanation thank you dev Ed . i will definitly contribute a small part of my first salary to ur channel. just loving ur videos.
if you'd make full react tutorial i'd insta buy it, just saying
Yeah me too. He explains so well what a code does while typing. And I took udemy courses but his is very understandable the way he explains things.
me too make full tutorial about react
@@plitzkin which one did u take? im looking to learn react and looking at udemy courses.
+999999999999
Me too
Bro you have the ability of explaining complicated things in a simple way thats a true skill and also you make learning so funny. Thank you bro !
Can't wait for your course! Really loving your content :D
gosh i love this man, he teaches me much more than i read freaking dry docs from the react page
This guy is doing a good job. I am not how strong a developer he is personally, but at least he is able to put things together.
You are an excellent teacher and your voice is very motivating, very encouraging. Those who watch your videos and buy your courses are sure to learn fast. I'm from Brazil and I'm grateful to have watched your video. Thanks! Great!
Nice need more React videos...
I've got a full on beginner's 18 part react course on my channel. If you wish, check it out!
you can like the video
U r a fast paced tutor, better than udemy ... Entire concepts in single video.. hope to join the course .. Thanks from the core of my heart 💖
Can you make a video describing how you could take this data and store it on a database?
Man I love this dude. It's great that he keeps the mistakes in and has a jolly demeanour. Please do more of these mate!
Thank you so much Dev Ed... from Indonesia. Keep teaching us.
Ntaps slur
Akwowkwo
I like your calm tone of explaining and also the way you make the project. Not rushed and nicely explained! Not robatic as you go through mistakes as well! Please make more tutorial videos in the future. I am asking for a Vue.js tutorial!
28:20 You're correct, the explanation is spot on.
Hey, do you know how to get these files? He says something in the beginning but I can't understand it.
@@HelloTrending Most of them are here github.com/DevEdwin?tab=repositories
(Not sure about this one specifically, but here you go :) )
@@HelloTrending You can become a Tier 1 Patreon for $1 (or more) per month and get the source code (with comments and tips) for every video. www.patreon.com/dev_ed
Magnificent. After following Brad, Max, Quentin and Clever Programmer, I have to say that was the best tutorial I've ever seen. Great energy and very illustrative. The only hard part was when the recipes came up because I'm starving. Thank you so much for this excellent tutorial.
The best react tutorial to this day...
lack of single missing Github repo codes on the other hand you are very good explaining.
This tutorial leveled me up so much thank you! Sub and Like well deserved!
you are really a sweet person...i sat and did this tutorial as u were doing parallelly. thank you.
: React Hook useEffect has a missing dependency: 'getRecipes'. Either include it or remove the dependency array react-hooks/exhaustive-deps
this query plz solve it
ive encountered this problem too
const data = await response.json();
i had left out await which was causing the problem
he has a video on this in his react course chapter 3 waves 24/25th part
This is probably one of the most fun tutorial videos I've ever watched! Pls keep making more such videos!
I am having some trouble about CORS(Access-Control-Allow-Origin) . Would you please give me some advice?
I'm facing the same problem. Would you please share if you found any solution ?
@@varunpusarla any solution??
Ed your tutorials are the best I've seen! Your way of teaching makes difficult concepts easy and your humor is a breath of fresh air in tutorials. Thank you so much for everything you do and please keep it up! I feel a lot of progress following your stuff! and can easily see you becoming as big as Traversy!
at 37:04 it shows me error 'React Hook useEffect has a missing dependency: 'getRecipies'. Either include it or remove the dependency array' please some one help.
just put getRecipes function (whole block of code) inside useEffect
@@markomilanovic9416 Thanks
@@markomilanovic9416 I've putted it but it shows me " 'getRecipes' is assigned a value but never used "
@@soymarouane make sure you call getRecipes function after you declare it inside useEffect
@@markomilanovic9416 It works! Thanks a lot
This is an amazing tutorial!! Appropriate to beginners. You explain what you are doing and not just writing code. Thank you!!
I am getting a CORS error when trying to access the API, did someone else face the same problem
I had the same issue and watched a ton of tutorials on how to fix it to no avail only to find out I had set my APP_ID and APP_KEY backwards.
@yourmom thanks a lot👍🏼
Hey Ed! I want you to know your Javascript Beginners tutorials are insanely good. The best series I've found out there.
30:30 for the search to update onchange, i had to add the following line of code:
onChange={(e) => updateSearch(e)}
i am on react 16.1 i believe. where e is the event in const updateSearch = (e)
You are a real team player! Been trying to get this to work for ages, thank you!
Bro you're literally the best. I'm in my upper div interaction design class for CS majors and we have to build a web app using an api we find on google. This has clarified so much stuff about react I was confused about. Keep giving us the gold man its invaluable
I am getting an error when trying to access the API CORS policy
@yourmom It works but the response back is still false, error 401 same cors issue
Thank you Ed for this wonderful tutorial, I have been struggling to understand state from long time and watched many videos from different tutors but this was my last video on the topic.
ADVICE: If someone is struggling to understand a topic, please try different tutors and you will soon find a technique of tutor which hits your mind and you can say that was so easy people were making it complicated.
For me funny things in between helped me like a refresh button before I get overwhelmed :)
Do you have some Udemy React courses? You're amazing teacher, I'd buy some.
Wow man! This was fun! Thank you for sharing this and keep the great work up!! ☺️😍👌🏻 Just finished this and I'm gonna style it later today, and andddd gonna share the result here!!
i tried making the API request after registering with edamam but it gave me a CORS origin error pls what can i do?
@Edwin Carrasquillo I'm still getting a CORS error even with the recipes key. Not sure what I'm doing wrong.
@@PanPanPanit Most probably a spelling mistake with any of the keys or the whole url
Use this `cors-anywhere.herokuapp.com/api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}` . This will resolve your issues. After this If you see 401 error, it means you crossed access limit. Wait for 5 mins to gain access again. Hope this helps.
@@deepankumar1432 Thank you so much! this worked! Can you tell me why it wasn't working for me?
@@PanPanPanit Our browser is disabling the cors from the server. This herokuapp helps us in enabling the cors.
This is so much helpful, and i like the way you present. Good job. May God bless you for teaching us
I lost it at "we got the chicken!"
did you find the solution?
did you put await before response.json()?
28:52 - 38:15 searchbar, I need this! thank you so much ! I subscribed and didn't skip the ads!
Need more videos. React and React-Native too.
This tutorial teach the foundation of React and now I am more clear on how React works. Thanks
0:00 - Ed has been scaring people since 17 Apr 2019
When I watch Him, Everything fall in place concept-wise , Thanks Ed..love you
Hey Dev Ed, what do you use for your primary camera? It looks great.
Web-developers, "Because we love stealing things...."
Ahahahahahahahah
THANK YOU for all these videos on react, ive probably spent 60 hrs+ on react now but your videos are the best BY FAR! thank you so much!
thanks so much!
Damm I've never been this early
This is probably one of the most uplifting youtube profiles for developers. Thanks a lot ed! Great project to understand react hooks 🙌🏻
I am Russian, but I totally understood what you explained. Thank you very much, it was very interesting and useful! Good luck to you!
I love people who are passionate,.and love what they do.Today I watched some of your journey videos and I can relate the situation and good luck for your journey.
Amazing tutorial. Helped me out in my internship
hi, do you have a degree or you are self taught bro ?
@@cutscenes3399 I’m about to get my bachelors in comp sci.
@@daveluma big up bro, does really there in the degree so much useful things that we can't see as self taught ? Do u learn more from youtube or university plz ?
@@cutscenes3399 I’d have to say TH-cam taught me more practically applications & nuance for software development, but University helped build my confidence through hard projects (to be able to research and test solutions - pretty much learn that using stack overflow is a given). Personally University was crucial to keep me learning especially when I wanted to quit at the beginning, but I realized I wasn’t alone as I “suffered” together w/ other students. Now I have a boost of confidence, but I feel everything my university gave me is available online. University more or less in my case provided a tangible path that allowed me to explore different avenues in programming without thinking I’m over my depth. Pretty much the confidence to learn more outside of school.
@@daveluma thank you for the feedback bro, i wish you all the success mate in your internship and your future, keep it up
This is an awesome tutorial, not only on building the app but also on the detailed explanations you give to each part of code. I really needed this! I am stuck working on a project for my portfolio, and with this video i get a better understanding of how React works. Loved it!
As always Ed keeps it educational, funny and pertinent to life outside coding!
Quickly has become one of my top 3 youtube instructors!
I've got a full on beginner's 18 part react course on my channel. If you wish, check it out!
Brilliant! Learned more in this video than in the past months from several books
applauds from India for such an amazing tutorial ! ! !
I keep get the error that useState and useEffect are not deffined I have been stuck here for quite some time. My code is identical to yours. Is it possible that only certain version of react support this?
check your import statment to see if it matches with the video one
Ed you are you best in the business..i have never seen such a dedicated teacher in youtube before... hope you will get a million subscribers soon...
Thank you so much. This video has helped me more than any other react resource.
Thanks for making this DevEd you have helped me understand REACT so much!
Great easy to understand walkthrough with an incremental learning curve. Best React teacher out there.
Thank you Dev.. this is exactly what i was looking for - quick and short tutorial on how to create simple react app using external APIs... looking forward for more such videos..
i love the way express and teach codes, big fan from Nepal
Hey,
when mapping the recipes from the API you can use the index instead of the label name.
The code would look something like this, {recipes.map((recipe,index) => ())} This should take care of some issues you have when there are two recipes with the same name.
It's not good practice to use Index. However, if you're not modifying any data like removing then index should be fine.
You taught us very clearly..thanks for the vedio...i dont get master in just one vedio..but u explained very nicely about 80 percent i catched..thanks for tutoral carry on more.🙂
quick useEffect explanation:
useEffect is actually new to react which allows you to run some code whenever the component rerenders.it mean useEffect will run
1- when the component get render
2- when component updates
3-when component unmount
also it takes in a second parameter which is an array that contains the values on which useEffect depends.
thanks bro, i was really thinking about it, thanks for the clarification 👌
keep it bro. your videos are awsome and teaching style is unique.Love from India 🇮🇳
im going to base my school project on this thanks for sharing your knowledge man!
Great video Ed. If you don't already have one, I think true beginners would love to have a video just about creating create-react-app with the terminal and a few of the other basic commands. I had to pause the video and refresh my memory to get caught up. I also agree about Udemy's pricing, it's unfair that classes are always $100+ and then constantly "discounted" to $20.
You should do a complete series.. using backend and everything. I'll buy it for sure.
Man I love your style of explaining things. if you have a paid course let me know.
i just wanna say i love you bro you are so passionate abt what you do best channel for web development i recommend this to my friends too just keep up the work man!!
of all the videos that I have seen yours is very good, grateful for sharing knowledge, I can ask you for a video where you can make a list with the added recipes, store them in a list and take data from that list and calculate it as an example: calculate the cost of a prescription
Why doesn't TH-cam have a "Super Like" button? Amazing video man. By far the best beginners react tutorial I have seen.
You're doing great !! Whatever platform you release the course , i would still support you !! Keep it up bro !!
I loved the example, I am your number 1 fan and I aspire to be like you
Thanks for making his video. The way you explain is very motivating
I know this was posted awhile back, but a way to make limited api calls stretch a bit farther would to just cache the calls. If it's the same recipe's over and over again, just cache the api call in local/session storage.
great learning on React. Thanks again
awesome. i'm halfway through the video. great seeing react being used on a realistic application. great explanation. And your excitement when it works is good to see, like when I (we) get it working too. :) thank you.