Build a Recipe App With React | React Tutorial For Beginners

whoo hey are you tired of eating frozen pizza because I'm not but in this episode we're gonna create a food recipe app so we can search for other foods rather than frozen pizzas and junk food and as you can see right here we have a search bar and we can search for whatever we want we can get a banana recipe to make our lives a bit less miserable so get ready because we are gonna practice our react skills and a real-world project and let's get tasty [Music] arrivee let's create this food recipe app so the first thing I did is I just ran the create react app so it's just an empty boilerplate of create react app so you can run that MPs create react app and you can give it a name and this is this is what you get here you can go into the source for now and we can just delete everything in the header I'm just gonna get rid of everything in here I'm gonna switch to react here and I'm just gonna add the hello react for now okay now we're gonna need to pull this information on these recipes from somewhere right react doesn't give us anything so I found this API it's called a edom am either ma'am and this gives us all the recipes now it's limited we can only make I don't know like ten requests per minute or something like that it's free which is good but I just want you to to let you know that you can adjust span this and get as many requests as you want you're gonna have to pay for that but we're gonna keep everything for free for now and the first thing we're gonna need from here so if you go to eat ma'am they pick the best name ever we're gonna have to go to this recipe search api down here we're gonna hit sign up and just make an account we can start on this developer mode which is free so we don't have to pay anything you can start now and it's gonna ask you to add a username and everything I'm just gonna go into mine I'm gonna go here in the dashboard and let's see how we can get the actual request that we need to make for it well the first thing actually is we have documentation here which we can get the different kinds of requests we can make but the first thing we need to get is the authentification so they give you an actual key so when you're making the request they can check who's who's making that request and if you have an account on Edom and then everything is gonna work because they're gonna kind of like check and identification that key so where is that key I forgot I have no idea so let's just go around here account and it's not here it's that's I think it's I clicked on dashboard applications I'll here it is that is for applications and you're gonna get this recipe search API here and you can view and it's gonna give you the application ID and the application key so the first thing we are gonna do in here is we're gonna actually delete everything because this is an old kind of class component that we're not gonna be using anymore and react so let's just delete this and we can just create a Const app set it equal to an arrow function like so and here we can return our react codes just this is always so there we go and here we're gonna add a div with a class name make sure you use classname I'm gonna add that app and in here I'm just gonna add that h1 back with hello react perfecto so up here now I'm actually gonna get these keys Const the first one is gonna be the app ID so I'm gonna say app ID like this all uppercase I'm just gonna copy it from here and paste it down here now if you're gonna use mine it's not gonna work because I'm gonna disable mine after this tutorial so yeah because it's probably not gonna work if like a lot of you are gonna make requests anyway because they kind of block you and I'm just gonna paste this code also in here all right so we have our authentification things now to make a request we can actually go here to our API developer portal and they give us an example and we can go to documentation and recipes search all right and actually give you if you scroll down here a basic request that we can make so here's one example get request down here I'm just gonna copy this whole link here I'm gonna drag it in here and paste it in so we're gonna make modifications to this because this one is not gonna work this is just an example I'm gonna say example request set this equal to and paste this sucker in and actually I don't need the strings because they they give us these strings so what it says here is HTTP API EDA mancom search and this queue here is the query which basically means that whatever is after the query is the thing that you're searching for so Q equal to chicken it's gonna search for chicken app ID is gonna be this app ID so we have to put this in here perfect okay so that makes sense app key is gonna be the app key from here all right and here whatever we have after from zero to calories this is just some extra search filters that you can add with this API but for now we don't need it so what I'm gonna do is I'm gonna delete everything from here all the way to the a app key alright so all the way to the app key here I'm just gonna delete everything so this is what we have so far now I'm gonna make some changes to this the first thing I'm gonna use backticks so not string so backticks all right the number next to your one backticks here as well and now we can kind of interpolate our app ID so we can actually just copy this app ID from up here and paste it in here app ID we can get the app key and paste it in here now normally you would use environment tools to protect these because if you're pushing this code live people are gonna be able to see your app key an app ID okay so let's get going a bit with our HTML the first thing I'm actually needing here is a form so we have that input and a button that we can submit something so let's just create a form here normal form we're gonna remove the action for now and in here I'm just gonna have an input with the type of text and also a button with D I'm gonna add a type of sub type equal to submit to this and this is gonna be a search all right so this is what we have I'm also going to add some classes to them so on the form I'm gonna add a class name make sure to use class name because that's a a good practice to do and react again we're in JavaScript here so so class would mean JavaScript class and here I'm just gonna add a search form on the input I'm gonna add a class name of search bar and on the button I'm gonna add a class name of search button all right it's safe perfect and now what I'm gonna do is I'm gonna open up my terminal so up here new terminal and we can run NPM start and that's gonna open up our development server NPM start ok there we go we have our input here with these search so let's try to make a request to this I can actually close this up that's fine I'm gonna remove this logo too because we don't need it how do we make the request well I haven't talked about this but we can use something called use effect what is a use effect you might be wondering well every time our page rear Enders itself use effect is just a function that's gonna run and to illustrate that let me kind of show you what's going on I'm just gonna go up here I'm gonna delete this and I'm gonna make some space here below this one like so and I'm gonna add a use effect now this is not gonna work so we're gonna have to import it up here and react I'm gonna add a comma I'm gonna say use effect and I'm also gonna use state because we're gonna use this as well and let's let's let's take a look so we can use effect this is a function and it takes an arrow function as a parameter now in here we can run anything for now I'm just gonna console.log effect has been run all right like so perfect now let's kind of illustrate what's going on here I'm gonna just add on this button for now rather than saying search I'm just gonna change it let's let's also create a state here so just illustrate what this use effect does I'm gonna create a Const I'm gonna say counter and set counter I'm just gonna set this equal to you state and I'm gonna add the value of zero so zero and in here rather than saying search I'm gonna add counter all right so we're interpolating this and adding it here so this is gonna say zero because this is the value and we can change the counter if we want by adding an on click on this we can set it equal to I'm gonna add some curly braces and for now I can just run the arrow function in here actually we don't need to create another function because this is gonna be just one line of code I can just set counter to counter plus one alright this is just gonna increment this by one so if we take a look it's a zero up there if i zoom in a bit get rid disappear are you for real it's not going away haha oh my god I'm getting control there we go if we click it increments by one the problem is this is gonna refresh because the form submits and and and yeah this is a button type submit' so that's not gonna work so let me get rid of this and we're gonna have to edit someone somewhere else oh my goodness today has been amazing let me get rid of this but hey this is what happens man this is what happens so what's going on here and we're gonna have to get rid of this whole on click and I'm just gonna add it outside somewhere so I'm just getting rid of everything here outside this for my discrete the h1 that says like so and here we're gonna add an on click of an arrow function that says sets counter to counter plus one all right let's save now it's not gonna refresh because it's not empty in the button let myriad the button name here where were you button alright let me close this up like so and I'm gonna reopen a button tank ok and he in here this is gonna add search again hit save okay hit hit it's gonna increment okay one by one one by one now look at what's going on in here if I hit refresh the first time our page renders its gonna run that effect effect has run so when our app render is the first time this use effect runs and after every time something rear Enders on our page in this case this number it's also gonna run so it runs every time our page re-renders now we can kind of modify this and we can run it at certain points if I only want this to run once so the first time the page gets rendered I can add a comma here and this use effect and I can just add an empty set of arrays in here okay this is the second argument of this use effect I'm gonna hit save and now if i refresh it only runs once the when our application gets mounted which is really good because we don't want to make that request tendo jillion times okay we want to make that request once and when our page first loads that's where when we should fetch our data so from our API and now look if this value changes this effect doesn't really run more now we can also add in this argument the state that is gonna make it run so maybe I just want one specific to make this use effect run so in here you can add counter for example and now only when counter changes that's when the use effect runs so if you leave it empty it's only gonna run once when the application mounts and alternatively you can add values here that's gonna make this use effect run so now look it's gonna run every time the counter is changing so for now let's just leave this empty hope that made sense I'm gonna get rid of this h1 because we don't need it I just kind of wanted to illustrate what this use effect does so in here now with this empty brackets here we can make that request from the API so what we would do is I'm gonna get rid of this we're gonna make an async await call here now the way we can do that is before this arrow function we can just write async thanks so and in here we can run actually a simpler way to do it is rather than writing everything in here is to create a separate function so down here what we can do is we can create something Const get recipes alright and this is gonna take care of just fetching all of our data we can set this equal to an arrow function like so and in here we can just add async before all right and now we can make asynchronous calls and the way we can do that we're gonna say Const response this is gonna be a recent response now this is not gonna arrive to us in like instantly so we're gonna have to await it okay we're gonna add a wait and then we're gonna make our request so a fetch so we're gonna fetch the data from up here I'm just gonna get everything from all the way up here and just cut it like so I'm gonna get rid of this example request get rid of it and we can get rid of this counter too I think so make everything a bit cleaner we can fetch and we can add it in here oops what's happening alright perfect close this up and now once the response come back comes back okay we're gonna wait we're gonna fetch once it comes back we can say cons data here this is the final data and we're gonna take this response and we're gonna create a JSON out of it so we can add this JSON method on top of it and this is just kind of formatted in a way that we can work very easily with the data alright so that's all we need there and we can actually console.log deep data in here now I didn't write this correctly response dot jason and now again this might take some time because we are requesting everything from an external API okay so we don't know when this information comes back so make sure you add a wait every time you have a promise so some data that doesn't come back and still me okay so again just any external requests that you're fetching will have to be made with async await or alternatively you can use just normal promises with dot then this could have been written like fetch let me just copy kind of this so it's kind of to give the example you can write this like so dot Dan and then you would get the response here and then in here then you write then you would get the actually here you would get the data so responds like so and then you would response that JSON all right you get the point but this is a way simpler and nicer way to write everything in my opinion there we go console log data let's see what we get hit save and we should get I'm gonna zoom out a bit and we are not getting anything well why are we not getting anything well we need to add it to the user fact so this function is now running right now so in this use effect function we can just write get recipes all right let's save let's take a look now and still nothing and there we go we get the chicken everybody let's open this up as you can see we have count from hits and the thing we need is these hits so we got the parameter chicken if we open hits these are all the recipes we open up the Xero recipe look at that we have the images we have the number of calories we have just so many information that we can take out of here and use it in our application we also have ingredients look at that you have everything you need so you can actually build this out any way you want just because you have so much information and this and this request so the thing I'm actually gonna do is I'm just gonna pull out these hits from from this request because that's kind of all I need so to do that and again please be mind that they can limit you a bit so make sure you you don't control save a lot of times and make a ton of requests because they're gonna stop you from making requests and then it's gonna throw you an error so if it shows you an error just wait a minute and just try to request again and see if it works if it doesn't just leave it down in the comments because it might be something else wrong so I'm just gonna pull out this data that hits now I'm actually gonna go up here and create a state and set that state equal to you whatever data comes back from this API so let's go up here I'm gonna create a Const recipes all right I'm gonna put everything in that recipes and I'm gonna add something called set recipes that's right recipes ok that's good I'm gonna set this equal to AU State and I'm just gonna add an empty array for now because that's what I'm gonna have I'm gonna have an array of objects look it's an array of objects okay so here we set this equal to you state and that's good and now let's take a look here and this get recipes rather than just console logging this thing out I'm gonna set recipes like so to the data dot hits alright so I'm just setting everything to that data hit save okay now everything all of our recipes are in this state so we can theoretically just go over the state and just visualize everything so let's create an actual recipe component and then we can map through it and we can output it in our app here so let's just go here create a new file and I'm gonna create a recipe dot J s like so in our recipe that is I'm gonna import react from react like always perfect and I'm just gonna go down here I'm gonna create a Const recipe set it equal to an arrow function like we did so far here I'm just gonna return and set this to react really quickly return and we're gonna return some JSX so what do I want to have in this recipe well I'm gonna create a div and let's see here I want to have a title so I'm gonna say title I wanna have what we add to this I'm gonna have a list with the ingredients which I'm gonna add after let's just add a description is it a description now let's add a calories so we're gonna display the calories and we are also gonna add an image image here which I'm gonna leave blank for now I'm gonna export default recipes so I'm gonna export this recipe hits save and I'm gonna bring it in here so all the way up here I'm just gonna add a import recipe from recipe dot slash recipe there we go all right so let's take a look at the information that we can pass down here so for now let's just take this recipe and output it to the screen so again remember that we have all the the requests that we made are set and this recipes so everything is stored in here from that API so what I can do is I can get this recipes I can scroll down here after the form I'm gonna add curly braces I'm just gonna say recipes dot map because remember this is an array and I just want to map over all the objects in this array I'm just gonna add recipes that map and the thing I'm gonna do is I'm gonna get a recipe so each individual recipe from here and rather than adding curly braces I'm gonna add parentheses because I want to return some HTML or JSX and in here what I can do is I can just output the recipe all right let's save let's take a look and as you can see if you get this error we finally got it it means that I made too many requests to this API so what we have to do is we have to actually wait a bit and then it's it's just gonna work so now I also have this random semicolon here so let me get rid of this and I'm also gonna console.log up here the data that hits and hopefully this is gonna work in just a bit so if I hit ctrl save again it's if I hit ctrl save it's gonna fetch that API again so unfortunately yeah it's limited so hit save let's see those a fetch it now it actually fetched it so as you can see here we're getting output that recipe component is getting outputted 10 times 1 2 3 4 5 and whatever you can count to 10 times we have recipe now this is empty packs the cage is gonna output this generic title and calories that we add it in here and the recipes is just gonna output this nothing interesting but let's take a look at how we can add the title and the calories and everything from here so as you can see this is the the states that we have we just have a bunch of a race that we mapped over and in here we have recipe again so if we open up recipe we can get something like URL and there should be image here so we can get the image by going into recipe that recipe got image here we can also get the label and we're also gonna pull out the calories so to access this now we kind of name this recipe to in here so to access this we're gonna create a title prop set this equal to recipe dot recipe again because we have recipe here alright that's why I add the dot recipe and then dot and we're gonna have to access the title which is gonna be the label so in here recipe the recipe dot label alright that's gonna be an art title we can also pull the calories which is gonna be set equal to recipe the recipe dot calories and lastly let's pull out the image it's gonna be recipe dot image here ok go back here I'm gonna actually make some space this is gonna be image equal to recipe there are recipe dot image had saved so this is what we have and in our recipe rather than adding title calories an image we can deconstruct her everything by adding these curly braces and here we can just pull the information from here so we can pass down the props into the component here so we can get the title put it in here we can get the calories in here and we can get the image and pull it in here so essentially what we're doing is we're taking things from the state right from this state and we're passing it down into the props and passing it down in this component so we're just flowing down the information from this state in here all right that's all we're doing we're passing down information from AB components to the recipe component with the props so in here all right so once we have it in here we can replace this title with curly braces and title we can change this calories curly braces calories and we can replace the image source not with strings but with the image that we're getting from the prop hit save let's take a look let's hope it works oh please please well this takes quite a while the oh wow look at that everything works nicely let's let's make the smaller bit and as you can see we're getting the title we're getting the number of calories and we're getting the image as well so who could it get good things are working now we have an error here it's which says each child and the list should have a unique key prop and then what that means basically is that we act as quite stupid and it needs a unique identifier for each of these items because it's gonna make it render faster well well theoretically what what this is basically is let's say we want to remove this item okay and if it has a specific key to it then it's gonna know that hey if I only need to remove this and I don't need to re-render everything else in here because I have that unique key all right and if you don't have that everything is gonna really render in here so all of these elements I think so I'm not 100% sure so quote me and don't quote me on that I'm have you wrong but what we can do is we can go back to this recipe and for now we can just add a key and said that equal to now this needs to be something unique but for now we can just set it equal to what our title has and that's that's kind of gonna get rid of that error so hit save and as you can see it gets rid of everything of all those nasty errors and yeah look at that we have our information now the cool thing would be is that we should be able to search for something in here and then we would get the results based on that whoo how do we do that ad well let's take a look at what we have here in our input so for now let's create a state for that search so let's go all the way up here to where we have our state and we can create something called cost we're gonna add a search and is sad search we can set this equal to Cu state like so and I can just add an empty string okay and now so this is an empty string with a search I can go down here to the input and I can set the value of this input curly braces again with the thing that we have in our state which is an empty string so we don't have anything alright paste it in here hit save and now you're gonna see that if I try to write them here it's not gonna work nothing's gonna work well why doesn't this work and I'm going crazy and I too complicated well the reason why this doesn't work is because hey our search here is an empty string so it's always gonna be an empty string I can write whatever I want in here because the value is always gonna be set through this empty string so it's nothing so whatever I write nothing's gonna happen how can we fix that well we can add an on change event on it so we used click before unchanged basically means every time that input changes so if I add a number or something or a value to it it's gonna run so we can add an on change in here I'm gonna add empty curly braces and we can run a function now what do we want to run well I can create a function in here so right above our HTML JSX whatever it is who cares Const update search alright this is what I'm gonna create and we're gonna get an event from this I'm gonna run an arrow function and basically the event is every time you run an unchanged or at a click you're gonna get this event and basically you can access the T target from this event so basically what we want to do here is we have this event and all we need to do is set this search okay so we need to modify this from the empty strings so every time a user clicks in here and this on change is gonna run we want to get that set search from our state and what we want to do is we want to set it to e dot target dot value so this is the value of the input all right and we can take this update search and pass it enters on change so now if we hit save this is gonna update normally and I'm actually gonna add a console log and we're gonna see that so in our Const updates Church I'm gonna console.log we're gonna console.log these what did I call it search alright so this is our input search hit f12 and as you can see as I write our state changes perfect now you you might be wondering Oh perfect add I can just add and this effect remember I can just add the from chicken here we can add the input all right that's correct we can just add the search from here and pass it in here all right and then we can just use this effect and we can use it so it runs every time our search runs so remember we can get new recipes every time we hit on this button so every time I hit it's gonna update automatically correct the problem is though that every time we write one letter in here it's gonna try to fetch this API and that's quite crazy because we might write a lot and we can make like 10 or 20 requests without even writing anything so that's not really good we want to fetch that much data and since we're also limited with this API it's just not a good idea so what we want to do is I wanna I don't want to run the search here and this use effect okay I don't want to run it every second when we write in this input and just to illustrate it I'm just gonna console.log let's say we are fetching data so if I add the search now take a look in here if I right look I don't wanna I don't know about you oh my god look we're getting the error no because I tried to see I tried to fetch the data 10,000 times so so yeah that was a bad idea so I don't want to do that so let's get rid of that let's get rid of this search as well and what I want to do is I want to store this the way it is and I actually want to create another state that only submits itself after we click the button so after we click this search button okay I don't want this to to go crazy for me so only when I click this search I want the thing to to fetch the data for me so how do we do that well we can create another cost and I'm gonna say query for this so this is the finished text that I wanna I want to add in here query and I'm gonna add a set query to this like so I'm gonna set this equal to you state and for now I can add the default of chicken all right and I can actually change the chicken from here I'm gonna add a dollar sign in curly braces I can set it to this query all right so now everything is still gonna work the same now what do I wanna do is I want to go down all the way here so below the update search or above whatever you prefer I'm gonna add a cost I'm gonna say get search like so this is gonna be equal to I'm gonna have an event here as well and what I want to do is I want to add this get search on the forums submit so whenever we submit this form that's when I want to run this get search now the first thing I want to do is stop that page refresh and we can do that by e dot prevent default like so all right perfect now what we can do is we can set query which is up here so this state we can set this query equal to whatever we have in our search ok so after we written everything and we hit the button to submit we can just get the finish the text rather than when the user is writing like it updating every second so we can just set this equal to search all right so the finished updated value in our input all right perfect so I think that's all we need for now and on this form now we can add an unsubmitted so after the form submits we can set this equal to we can run curly braces get search ok all right one last thing we want to do our use effect now doesn't run only when the page first renders well again we had a problem if we add a search then it's going to update every time so that's why we created our query here which is only gonna update only after we hit the submit button ok so we can add this query in this array now and this is only gonna run again only when we click on the submit button because that's the only time this chicken value is gonna change ok hit save let's take a look let's see if it works all right so we're not getting any error messages so now as you can see this is still getting typed out but our use effect doesn't run our use effect only runs when our query changes which is chicken right now so here let me just get rid of this and this console log and look if I write banana hit search it's gonna get all over banana recipes nice so everything works just fine now the thing I want to do is I actually want to reset the input in here I don't want this to to remain in here so the way you can do that is and let's see after you do the get search you can set search back to empty strings our set search you state here alright let's save let's take a look and voila da da da I'm gonna write who what should be right peanuts hit enter and as you can see it gets removed and everything loads up just fine before I go let's quickly style this a bit and let's also add the ingredients so to actually get the ingredients to you and we can access it and then API if you check we can add an angry have my right ingredients in Ian's like so you can set this equal to its own recipe that recipe dot ingredients okay and this is actually another array so we have to loop through this we are gonna have to go back to recipe and here and we can pull that that recipe recipe today well known recipe ingredients I apologize angry tiens link so we can pull it in here and here we can just create a list or something soon on order list or a ordered list let's go on ordered list for now and in here we can just ingredients we can loop over it with the map and here ingredient ingredient we can just loop over it and add normal parentheses and we can just return an L I from here and I'm just gonna add ingredient text alright it's safe let's take a look and this should also pull in all the ingredients wow look at the styling that's actually superbly amazing so we have everything pulled in here that to do some basic styling let's go to our we added everything in here in our app dot J s I'm gonna get rid of everything in here and our app dot CSS I'm just gonna get the app I'm gonna add a min height of 100 VH to this and I'm actually gonna add a background gradient if you want a cool gradient you can go on web gradients in here and you can copy one so let's copy let's steal because we love stealing things I'm gonna steal this one and I'm gonna paste it in here alright that's one that's also adjust the search form here I'm gonna add a min height of let's go 10 V H a display flex to this justify contents enter a line item Center alright let's go to the search bar for this one I want to add a width of 50% I kind of want to make it long almost half of the page I'm gonna get rid of that border border 0 none actually and a padding 10 pixels let's take a look at how that looks ok so way better already now looks kind of ok let's make the search button a bit nicer I actually got lazy on this one as I see here I just added a a color by a background of light coral oh my god what am i doing with my life so just a light coral background to this I removed the border none' I usually remove the border on this a padding of let's do 10 pixels and 20 pixels and a color of white alright let's take a look so something like that now this kind of doesn't match but the gradient we have so okay so we gonna copy the other one oh my goodness let's copy and paste this one in here and white not the white oak alright and for let's see what else do we have here let's also add everything in this map and to a a div let's create a div here and wrap everything in here because I want to add this play flex to all of these so in here I'm gonna just gonna wrap it into a div and I'm gonna add a class name of recipes to this class name of recipes alright hit save and let's also get those recipes in here and I just want to add a display flex to it a justify content of space around and that's also and a flex wrap of wrap alright so the content moves to another if we make it smaller it's gonna wrap around its save alright looks way better and let's also customize these a cool thing we can do actually is we can create a CSS module now add what is a CSS module it's a way that we can kind of encapsulate our CSS to a component Edie what are you talking about you're still not making any sense okay so what you can do okay so let's say we use search form in here correct okay then I want to use search form in here in our recipe okay well it's gonna have the same style well what the module allows us to do is let's say I have a search form module as always search for its CSS module for our app so search form is only gonna apply to our app yes if I have another search form with the same exact name is in here in our recipe so if I create another module for this one specifically it's it's gonna be it's not gonna care that we have another one recipe so it's kind of gonna only relate to that so basically what we can have is we can just make simple classes again we can have a class of title in here like title in here and it's not gonna care that we might have another class of title in here so let's take a look on how we can make that just as an example for why not let's learn more about react so we can just create a recipe dot module dot CSS and now again all of all the CSS classes that we write in here will only be related to this recipe okay so so let's go back here and our recipe I'm actually going to show you how we can add this I'm just going to create a recipe class here I'm gonna add a border radius of ten pixels a box shadow let's add a box shadow five let's say these zero pixels five pixels and some a lot of shadow in here black I actually don't like to leave it on black I like to give it a grayish kind of look to it let's add a margin of 20 pixels he display flex hello flex direction the column just add some basic styling here if you want to learn more about flex box I do have a video on it but I really don't want to take too long here so yes I do have it written down here so if I'm looking here and that's why I'm cheating okay line items Center and a min width of 40% okay so it's just some basic styling to each of these sections alright now how do we add the CSS modules in here well we just import it import and we actually have to give it a name style from and then we can go to recipe dot let's do dot slash recipe dot module dot CSS and now in here rather than adding class name of equal to Mike recipe we need to add it like so we need to have curly braces style dot and then the recipe alright hit save let's take a look this should work and as you can see it works so it adds the styles to it now I made a mistake here for some reason I don't want to add that the h1 I actually want to add it to this whole div so this is the way you can add custom made CSS for each individual section class name we can just why are you hating me today alright class name equal to we go hit save and now it should look a bit more decent let's take a look come on chickens load up there you go we have some some decent styling here now I actually encourage you to just change these calories and make it a bit nicer for the images I just added a border radius to them so I just made like an image class here and added a border radius of 50% and a width and a height of I think they were the same height so something like that hit save and in here again the way you can add it is class name equal to and you can do style dot image all right so just create an image class and that should work so as you can see right there it works and we can actually kind of resize this and kind of it's kind of responsive as you can see it doesn't look that great but it's still responsive so that's good I cannot believe I talked for almost an hour but I made a ton of mistakes so that's fine hmm well anyway thank you so much for watching hope you enjoyed this tutorial I'm gonna get my course I'm gonna start filming my first course in a week so I hope you're excited for that for now I think I might just leave it on patreon and then maybe a personal story just because I can set my own prices and I can go way lower than that most sites like you they mean udemy also I don't know they had a lot of problems with soul and content and I kind of looked into it and then quite sketchy so I'm not sure if I like them but again I really want to set my first course for as low as $5 just to show you guys some appreciation for everything you've done to me so far so thank you again please drop a sub and and you know you know the deal you know what to do thanks again and I'll see you next time go make some frozen pizza

Channel: Dev Ed

Views: 683,016

Keywords: react tutorial, web development, javascript tutorial, react tutorial for beginners, react for beginners, recipe app tutorial, recipe app react, react api, react hooks, react usestate, react useeffect, food app, react course, react js, dev ed, react app tutorial, how to create react app, build an app react

Id: U9T6YkEDkMo

Length: 48min 10sec (2890 seconds)

Published: Wed Apr 17 2019