Build a ReactJS app with the Star Wars API

what's going on everyone Jason here again and in this video I'll be showing you how to create another react app using an API so for this one we'll be using the Star Wars API to fetch some data and here is a project we'll be building out so this project will have three pages it will have the home page also a people page and this will have data for the Star Wars characters that we'll get from the API as well as planets so we are also going to be using semantic UI react to create these card components as well as a snap bar but that is and also we're going to be using react router so if you see here when I click on people we go to a slash people and when we click on planets we have slash planets so we'll be using rack router there and this is the end point we'll be making use of so this is the first one this one is a well this one's planets so when we hit this end point we'll be getting all of this data back and we'll be making use of that as well as people so that'll be the other endpoint we'll be using and this is the Star Wars API website if you want to reference it and kind of make your own project and utilize different endpoints so yeah so that's a project and let's get started so I'm currently in my BS code editor and I set this project up using create react app so I have some boilerplate code currently and now I want to install the dependencies so we'll be doing NPM I and we'll be installing react router semantic UI react and semantic UI CSS so I already installed those so I'll need to run that but those are the packages you're going to want to install and the next thing you want to do is I feel to the getting started in semantic UI you're actually going to want to copy this line of code here that way we get the styles for the components that we'll be using and you can go to your index J s and just copy it in here good okay so then the next thing in your app dot CSS you can remove that we won't be using that CSS and I think we should be good to go cool so so let's go ahead and do an NPM start to start up the reactor all right so the react app is running and this is how it's looking since we removed those styles but everything everything is working correctly so yeah so let's go ahead and pull that down so then in our App J's file let's go ahead and remove some of this boilerplate code that we won't be eating and let's just do hello in there and this should reload for us all right it's really small that's what we want okay so currently then what I want to do is set up the data fetching of the from the api's so first thing we'll do is up here we'll do install or import use States and use effect and then in here we'll set up our state variables so we're going to have two state variables we'll have the state variable for the people and then we'll do set people there equal to a you state and the initial state will pass in will be an empty array and for the second one it will be planets and planets okay and will also create another state variable this one will be loading and set loading you stay or sorry not that'll be true so this variable will be using to keep track of when we're actually fetching the data from the API and when we're fetching we want to indicate some loading some loaders so we know that we're fetching data and we'll get to that at a later point all right so that is looking good so the next thing then we'll do is we'll set up our use effect so we'll do use effect passing a callback function for the first argument the second one will be an empty dependency array since we only want to call this effect once the component amounts to the Dom so it's only gonna be called one time and then in here I'll do an async function we'll call this one fetch people and this one and here so this one will be fetching the data for people so we'll do res equal to a weight fetch and let's go ahead and grab this endpoint copy it paste it in there so that I returned a promise for us so we'll take res JSON so we'll create a variable called data so we'll get the data back in that variable and then we will set people to our data results because if you look in here we're going to get back this results property with an array of all the data so we're going to be using the data inside this array so that's why we're setting it to data doubt results okay so then let's go to the next one so the next one will be the data fetching of the planets so we'll call this fetch planets and we'll do let R as equal to a weight fetch and we'll just change this to planets and it'll be a similar setup so it'll be R as days on and then set planets will be data adopt results as well alright so those functions are created so then down here we'll just call those functions so we'll do fetch people fetch planets there we go okay so then let's go ahead and down here let's do a console dot log to just see that we get the data back so this one will be people and people there okay so let's change this one to planets all right so let's go back open up our console dot log and let's see people playing it undefined so looks like we're getting we're not getting the data back so let's have a look here so my mistake everyone I actually forgot to add in wait here before the arrest JSON so we actually weren't getting any data back because we weren't awaiting the promise here so then now that we have that let's go ahead and save it open up our console and let's console dot log let's see so we got data all right so here is the data for people so it looks like we're getting the data back so everything is working correctly all right so now that we have the data the next thing I'll go ahead and do is create the components so we'll create the navbar component along with the people and planets initial components for those so then let's go ahead and here we'll do a create another folder we'll call it components and in here I'll call the first one navbar yes okay and I'll do in our C so and this is a snippet from a package for vs code I believe it's this one yes I'm in react Redux so this gives you some snippets that you could use to make your react development a little bit quicker but in here so we have let's see so we're importing react will also be importing some components from semantic UI react so we'll do menu and container from semantic UI react and then let's see so in here we want to use menu as the outermost div give this a prop of inverted then we'll do menu the item copy that three times and the name for the first one will do Star Wars API second one will be let's see people and the third one will be planets just go ahead and remove those okay so I think that should be good for that let's go ahead and save it oh actually one more thing I want to use container here and wrap these menu items in that container alright let's go ahead and go back to the app dodge yes and from here we will import that bar from the components and that bar and let's go ahead and reformat this real quick so then we'll pass that bar there and I think that should be good that all right so let's save it make sure that it compiles go back to the app and there we go we have our navbar there so that's looking good okay so for the next thing I'll do all right so next thing I'll do is create the other components so it won't be completely built out but we'll just build something initially out so we'll do let's see so this one's people dot yes let's add the other one real quick planets yes and we'll do people and then here we'll do people planets we'll do the same thing okay so we have those initially bolt out and cool so now then the next thing is I'll set up the react router so that way when we click on these links it'll navigate to those components so let's go ahead and go to app digests and up here at the top let's go ahead remove that so here we'll import it'll be browser a router as router then we'll import switch routes and I believe that's it so then that'll be from react router down okay so then down in here we want to make sure we wrap all of this inside router so okay so yep all right and I actually want to use a react fragment as the outermost container there all right so there we go and now below navbar we will go ahead and do let's see actually I want to add another component here so let's go back to navbar so I want to make use of the Container component from semantic UI react so we'll just add that there and then in here I want to do container there we go cool all right all right so then also so now I want to set up the the routing so let's go ahead and do let's see so we'll do a switch and inside that switch will do route and we are going to have three routes oops so the three routes first one will be the home so and actually forgot to create that component so let me do that real quick so let's do home yes there we go so this will be the home component and inside the route component there we will pass in some props so we'll do exact and then path will be the slash so whenever we hit this exact path for slash we want to make sure we show the whole component and let's go ahead and do the same thing for these other ones so in there we'll do this one will be people and we'll show the people component there and the other one will be planets and then in here we'll do a path equal to planets all right so that is looking good so we'll save that and also we need to go to our let's see planets it's not the fine okay so let's go ahead and import those real quick so we'll do import home yeah so we'll do import home from components home and go ahead and do people and plants okay so in our navbar just now we are actually going to well actually to import another react router component so it'll be import and it'll be linked from react router down so that way we can actually make these menu items links that will you make use of a react browser so here we'll do a link and we'll put in our menu items in there and then inside the link component we'll give this a prop of two and we'll tell it where we want it to go to so this will this one will be slash and this one will be people right and this one will be to planets / planets all right there you go so let's go back and see what we get so we have Star Wars API if we go to people let me actually make this bigger - just so it's a little bit more readable alright so we have Star Wars API if we go to people we are seeing the people component planets we'll see planets here we'll see home so that is working okay so that is looking good so let's go back to app dot GS alright so the next thing I'll do in here is I'm actually going to let's see so inside the import for the semantic UI react components I'm going to import a couple more components will import dimmer and loader so I'll be setting up the loading indicator when we're fetching the data so then in here I'll create a ternary operator so we'll do loading so if loading is true then we want to let's see so floating is true we want to show this loader so we'll go in here and we'll do dimmer give it a prop up active and verted and then in here we'll do a loader and for the prop for a loader will do inverted and then in here will pass in loading there we go okay so if loading is true meaning we haven't touched the data we want to indicate show a loader if the data has already been fetched will just display the components so I'll take that and then we'll paste that in there there we go so I think should be good so let's go back all right so we're seeing the loading let's see if we made a mistake so loading true Oh yep so we are actually not setting our loader to be false so we'll do set loading in here to false meaning we already got the data okay so that is good so the next thing we will need to do is just create the cards to display the data in our components so if we go to people then we can do let's see so in here we'll go ahead and just gonna copy this and go back into people so from the semantic UI react we're going to import card and let's see grid and then here we'll do react fragment I'll do an h1 this one will be called people then we'll create the grid and the grid will have columns of three so it'll be three columns and then here we'll go ahead and do the data fetching let's see so before I forget we'll need to pass into our people component a prop of data and we'll pass it in the people state variable same thing for planets this one will just be planets there we go so now we have that as props so in here we can extract the data prop and then in here we'll do data dot map and we'll do let's see people eye and we're going to return if so for each item in our data array we're going to return grid column give this column a key with the print with the argument of I that we passed in and then we'll do card so this one will be let's see so for this component we'll do a card and then we're going to do card card content and then this will be card header and Encarta header we're going to add some data so this will be people dot name below that will be card down description and for that one it will be let's see so in there we'll pass some more markup so it'll be this one will be a strong with the width the height and then we'll do people dots okay and I'm just going to go ahead and copy this since it'll be similar to the other ones so for the next one we'll do mass M s and then we'll do hair color hair underscore color is the property name there so believe that's it for that and okay so I think that should be it so card description' content card alright so let's go ahead and save that it doesn't look like we're getting any airs so let's go back go to people and looks like we're getting all of that so these we're getting three columns with card components with the data from the API should see a loading indicator when I load but I'm not so let me go back and see it what the issue is here so okay so I'm actually going to remove this set loading and I'll put it in here for each one of these requests so now if I save it and I go to people reload I should see that loading indicator there we go and if i refresh here we're be it'll indicate that we're loading the data for the app okay so the last thing we'll do then is just set up the set up the mark-up for the planets and it'll be pretty similar to people and let's just change this to planets change those to planet yep planets and we're going to adjust some of this so let's see so for planets we're actually gonna have let's see this one will be climate and we'll do climate there and diameter this is diameter and population and population there we go so let's go ahead and save that Grady's not defined data is not defined and planets dodge yes because we are not importing them of course so let's go right here and let's save that and we're getting another error data is not defined because we're not extracting that out from the props and it should be working now all right so we got planets people and then home will refresh we hit that loading and in home you can just change this to some lorem ipsum text go back we get lorem ipsum there and yeah so that's looking good so that is the project and yes that's the project so I hope you all enjoyed it and if you like this video go ahead and give it a thumbs up and if you like to see more content like this go ahead and subscribe thanks for watching everyone have a good day

Channel: Jason Rivera

Views: 19,770

Keywords: react pagination, react js, react tutorial, react tutorial for beginners, react hooks, react js tutorial, react tutorial 2019, javascript tutorial, react project, web development, react tutorial freecodecamp, react api tutorial, react js crash course, react api, learn react, react for beginners 2019, async await, react router, router

Id: EC5ZvP87P2k

Length: 28min 29sec (1709 seconds)

Published: Thu Nov 21 2019