Build a Recipe App With React | React Tutorial For Beginners
HTML-код
- Опубликовано: 9 сен 2024
- Check out my courses and become more creative!
developedbyed....
#react #javascript
In todays episode we are going to take the basics of react and we are going to create a real world application. We are going to learn how to build a food recipe application using only react.
If you are a beginner with react I highly encourage you to follow along because you are going to learn how to put all the small pieces together to understand things like how to fetch data from an api, how to update state and more.
❤Become a patreon for exclusive videos and more!
/ dev_ed
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.
📕 Things covered in this video:
-Fetch data from an api with react
- How useState and useEffect work
- How to pass down data in react with props
🛴 Follow me on:
Twitter: / deved94
Instagram: / developedbyed
Github: github.com/Dev...
🎵 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....
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
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
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
"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 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!
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.
Finally someone that actually describe what they do instead of "you can look it up yourself".
Thank you so much!!
This has been the best React tutorial where I actually learned by doing. I'm so glad I found your channel!!
“What this means is that React is quite stupid” 😂😂 love that line
Oh man!! dont know how to thank ppl like u... have no words man! Love ur work...
lack of single missing Github repo codes on the other hand you are very good explaining.
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.
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.
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 RUclips 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
Ed is a person that we all want to make as a friend :D
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.
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
One word to say! You are so good. Combination of clear voice and good teaching skill.
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
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!!!!!!
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!
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
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
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!!
Can't wait for your course! Really loving your content :D
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.
gosh i love this man, he teaches me much more than i read freaking dry docs from the react page
Can you make a video describing how you could take this data and store it on a database?
you are really a sweet person...i sat and did this tutorial as u were doing parallelly. thank you.
Thank you so much Dev Ed... from Indonesia. Keep teaching us.
Ntaps slur
Akwowkwo
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 :)
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
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!
This tutorial leveled me up so much thank you! Sub and Like well deserved!
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 💖
The best react tutorial to this day...
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 !
I lost it at "we got the chicken!"
did you find the solution?
did you put await before response.json()?
your way of explaining is really appreciable,you can even make tough things look so simple
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
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 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??
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!
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
: 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
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!!
Need more videos. React and React-Native too.
applauds from India for such an amazing tutorial ! ! !
Do you have some Udemy React courses? You're amazing teacher, I'd buy some.
This tutorial teach the foundation of React and now I am more clear on how React works. Thanks
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
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👍🏼
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!
0:00 - Ed has been scaring people since 17 Apr 2019
28:52 - 38:15 searchbar, I need this! thank you so much ! I subscribed and didn't skip the ads!
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.
Hey Ed! I want you to know your Javascript Beginners tutorials are insanely good. The best series I've found out there.
Web-developers, "Because we love stealing things...."
Ahahahahahahahah
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!
Damm I've never been this early
When I watch Him, Everything fall in place concept-wise , Thanks Ed..love you
I am Russian, but I totally understood what you explained. Thank you very much, it was very interesting and useful! Good luck to you!
This is probably one of the most fun tutorial videos I've ever watched! Pls keep making more such videos!
This is probably one of the most uplifting youtube profiles for developers. Thanks a lot ed! Great project to understand react hooks 🙌🏻
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.
This is so much helpful, and i like the way you present. Good job. May God bless you for teaching us
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!
17:43 I have an error down here. "Failed to fetch
at getRecipes (App.js:12:1)"
I put everything clear in APP_ID and APP_KEY.
Does anybody have a same problem with me?
having same issue
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!
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.🙂
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.
i love the way express and teach codes, big fan from Nepal
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...
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
Brilliant! Learned more in this video than in the past months from several books
im going to base my school project on this thanks for sharing your knowledge man!
Great easy to understand walkthrough with an incremental learning curve. Best React teacher out there.
you are the best.
I appreciate the ability you have to teach.
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!
keep it bro. your videos are awsome and teaching style is unique.Love from India 🇮🇳
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 👌
I really appreciate this video, cuz I've been through a lot of React js API tutorials, this one clear all my doubts ❣
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!!
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 am stoped at 27:23 and enjoying all recipes
great learning on React. Thanks again
Thanks a ton for all ur efforts!! ur videos are grt in such a way that u cover multiple concepts in just one video. No need to watch any other video for clarification, u cover it all !!!
Really thanks a lot..
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
Man I love your style of explaining things. if you have a paid course let me know.
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.
Thanks. This was my 1st Project.
You are amazing, this video is sooo helpful and easy to understand!!! thank you! We need more vids like this on react!!