Learn React #11: React Project #1 - API + Todo List

hey everyone and welcome to today's video where we're going to be doing our first project of our react course now this project is going to be pretty simple but we're going to use everything that we've learned up until this point then we're going to go ahead and introduce more react concepts things like redux and then we're going to make another project using all of those things so it's going to be pretty exciting and i'm really excited for this video i hope that the code is zoomed in enough and i have everything prepared for you so if you find value in this video please consider leaving a comment liking or subscribing and yeah i just read every single comment um and i love interacting with you guys so let's just jump straight into it the application we're going to make today is going to use a very simple uh public api from a website called jasonplaceholder.typeyco.com and essentially they pretty much just have a bunch of fake endpoints that you can hit and we're going to hit one that we've hit in a previous video called the to do endpoint so in this to-do's endpoint if you just hit the regular endpoint you just get a list of a ton of different to-do's 200 of them and then if i wanted to get the information for a certain to-do i would do a slash for example let's say if i want to get the information for to do number six i would write slash six and i would just get the information for that to do now you'll notice the information is the same but we're going to pretend that by hitting this end point where you are passing in an id you are actually getting more information just for the purposes of our example now the way our application is going to work is we're essentially just going to have two main screens we're going to have just a slash endpoint and that slash endpoint is just going to show a list of all the to do so you know maybe individually just all the different to-do's here all the way down to 200. and then when you click on one of these to-do's it will go to slash on our browser to do's and then the id and from there we are going to make an api call that is going to get the information for just that specific to do and we will display that specific to do so two api calls being called here uh the first one on the main page we are just calling uh the to do's that gets the whole list of to do's this endpoint right here and then once we get to uh this page we are calling the to do uh with the id so we get the information for that specific to do and inside of this we're going to be using things like uh conditionals we're going to be using the map functions we talked about react router and all that good stuff that we've learned up into this point so let's just start coding so over here i have my code sandbox and um obviously this is going to be public i'm going to have this in the description of the video so you can see the full results you can fork it and make your own version of it and play around with it and let's go ahead and install some dependencies the first thing we want to install is react router that we're going to need to use it so the react router project uh library sorry is react dash router dash dom so if you're following along on vs code and you're using create react up and stuff like that in your terminal you can go ahead and type mpmi react router dom and that'll go ahead and add it to your package.json um on code sandbox you don't have to do that so i can go ahead and type in react. and just click click it and it'll automatically install it for me here let's also go ahead and install axios which is the library we are going to use to make the api request the get request to that fake api that we looked at let's go ahead and get that we can also go ahead and install material ui we're not going to style this application and ui is a library that is used to style react applications and if you're interested in that i have a whole 31 video series on how to use moto ui with react highly recommend going through that once you learn the basics of react to learn how to start and style your application to look absolutely amazing we're going to install that because i'm going to use tiny little elements here and there from material ui but we're not going to go too crazy and we're we're not going to go and style every single portion of this application in fact if you want that could also be some sort of homework that um after the video is done you go ahead and you know try styling it yourself um using some of these things from material ui but we're just gonna use some tiny tiny tiny components from the material ui library so i think that's all we need for now if we're missing anything else we can install it as we go but let's go ahead and start structuring this application the way i want my application to be structured is i'm going to have all the routing stuff in my app and then i'm going to make a new component for each one of these pages and then if i need any other pages for example if i want to make these individual little to-do cards into their own components i'm just going to make a new file for that as well so the first thing i like to do is to just start off with the routing so i'm going to make one uh file for the uh for our routing and that will represent you know this page that's good and let's call that like to do's um or yeah let's call it like to do's.jsx then i'm going to make another file and that one's going to be for the individual page so i'm going to call that to do.jsx and then finally i'm going to make actually before i even make the to do cards let's just go ahead and make these ones so just to make sure that routing is done fine what i like to do is with each one of these individual components i'm just going to create a regular component you know constitutes um i'm just going to return some placeholder jsx some uh something like this is the to do's component okay export default to this and this i'm just gonna make it you know i'm gonna copy this and do it for to-do's as well um and i'm just making this so that when i set up the routing i can test to make sure that the routing is done properly so now i'm going to come back to my app once i have these two components made and what i'm going to do i'm going to delete all this uh boilerplate stuff i'll leave the class name equals app stuff because it centers everything nicely and i don't want to rewrite the css for that but what i'm now going to do is i'm going to start making our routing so if you remember for routing we use react router and i'm going to just go ahead and copy an example from their documentation it's pretty much the exact same as what we saw um in our previous video so all i'm gonna do is i'm gonna import all this stuff for this we're only going to need these imports so our router which is our provider our switch statement which will allow us to determine uh where we want different routes uh to go and obviously just our regular routes so we can go ahead and import that and now in here let's go ahead and add our braces back in i'm just going to set up our route our router and now i can nest everything else inside of it once i have our router set up and essentially all we're really going to do is set up a switch statement so our switch statements we're going to have two routes inside there number one is going to be the route that just matches with slash so this slash is going to be our quote home page and when we're on our home page we want to just show the list of all the to-do's so i'm going to i'm going to import and display the to-do page so import to do's drum dot slash to do's and i'll go ahead and add that here and now a cool thing that we're going to look at is we want to actually pass in we want to actually pass in let's go ahead and save that so formats we want to pass in an id with the doodoos path so i'm going to pass in to do slash and then colon id what this does for react router is we are telling that that that is going to be a parameter that we want to access inside of the actual component that we're going to be displaying and in this case the component we're going to be displaying is to do and that id can be anything ideally it's going to be a number that correlates with our to-do um but when you have a colon here and then a name of a variable that means that it will match to do slash and then anything that comes after it and passes in that you know id that comes after it as a variable into our to do component so let's see it looks like we're having an error so oh i accidentally imported uppercase react i think over here let's go ahead and move that to lowercase react there we go so we can see we're on just slash let me see if i can it's going to be hard to zoom this in but we're on the application uh and then just slash and it's saying this is the to-do's component maybe i'll change the text to be a bit bigger uh so it's easier to at least read the text so i'm going to change those from paragraph tags to h1 tags the url isn't as important to see because i'll just tell you um what the url is and you can see it says this is the to do's component and if i go to slash to do's slash um and you know what it might even make sense to change this to slash to do because it's an individual to do if i go to slash to do slash you know one for example you'll see we are on the to do component now and let's see how it works when we want to actually get that id because we're going to need that id to call the api so let's um you know go in our to-do things and in order to actually get that id we can use a function a react hook that comes with the react router dom called use params so i'm going to go ahead and import use params into our to do component we can get rid of all this we're just going to keep the use params function and to use the use params function it's quite simple we just go ahead and we declare our variable and we destructure it from the use params hook so in our case if we go back to the app we can see here that the pram variable i'm passing in is one called id because we want to get the to-do id i can go back to my to-do component and go ahead and let the id um since this doesn't change i think you just set that to const you can change that so const id is equal to or destructuring it from use params and now what we can do is in our return let's say for example um i can be like you know say something like this is the to do component and the to do id is and then um pass in the id and you can see here i'm now getting the to-do id is one because i have one after the ul and if i had you know like three thirty thousand it would pass in thirty thousand so this is a cool way to get a variable from the actual url parameter um and you know when we have uh to do is equal to one and we go to is equal to two we want to be able to see that um the to do is changing based on that and in order to do that we need the id so this is a really good start that we have going on here now that we have the routing pretty much set up the next thing we're going to do is we're going to work on getting the data and in order to get that data we are going to use our use effect and specifically we want these use effects to run as soon as the component is rendered so we're going to go ahead and import use effect so we're going to destruct our use effect from the import use effect from react and now what we can do is we can go ahead and use it so the first thing we're going to do is type in use effect and we're going to create our use effect so if you don't remember from my previous video we actually looked at making an api request with the use effect hook and if i can pull up the code right here you will see this is the code that we used to do it i'm quickly going to copy that and paste it into our application so let's go ahead and take a look at what we are doing so the first thing that's happening here is and let me go ahead and minimize this stuff so you can see the code a bit better um the first thing we're doing is we have a use effect and within this use effect we are essentially passing in an empty array at the end which means this use effect is going to only run as soon as the component is mounted the first time that it is mounted and if it gets mounted again or let's say for example the component refreshes while it's already mounted it will not run this again and the reason we want this is because we only want to fetch all the data the first time that we are actually rendering the component and if something else like a state variable were to change that component we don't want to have to re-render it over and over and over again which is why we want a use effect that only runs right when the component first gets mounted the second thing you can see is here is inside of our use effect we are calling axios let's go ahead and import axios we installed that dependency at the beginning of the video and axios is just a library that allows us to make api requests and it will make it allow you to make a post request to anywhere that you want type of thing and you can see here we have the url set in here already and the next thing it does is we have a dot then function which is uh pretty much um something that allows you to synchronously wait for a call to finish and then in the dot then function you can do whatever you want after it's called so you can see here the first thing we do is we get the you know the to do's in our response variable and then uh from the response.data and then what we're doing is we are calling this function called set to do's now what this function is going to be doing is our to do's is actually inside of a state variable so let's go ahead and uh import the use state variable um from react and now what we're going to do is we're going to create a state variable and that state variable is going to be responsible for holding all of the to do's so i'm going to go ahead and say const and i'm going to say to do's and i'm going to get the setter method for it so it'll be called set to do's equals uh react use state and we're gonna go ahead and we can initialize this to perhaps uh be undefined so we're just gonna initialize it like that um and now if we were to go ahead and let's go back to the slash um you can see here it says this is the to use component if we were to go ahead and console.log our to-do's variable and open the console up here it might be a bit small but you can see here if i go ahead and refresh this the first time it renders it is undefined um because this console log will run before this uh get request actually finishes and i know this might be a bit small but it's just two things and the first one is that it renders undefined because it's going to be rendering before um this actually uh the axios request actually completes but the second time we get an array of 200 objects and those are all our to-do's um so that's all you really uh need to know for the console part of it i'll go ahead and minimize that as well and i'm explaining all this because i really um i know i get a lot of comments sometimes like different things on the screen are a bit too hard to read and the font size might be a bit too small which is why i'm a bit conscious about the font size stuff but yeah so now what we're what's happening is every time we go to slash in our application we get routed to this to-do's component and this to do's component is making an api request and that api request is going to go ahead and get all of this data from all of um this api all 200 of these different to-do's now let's have a bit of a some cool rendering tricks over here so what i can do here for example is let's go ahead and um get rid of this h1 stuff um let's make some react uh fragment self-closing tags so we can add some stuff in here now what i want to happen is while it is loading the data while the data is still undefined i want it to show a little loading animation and we can import that loading animation from material ui which is why i wanted to import material ui in the first place so what i can do is import and i think it's called circular let me go ahead and try importing it and see if it will automatically import i can't remember the exact component i think it's circular circular progress there we go so we are going to go ahead and import circular progress from material ui and let's go ahead and just display circular progress for you guys to see what it is all it is um i'll zoom in really quick is it's just this little loading bar thing so it'll just show like a little loading animation and that might look familiar to you um you might see it on android phones a lot and that's because matild ui is commonly used in a lot of google applications uh it's actually what google does use um so that's why you might see in a lot of android related stuff so that's what that looks like so we can go ahead and in circular progress so we want to show this whenever our to do's variable is undefined so what we can do is we can have a ternary function and we can go ahead and say to do's to do's question mark and this is what will end colon so the thing after the question mark is what will render if to do's are you know present if it's not undefined and then everything after the colon is what it will render if it is not so um i can just put some jsx here that says like to do's have been loaded um just for display purposes and you'll see here it says to-do's have been loaded if i refresh it you might um barely see for a split second i guess i guess it loads the data a bit too fast um for you to see the the loading bar um but it will um if if let's say for example you're on a bit slower internet or for some reason the api is taking a bit of time to respond um you will see that um whenever it's actually loading and making the api request it the circular progress shows and it'll load so i'm going to go ahead and let's start building out what we want to show um in the case that the uh the to-do's are actually loaded so let's go ahead and add some braces around here um and what we're going to do is we want to essentially uh display a bunch of stuff about the to-do we want to essentially display like a bit of a to-do card so let's go ahead and make div and what we're going to do here is we can go ahead and um for example like we can map through the to do so to do stop map and then each to do will be a result of that and we can go ahead and just structure let's say what information we want out of that to do so uh for example oh i forgot to put my curly braces around here okay so for example in the data we are getting all this data back for each to do we're getting the user id the id the title and whether it's completed so let's just go ahead and import the title and whether it's completed for this very simple view so i'm going to import i'm going to destructure title and complete or sorry complete it from the to do and i'm going to go ahead and return just um you know maybe a div and inside of there i'm gonna display you know in like h34 maybe the title and then in h6 let's say completed okay so now we can go ahead and see here oops and i should probably wrap those in squiggly braces so that it displays the actual variable and not the thing itself okay so i'm gonna change this to um right so did i call completed properly okay so it looks like um let's go ahead and do some string interpolation for the completed variable uh because i think it's rendering to fall so there we go so now we can see if it's completed or not for all this example so you can see here we have the title of the to-do and it's just displaying them in a giant list format we have the title of the do and the completed being false but i want to style this and make this a bit better so what i actually want to do is i want to create a different component for to handle all of this logic because i know i'm going to be adding more stuff to this to sort of style it and make it look better i think my code would be a lot cleaner if in this to-do's map i just called another component that did all of this instead so i'm going to go ahead and make a new file and i'm going to call that file to do card dot jsx in that to do card let's go ahead let's go ahead and you know import react from react let's go ahead and say you know cons to do card equals and we're gonna pass on a prop here that's gonna be called to do which is where we're going to get all the to-do information from and let's go ahead and export default to do card now in here i'm probably just going to want to do what i did in that file i'm going to go ahead and cut all of this stuff and i'm going to whoops paste it into this file so i'm going to say you know const title and complete is equal to 2 and we're going to return all of this stuff and now what i'm going to do inside of here is in this map i'm simply um i can remove the squiggly brackets because we're just going to be returning whatever the first thing that's in here i'm going to um return the to do card and i'm going to pass in to do equals to do as a prop and i'm going to write self-closing tags here so you can see here for every single to-do i am mapping through it and i'm calling the to-do card and i'm passing in uh the state variable called to do um and that is getting passed in as a prop and we are importing a to-do card so we can see here it looks like we're getting a bit of an error so uh it looks like we're not passing in the things correctly so let's go ahead and debug console.log to do so first of all i'm pretty sure um right so what we forgot to do was we forgot to take this as props and destructure it um the structure to do from here so constitute equals props and we can go ahead and destructure that and there we go as we can see it's completely um added the title and the completed from all the to-do's here now one thing i want to do is i want to limit the amount of to-do's we're actually displaying here the reason i'm doing that is because this is like the fifth um re-recording i've had to do because any time i write something and there's an error even if it's like a syntax error because i guess there's 200 to do's code sandbox.io doesn't really handle it very well and it causes my entire browser to freeze so i'm going to limit this to 10 to dues that way if anything goes wrong the whole thing doesn't freeze and i don't have to restart it and the way i'm going to do that is right before the to-do.map i'm going to use something called a slice function and what this will allow me to do is to have a start and an end index in my array that i want to limit the array to so as you can see now we only have 10 to do's to work with here um that way we're not you know getting uh completely overloaded and my code sandbox isn't freezing uh every 10 seconds so let's go ahead now and what i could do is another cool little thing i can do here is i can maybe add some style to each one of these divs so i haven't touched upon me um css when it comes to react yet and that is because i have a whole series on material ui where i go over how to embed css and stuff like that one way is to use material ui and embed your css there but we're just going to use the inline way of embedding css and that is just going to look like style equals and then you're going to have two squiggly braces and then whatever css properties you want to have you put it in here now the main difference in having css names in inline styles inside of jsx versus in a css files is everything is camel case so for example um in csx you would have like that text align and then the value for it but in uh when you're doing it in line it would be text align in camel case um so that's one thing to keep in mind so i can say for example background color and set the sequel to like uh you know gray or something like that and let's see how that affects it um you can see each one of these and this looks super ugly but i just want to do it so that it illustrates um you know each individual card and let's maybe give each card you know a margin of like 10 uh pixels and maybe a padding of like uh 10 pixels as well just so it doesn't look like completely um completely obnoxiously bad um so let's go ahead and okay so this looks a tiny bit better um maybe uh 15 padding was a bit too much um but yeah we can also give it i guess a width of like let's say for example i don't know is 50 pixels too uh too small let's try that out oops yep 50 pixels way too small so let's give it away to like 150 pixels okay so you can see each to do here is like sort of styled um let's just keep it like that and over here in this div i'm going to make this uh div style of flex display flex so things will display side by side beside each other and we can go ahead and i think there's a property so when you're looking at css one thing i like to do is i like to inspect element um and i like to go ahead and select the thing that i want to inspect and the font might be a bit too small to see here but over here when you have the div that you want to style selected you can see that um there's this thing called element.style and you can go ahead and you can play around with different uh adding different css properties to see how it'll look uh that way it speeds up the process you don't have to type it in here refresh the whole page and see if it worked or not you could just you know for example a flex i know there's uh a flex i think a flex wrap so we want flex wrap uh to be wrap so that's the style i'm looking for i want it to sort of look like that so i'm going to come over here and say flex wrap is going to be wrap and if i go ahead and refresh the page you can see our to-do's are just showing up sort of side by side and it'll sort of scale to the size of our browser so let's go ahead and minimize that again okay so now we have the to do's uh displaying now the next thing i want to do is i want to be able to when i click on that to do i want it to be able to go to um our endpoint that we set up at the beginning of this video that is slash to do slash the id of it so what i'm going to do is on our to-do card i am going to pretty much so there's a couple of different ways to do it but what i want to do is i want to add an on click to the overall div and i can say on click equals and the on click function i want to give to it is just history.push and our history we don't have it imported yet but it essentially what we can also go ahead and destructure the id from r2do and essentially what we're going to do is history.push and then we're going to push to slash to do slash and then our id itself so now let's go ahead and we there's multiple different ways that we can import history but i think um react router dom history hook i think there's a hook that allows us to import history that we went over and that is the use history hook so we can go ahead and import our use history hook from react router dom without this use history hook to actually get um history into your um component to use the history.push function i think i talked about it a bit in the last video it was a bit of a mission um but we don't have to go through any of that so now here we go so let's go ahead and bring this up so this is the first uh to do and if i were to click on this you can see here we are now going to slash to do slash one if i were to go back and you know click on this to do it would be slash to do slash 10. so now we have everything we need in our other component to go ahead and um uh import to go ahead and actually make the api request to get the details of that to do so let's go back to our to do so now what we want to do is we want to have a similar use effects to the one that we had here so let's go ahead and copy the state variable and the use effect and let's modify it again so first thing i'm going to do is i'm going to say you know to do details and set to set to do details is equal to use state same way that we were doing before let's go ahead and import use state into this component okay and now what we are going to do is under and we also need to write import our use effect and let's import axios as well now what we are going to do is we are going to simply do the same thing except over here in our i in our axios request if you remember we are going to pass in slash to do's and then the id to get um just that specific to-do's information so to do slash the id just like that we're going to use string interpolation to pass in the id that we earlier got from the use params hook to get that information and then once we get the response we can name it something like uh uh you know response to do we can go ahead and set the to do details equal to the response to do just like that so now if i were to go ahead and console.log the to do details after clicking on one of these um to do's so let's go ahead and first of all refresh our our console and click this you'll see here that bam at first it's undefined because like we talked about before it has to make the ibr request but now we have all the information in our to do so now let's go ahead and start displaying some of the to-do's information in our render function so for example um let's go ahead and uh destructure everything from our to do details so const like the id the um you know the what else do we have here the id user id title and completed id user id title completed is going to be equal to our to-do details now note that our to-do details is going to be and also we have um two different ids that are conflicting here so one is the id here and one is the id that we're just structuring now the id is going to be the same either way because we're calling we're getting the to-do based on this id but we can go ahead and call this like to-do id or something like that so we don't have any problem with this destructuring and we can go ahead and now what we're going to do is um these details are all going to be undefined at first while this uh to do details is undefined so for example if i were to you know um let's say for example you know have our div and then inside of our div you know in like h1 like um let's say uh to do to do id let's pass in the like to do id and let's make sure we actually close these divs and make closing tags for our h1 okay so for example we have to do id is this um this initially if oh whoops i refresh the whole page as i was saying this initially will show up as undefined here because our to-do details is still undefined before this api request is actually made so one thing we can do is we can either um we can either a uh initialize it to a blank object so that when this gets this when it tries to get these attributes out of it it will pretty much just be trying to pull something out of an empty map and initialize all of these to undefined or instead of doing that you can make it equal to to-do or an empty map so if to do is undefined it'll try to pull it from an empty map now there's also going to be a point in time where um you won't be able to see it oh you might be able to get a glimpse of it right there where it shows undefined before it shows one and that is because this is going to be undefined before this request is actually done so what we can do is that same logic that we had before where we say you know um to do details so if the to do details is uh rendered or not then if it's rendered we can go ahead and you know display all this stuff in here that we wanted to display so let's go ahead and make a div and display it in here but if it is undefined we can go ahead and once again get our circular progress and here we go so for the split second that that to do is undefined and obviously now it's it's not going to show but for the split second that that to do details is undefined it will actually um display our loading bar that way you don't have anything weird where it shows a big undefined and then goes to one because that's a lot more noticeable um and yeah so we can go ahead you know to do id and let's just go ahead and fill in the rest of the data so to do id to do user id it's just going to be the user id the to-do title is just going to be the title and then finally completed it's just going to be completed and there you are you can see we have an application where i can go to the base of the application i can come ahead go ahead and it will load a bunch of these to do i can click on any of these to do's and it will load the information there we go we saw the to-do loading thing nicely and it will load all this information um that is pretty much it that is using everything that we've learned thus far and this you will see in real applications you won't be making the you know a lot of the times you won't actually be making these api requests just straight up in your um in your react application you're going to be making it in uh or sorry not in your component you're going to be making it in something called for example a redux saga which is separate from your jsx and we're not just going to be calling any random endpoint we're probably going to be calling one from our back end and it's um very important that you don't you know make database api calls or anything like that straight from your component because anyone that uses your site can see all the requests that are outgoing from your browser so they'll be able to see you know the url to your database if you're authenticating they'll be able to see you know your authentication to your database etc etc so in the next couple of videos we're going to talk more about redux we're going to talk more about state management um redux saga we might get into things like um creating a very simple express application to make your own endpoint and stuff like that and hopefully in a future project we'll be able to make this a to-do app where we can actually have our to-do's in our own database and we can actually um you know create to-do's and pull the to-dos from our database and our back-end using react and then actually deploy the application and that's really where i'm going with this course so stay tuned for that and if you found value in this video please consider leaving a comment liking subscribing i read every single comment and i can't tell you how much it helps with the youtube algorithm to get my videos out there to more people so thanks again i hope you're all staying safe and i'll see you guys in the next video

Channel: Anthony Sistilli

Views: 12,196

Keywords: React Material UI, React Material UI Tutorial, React MUI, MUI, React, Tutorial, Material UI, react tutorial, react tutorial for beginners, react hooks, learn react, react js tutorial, react course, react tutorial for beginners 2020, react tutorial for beginners step by step, react js full course, learn react js 2020, react js crash course, react projects, react js project, beginner react js project, react projects for beginners, reactjs tutorial, react js website, React Route

Id: DPpPsWaVAfI

Length: 37min 25sec (2245 seconds)

Published: Sat Nov 07 2020