Strapi Crash Course (with React & GraphQL) #5 - Creating a React App

Key Takeaways

okay then gang so now we've got the back end up and running and we know how to fetch data from it using the strappy rest api endpoints now we want to start work on the front end of the website the react application so navigate to our project directory which i called ninja reviews remember this is the folder that we installed the back end into so that's inside this folder and now we're going to create a react project in here as well so to do that we'll use npx npx create iphone react hyphen app give it a name oops you need to spell react right as well give it a name i'm going to call it front and like so but you can call it what you want but i'm calling it front end so that we have the front end and the back end folders inside this project directory all right so now that's done let's cd into that front end folder and then i want to open this up in vs code so let's say code space full stop and press enter and hopefully that's going to open up mvs code there we go so this is our startup project so there's a few things i want to clean up first of all so let's open the source and i'm going to get rid of app.css because we're going to put all of our css inside the index file right here i'm also going to get rid of the test file we're not going to use that and the logo we don't need this and these two files at the bottom we don't need as well so let's get rid of those now inside index.js we're going to get rid of this import because we deleted that file and also this at the bottom and save that then inside app.js we're going to get rid of these imports at the top as well because we don't need those that was the logo and the app.css then i'm going to get rid of everything inside the div with a class name of app but i will keep this div right here all right so next i'm going to create two folders inside the source folder one is going to be called components and that's for any dropping layout components like the navbar or header and then the next one is going to be pages and this is going to be for page components in our application so we're going to have three page components we're going to have one for the home page where we list all the reviews we're going to have one for review details which is where we go when we click on one of those reviews and then also when we start to work with relational data we're going to have a category page as well so that when we click on a category it shows all the reviews for that category on that page so let's create these new file and we'll start with whole page.js and i'm going to use a snippet rfc to make a react functional component press tab and it generates that and the reason i can do that is because i have a package which is this one right here which gives me access to a load of snippets so just search for this package and install it if you want to do that as well all right so let's go back get rid of this that's the home page inside here we'll just say home page bit of text next up we'll do the review details review details.js like so and then inside here again react functional component tab and then inside the template review details need the d over there all right save this and then finally let's do the category so category dot js and then same again this is called category and we'll say category down here in the template awesome so that's the three pages done we also now want to create a component which is going to be for some kind of header and i'm going to call this site header so site header and this site header is going to go at the top of every page so i'm actually just going to paste in this component right here and then i'll paste in the import at the top as well okay so it's called site header and inside here we have a div with a class name of site header and this link right here we need to import as well this is linking to the home page now we've not set up the router yet but we will do in a minute and we need to import link from a package called react router dom now we've not installed this yet so let's install it i'm going to save this then open up a terminal and i'll say npm install react router hyphen dom so that we can use this link and also so we can set up routes inside the root app component all right then so now that's installed we can start to use the react router to set up routes for these three different pages so let's do that inside the app component right here the root component and also inside this root component we can import and nest the site header so that that's on the top of every page as well all right and by the way if any of this goes over your head and you're struggling with the react side of things definitely check out that full react course first of all i explain all of this in much more detail there so the link to that remember is going to be down below the video so anyway inside the app component the first thing i'm going to do is import a bunch of stuff so down here we're importing the page components and the layout components so these three things are the page components we import home page from the pages folder and then the home page review details then the category so we have all three pages imported and also we import the site header from the components folder site header so that's because we're going to nest these components down here in the template in a second but also so we can set up the router we've imported browser router as router and this as just means lock refer to the browser router inside this component as router so we can use the router tag instead of having to type out browser router okay and then we also input the route which we're going to use to set up individual routes to three different pages and then also the switch component which surrounds our routes and makes sure that we only ever show one route on the page at one time all right then so let us inside the app first of all nest the site header so site header like so and now that's going to be at the top of every page then after that we'll do our switch tag so let's say switch like so and inside there we can make our different routes so the first one is going to be routes like so and we need a path prop and that's going to be just forward slash so when the route is just forward slash i want to render the home page component that we imported right here so let me copy this now and paste it down here a couple more times the second route is going to be for the path of forward slash details forward slash the id and there's a colon before the id to denote this as a route parameter meaning it can be changeable it could be one two three four etcetera depending on the review we want to see the details for and then this component is going to be the review details like so spell this correctly review details okay and then finally the path is going to be forward slash category and then forward slash id again which is a route parameter again that's going to be the id of the category we want to show and then down here we want to show the category component now one more thing we need to do is put here exact otherwise this will match everything because any route basically matches this and so for any route we go to potentially we'll just show the home page without this so let me save this now and let me run this by coming down here and typing npm run start this is going to spin up the local development server for our react application and it's opened up on my other screen over here so let's take a look at that all right and we get an error so that's because we've actually not used the router we need to put all of this stuff inside the router itself so let's do that i'm going to come down here and say router and take the closing tag and place that at the bottom after the div so now everything is nested inside the router so this should work now if i bring this back over yep i can see this is the home page right if i go to forward slash details forward slash three for example then we're going to get the review details page if i go to forward slash category forward slash three i should get the category page which i do now let me just quickly show you what happens if i don't have the exact path i'm going to save this and then i'm going to bring this back over and notice now even though we're going to this url we still see the homepage and that's because this route still matches this right here because this is included in that route that we went to seems a bit odd but we have to put exact right here for this to work correctly all right so one more thing i want to do and that's just to add a little bit of css to this project to make it look a bit better so i'm going to go over to the index.css file i'm going to grab that delete it and just paste all of this css in now if you want to grab all of this css you can do from my repo remember you just need to select the lesson 5 branch and then you need to find the correct file and incidentally it's right here so if you want i'll leave this link down below and you can just go direct to this file and copy it all and paste it into the index.css file nothing fancy all we do is import a google font which is called poppins and then we set some styles on the body margin is zero top and bottom third pixels left and right and then the font family is poppins the background is a very very light gray we applied this font weight to the headings right here then the app which is this div right here we say the font size is 1.2 ms give it a bit margin width is 100 max width of 1200 pixels the padding is 20 pixels all the way around and the box sizing is border box to incorporate the padding into the width okay and then any anchor tag text decoration not we give it this purple color and a border bottom which is dotted and the h1 which is the site header title is a font size of 1.5 ms again the purple color padding bottom and a border bottom as well so if i was to save this now we already have this imported into this file right here do we yep right here so we should see that in our react app and i can do right here so this is now our starter react project in the next lesson we're going to start to fetch the strappy data and show it in the browser