Rest Countries API challenge from Frontend Mentor using ReactJS

hello guys and welcome back to another video and today we're going to be doing a challenge from front-end mentor and today the challenge that we're going to be doing is the rest countries api with the color theme switcher now if you need this challenge all you need to do is go to front-end metadata io slash challenges and just scroll down until you can get it and then you can just click it which will open up another page for you and it contains uh details about the challenge as well as the challenges that you need to complete in order to submit it which can go through right here i've already done this and then once you're done you can come and download it from here or you can just download it from here which will download the the files that you need the basic files with the design images and your markdown files now once you've done that you can open it up in your you can open up the folder in vs code or in in another text editor that you're using and i open mine in vs code as you can see and this is the readme that i have opened but let's go through the design files first now in the design you'll find uh the the ui how the ui looks this is the light this is the dark theme is the light theme and the home pages for each of them as well as the mobile pages as you can see uh the git ignore we don't really need that for now but the two markdown files are the ones that are important to us because they contain the link to the rest api that we need which is right here rest countries dot eu so we're going to just copy this link from here just copy that link and then if you need to go through other details of the challenge you can just continue to read this markdown file but then again yeah these are the requirements for this challenge as you can see they're listed down here but the same as the ones for the website if you went through them if you need any help they have a link here for the slack community and i think uh that should be it for now now i think this is going to be a a long challenge so what i'm going to do in this first video i'm just going to fetch data from the api and then display it and maybe add some media queries and then we can do some of the functionality in another video so in the style guide the magnum file we it has the uh the devices for which the images the design images were made and it has the colors uh for the current project that you're working on as well as the font that you're using so i'm just going to open this font in google on my google chrome browser and then i can check the one 300 600 and 800 uh font weights so where do we start the 300 uh what was it 300 600 and 800 okay 600 and 800. i'm just going to place that i'm not yet going to copy it okay so i'm going to be doing this project in react so if you want to follow along you can go ahead and create a new react app by doing the command npx create react app and give it a giving it a name as you can see here i called it what i call it i called it rest countries api as you can see and then i went into that folder and just opened visual studio code in that folder which is this right here okay so i think we can get started with our cleanup and i'm just going to remove these files remove all of these files and then i'm going to go into index.html and just remove this and remove everything to here including the manifest.json and then i can remove this as well now i increased my font size just so it can be visible on smaller screens and then in the source folder i'm going to delete app css updates js logo svg report with vitals and setup tests so i'm only going to remain with these three files okay and then we can go in indexes and just delete all of this and just delete that in index.js we can remove this as well as this and i have my uh formatter to remove semicolons in case you don't see semicolons and then in app.js you can remove these two files as well and you can say make just import react from react but we don't really need this these days so i can remove this as well and just do return a div saying hello hell oops hello reacts like that then i can start up my dev server sorry say a div saying hello react i can start up my dev cell by saying npm start like that now while it's starting i like to import my font which is this right here but before i do that just because i i copied the url before i'm just going to uh place my url up here so that i don't forget it so i'm just say cost url equals into a string and just paste it inside there so i can go to google fonts and then grab this import that i have here copy that and then i'm going to place it in my index css and then i'm going to say just let the body have that font family of what's its new needle and the fallback of sans serif like that and then another thing i'd like to do in index css is just uh reset everything so i'm going to say margin 0 padding 0 and box sizing box sizing butter box like that and then i'm going to place the images to have a max width of 100 percent like that okay we can close the index css for now and we're going to close this timing because we don't need it currently and you can see that our app is running on localhost 3000 so it's working correctly okay so uh when you take a look at the design files i'm just going to open this is it this or this just going to open this you can see there's a header up here so this is going to be a separate component and you can see i'm just going to call this component a filter which is contain uh this input search and the filter by region and then it's going to contain all of this inside okay so i'm just going to call this uh the third one i'm just going to call it a countries component so i think i'm going to start by creating the country's component first just so you can refresh the data and display it in our browser and see how it looks so i'm going to create a component inside the source folder i'm going to create a components folder like that and then inside the components folder i'm going to create a new file and just call it countries.js that and i'm going to say use my extension called es7 react redux this one i'm going to say once you install this extension you can do some shorthand properties uh which i'm just going to show you the the field that i use and i'm just going to say rafce which will generate a react arrow function component and export it by default or as default rather as you can see right here so in my countries i'd like to take this url cut this and paste it inside my countries like that because this is where we're going to be using it and then i'm going to say we're going to be using react hook so i'm just going to bring them in and i'm going to say use state and use effect like so and then what else i'm going to do let me just import this in my abs and i'm going to say import countries from components countries like so and then i can display it inside here and i'm going to say this is just countries like that and i would like for this to be a fragment so i'm just going to delete this div which will just uh make it a fragment and then i'm going to place all of this inside brackets like that you don't have to place these brackets but if you don't place these brackets then this has to be on the top line as the as the return otherwise when you place it at the bottom you can see it's if you place this at the bottom you can see it it's grayed out and the reason it's grayed out is because it is unreachable code okay so if you want this to be red you actually have to place it in the same line as the return or you place it inside uh brackets like that okay so i'm just going to go back into my countries and i'm going to set up my state values and i'm going to say uh countries countries and set countries and this will be coming from the use state hook and by default it's going to be an empty array because once we face the data is when we'll go we're going to be displaying it inside the use state and then it's going to be taking up that space and then i'm going to say uh set up my use effect and for my callback function i'm just going to say um let me place an empty dependency array and then i'm going to say let's face the database saying uh place an arrow function just say fetch or fetch country data like that plus my error function and i want this to be a synchronous so i'm just going to say a sync like that and i'm going to say cons response equals a uh fetch url like that and then i'm going to say for the countries countries like so now we're going to be populating this which will take up this space in the mtra and i'll say counter is equals to a weight weight uh response.json like that then we're going to set we're going to set this country's function into this variable so i'm going to say set countries to countries like that it's actually this variable once it has been fetched okay so the next thing that we're going to do is now set up our return actually let me just console log this to see if there's any data getting fetched let me just do that let's see our console let me just let me just set up my return for now and i'm just going to say return and i'm going to say i would like to now map over this country's data that we have and then display the details for every country that we will uh will be getting so i'm going to say i want to map over my countries and i'm going to say countries dot map and i'm going to say for every individual country then i want to set up my error function and then this structure the data that we're going to be getting okay and since we don't have that data yet this might be a problem i'm just going to say let's return maybe check if oops what did what did i do um is this correct it has to be inside of fragment let's see oops mess it up okay that's fine that's fine i can just do it again so i'm just going to say countries.map and for every individual country set up by our function and we're going to say we would like to destruct a few things a few things which i don't yet know about so i'm just going to i'm just going to say maybe id for now and then we're going to set up another return inside oops not there but inside here we're going to set up another return which will return an article and article is the key of id i did like that and i'm just going to say country data let's see if that will display and that is not displaying because let me move this up and then let me call it inside here fetch country data let's see oops let me just check this url okay just check it and let's see let's see we're going to say fetch all countries okay okay okay let's replace this with that that should be fetching something okay there you go there you go i had the wrong url okay i had the wrong url okay which means we can now open this in our in a separate tab so you can see the data that we get which we can then destructure inside here and then we can then display it okay so what we're going to do is actually just check this and we can see we have we can destructure the name which is actually what is what is required let's just check we need the name we need the image for the flag the population region and the capital for now anyways we're going to say we need the name we need uh is there let me just choose find and say region is a region there's region there is population is right there what else do we need capital let's see capital capital is there as well and then we need the image for the for the flag so let's say flag and flag is that there which is an svg which is an image okay so we can get all our data so i'm just going to destruct it and say uh wait i also need a unique unique uh sort of id right there so i'm just going to take a moment but we need a name we need the name of the country we need the the what's it called the population region capital and the flag the population region capital and the flag which will be the image and then we need we need a unique i we a unique sort of what do we say a number or an id which we can then display as the key prop because if you check in our console now console right now it says each lead each title list will have a unique key prop which means that this id either is not available or is not unique to all the country data that we're getting which is an array of 250 items so let me just check and see for what can be a unique number and if you happen to find another number you can just use that instead i'm going to pick this numeric code because it it seems to be unique so i'm just going to say your numeric code let me just check it it seems it seems to be unique for every for every country if it's not unique it will still throw the error that we get in the console so i'm just going to say let me destruct a numeric code as well and then i'll set the key to numeric code like that and then inside the article i want to display a div let me say a div and inside the deep i would like the image which will be coming from the flag that will be structured and for the art if the image fails to load then i just want to load the name of the country which is the name and then i want an h3 which will be the name of the country like so and then this will be let me check this h3s and h4s for this okay so i'm just going to say let me get an h4 and then copy it down three times okay this will be the population population this will be red the region and this will be the capital like so and we need some text in front of it so i'm going to say population and this is region and this is capital like so now if you look at this design you can see that this text is a bit heavy in terms of font weight than this so i'm just going to place uh my destruction data into a span so that i can style it differently so i'm going to take this and display it inside a span like so so that i can start it differently and make it lighter onto it than this just so you can stick as close as you can to the design and then get this as well and place it inside a span like so okay so let me save that and let's see what we get and look at that it looks let me reload this so that this error goes away look at that it looks uh good enough we still haven't we still haven't added any styles but you can see that we are displaying all the data that we need and i think it's in alphabetical order zimbabwe at the bottom and afghanistan at the top yeah i think it's an alphabetical order so you can just place this side by side sorry we can begin to style it now one thing i forgot to do is that i'd like to place all of this from here everything inside this map function the map method sorry i'd like to place all of it into a section with a class of grid okay because on on on bigger weights i'd like to i'd like it to display as it is in the design in terms of uh what's it called four columns as you can see so i'm just going to place all of that inside the section in the class of grid and then we can head over to our css and begin to style it now in case you're wondering this css folder is imported in the index.js right here that's why you don't need to import it anywhere else in our css files we just need to target the the classes that we have made okay so uh we can begin by saying in the countries you have it's only this so you need the class of grade so i'm just going to say for the class of grade and i'm going to say display grid of course with the grid template columns because this is i'm making it mobile fast so i'm just going to say one fraction for now which will be just that and then i'm going to say uh let me add some padding on the sides of this so that they can push it inwards and away from the edges of the browser but let me just add a great gap at the bottom so that this can push apart as well so i'm going to say a grid gap of 40 pixels that's good enough and then we place some padding on the body some padding and i'm going to say padding of 20 pixels here they push in one which is nice okay now let me just get this to a higher a bigger width so i can add some media queries for them and i'm going to say add a media query let's say for a min width of 640 pixels then i want this i want the grid to display oops copy that i want the grid to display as two fractional columns i'm just going to say the page two and one for each like that and you can see it scales nicely if i to go lower than that it goes back to one fractional column and you can see it goes up very nicely but we're still going to add media queries and i'm going to say copy this down and i'm going to say for a minimum width of 768 pixels i want this to display as three fractional columns and let's see how that looks you can see it's still looking nice okay still looking nice and then for the final one i'm going to paste that again i'm going to say for the final one let this come at 992 pixels like that and i'm going to split as four fractional columns which is uh currently the the at the design that we have right there okay so it's looking nice it's looking nice let me add a background color so that you can change that white and i'm just going to grab this color that we have here so let me get the color tool rub this color copy that and place it in the body and i'm going to say background color set it to that and then i want the text color to be set to white now because this is we're going to be working uh we're going to making a light theme for this i think it will be better if i place this inside variables so that i can just toggle them whether it's a light lighting or ducting but for now i'm just going to place this right there because we're just dealing with the overall design how it looks and then the next thing that i'm going to do let me check the design get this color and then i'm going to add some rounded edges for this as well as the image so let me grab this color grab that and i'm going to place it where is it it's inside our text inside here so let me just check where the text is and that like for this text starting from here starting from here is that correct number from here oops from here to that like that text inside a div with a class of uh what do you say details yes i can tell it differently and then i want this i hope this i hope this give this demon be an issue for me i hope so but let me just tell this dude the class of details first and this is a section called grid so i'm going to save for the grid i want to deal with the class of details and i want to say i want the background color to be oops copy this color no what are you doing it's just the same color really copy that and you can see the color is there so i'm going to place some padding on this so i'm going to say a padding of 20 pixels and i'm going to say as you can see there's some kind of margin right there so i'm going to place a minus margin for them so that they can move up so i'm going to say margin top of minus 10 pixels now the good thing about margin is that you can have uh minus values for them but for padding padding you can't padding only has positive values and then i'm going to place a border radius for this so i'm going to say i want a border radius of zero on the top left zero on the top right five pixels on top on the bottom right and five pixels on the bottom left so that's what this means if you didn't want to do this then you'd have to do uh you'd have to do border top uh left radius like that which is zero place it to zero then do border top right radius border bottom you see i think it's it's a lot of work so i just had like this shorthand it's much better as you can see the border now becomes rounded at the bottom and not at the top so the next thing we need to deal with is this border at the top for the images so let me just check this image and i'll say let me go inside the article and grab the image so i'm going to say it's inside the grid class the class of grid and i want the article and i want the image inside and i want uh i want the border radius to be the opposite of this now so it'd be five places in the top left and the top right and zero on the bottom like that and because it's rounded as well which looks very nice very nice so let me push this text apart and this is uh i placed it inside h3s and then h4 so i'm going to say inside the grid and inside the details class i wanted the h4 and i want the padding on the bottom to be five pixels i meant the h3 here okay let's say 10 pixels and then for the h4 as well just grab this and copy it down and say for the h4 as well i want a padding on the bottom five pixels push them down and then now i can grab the span that i placed inside this and then i can reduce the front to each this pan that they place right there so i'm going to grab this again and i'm going to say for the span i want a font weight of 300 like that and it's looking almost as close to the design almost as close and what else do we need to change let me see in this image what do we need to change we need to add some gap for bigger screens we need to add let me just check how this looks oh yeah you can see the images are not of the same height so it kind of brings some kind of jagged feeling to it so let me just declare the images to be of the same height and i'm going to go here and i'm going to say the height should be how much uh 500 pixels too big too big 300 no 200 wow let's say the width should be a hundred percent that doesn't work as well as i thought so i'm going to say let's get the width to be 3 300 pixels okay 400 i think i'll have to add media queries for this 500 this will interfere i think on small screens i think this will interfere on small screens let's see let's see what can we do for these images can we do for these images i would only need to declare the height isn't that right but i did that and the height doesn't move as well as i want it to 250 okay 250 is about right about right here almost anyways so i can increase the margin top for this so that this goes uh up a bit so let me just confirm where i hide that and say 20 pixels and then i can add padding for these for the text so that it pushes down and i'm going to say uh which one was it it was the details okay right there so i'm going to see padding of 40 pixels on the top and bottom and 20 pixels on the left and right okay okay that's acceptable and i'm going to say hmm but it becomes broken right there again okay not i'm just i'm not going to place this right there because it's going to bring some headaches i'm going to add it later or you can add some media craze yourself but i'd like to just create the header component and the filter uh and the filters that we need so i'm going to say for the header component i want to create another component in my components folder and i'm going to say for the header js and i'm going to say rafce once again using my extension that i have and i'm going to say um place this fragment and they want a section with a class of header so you know it's not a section but a header with a class of header like that and i'm going to say i want an h1 saying where in the world oops question mark okay and i want this inside the div the reason why i want this inside the div is because i want to uh display the header as a flex box which means that these two have to be block elements and as you can see i'm going to have an icon right here i'm going to be using font awesome so i'm going to say this is uh i want this to be one flex item and this to be another so that i can justify them to be uh i'm going to place justify between so that they can go to the ends for both of them and you'll see what i mean in a moment so i'm going to say i want that to be a div and i want another div which will have a font awesome icon saying i fs and fa dash i said i don't know the class of that that icon so i'm just going to say moon for now and i'm going to say outside the text and i'm going to say dark mode like that this is not the actual icon and we need to import font awesome another for this to work others it might break but once you save that we need to actually import our header into our our app js so i'm going to say import header from component slash header like that and i'm going to render it like that and you can see right there now what i meant was i'd like for this to display as in the in the design so i'm going to go into my index css and i'm going to go about the grid and place a comment saying header let me just place another one saying grid like that and for my header i'd like to display flex align item center and then justify content to space between like that and you can see there at the at the ends as i wanted now i want to add some space between the edges because as you can see in the design there's a lot of space right there so i'm just going to place i think i'm going to place perhaps increase the margin let me just increase the margin and i'm going to say merging of the body for let me say widths like this i want the body i want the body to have a padding of 20 pixels on the top and bottom now let me say 50 pixels and then i'm going to say 100 pixels on the left and right so that we push in once like that and then i'm going to increase the grid gap for this oops and i'm going to secure it up of 60 pixels so that they can push apart just a little bit more and you'll notice in design there's a bit of a box shadow so we can do that we can do that and you can see where was it it was in is that the grid oops i forget where it goes the details class i'm good i'm just going to place it inside the grid i want all of this to have a box shadow okay yeah the grid so i'm going to say for the grid i want a box shadow of 0 and then 10 pixels 10 pixels and rgba let's let me just grab this color first and then transform it into rgba it is in vs code as you can see and i'm just going to add an alpha value and i'm going to say 0.5 let's see what am i doing this needs to be light and not the same as the ortega not the same as the background color this will break something yeah this will break something i'm doing it wrong this should be on the article the box shadow should be on the article and i'm going to say article like that and then move this down like so but it doesn't look very nice i'm just going to comment it out for now and i'm going to add it in later and then the next thing that i want to do is add this form and the filter by region so i'm going to call that where am i i'm going to call that i'm going to create another component and i'm going to say this is called the filter.js and another functional component like that and i'm going to say i want to return a section and return a section with a class of class name actually class of filter like that and i want to return a form inside with a class of form dash control in case you're wondering why i'm doing those shorthand properties it's because i have emit installed and i've set it to also work for jsx javascript that's why it's working and then inside the form i want to just have an input with a type of search oops search the name will be searched and the id will be searched as well the placeholder will be what's it search for a country and it has an icon search for country like that and i'm going to place uh wait a minute okay doesn't need a button and then i'm going to display this towards flex as well so i'm just going to place this in another div and i'm going to say create a select with a class of select with the name of select and an id of select and i'm going to say for the options i want to pass in a few options and the first one is filter by which will be filter by region and then for the i'm just going to copy this down a few more times once i do that let me just copy a fifth one because i've seen the five so i'm just going to do that and i'm going to change this select both i'm going to change this to africa change this and i'm going to change this to america i'm so i'm selecting both by pressing ctrl d okay so i'm going to say this is asia and this is europe copy this down one more time and change this value to senior like that okay so we need to bring this into our app.js like always and i'm going to say import filter from component slash filter right and just render it inside then say filter like that okay so once you do that um it should render you know application like that and i want to just display this and justify them to space between so that they can be at both ends so i can do that by going into my index.js and targeting my filter which is just going to place inside here underneath the filter and i'm going to say for the filter display flex oops align it and center and justify content to space between like that and it should render like that so let me just add some padding so that this can push away from the flag images so i'm going to say oops i'm going to say i want a padding of 20 pixels on the top and bottom and 0 on the left and right that should work and then [Music] i think that would be it for the ui i think that would be it for the ui not really okay let me just change a few things for the inputs because you can see this is a bit grayed out as well as the header the header needs to have a background color which means i can go back to my index css and save the header should have a background color oops background color really of that no not that i want the lighter one this one and you'll see it only goes uh it doesn't go all the way to the edges because that's because i have padding both on the left and right so i'll have to remove that and then add some padding on the header as well and then i'm going to grab this the form which is inside the filter and i want the filter and it has a class of formed as control does it form control okay yeah and then i want the inputs i want the input and i want the background color to be transparent transparent i hope i did something wrong if you see on small on small screen this will be a bit weird or not maybe i want the border to be num i want the outline for the input to be none as well let me add some padding let me just return this so i can see what i'm styling i have some padding of 8 pixels i want um what else do we need a background oh the background is not transparent my mistake should be that yeah yeah yeah so i can just remove this and i want a border radius of five pixels all around and i want the placeholder color to be white this is the input color the input color which is this so the placeholder color in order target that we just grab this and paste it and then we put a double column and say place holder which will be targeting the placeholder text and i'm going to say color should be white and i want i want the font family here to inherit so font family inherit like so and i'm going to let me just place some letter spacing on one pixels just so you can space up a bit 4.5 pixels i think that's much better and i'm going to see for the input i want a minimum width because this is a bit let me check how it looks on a mobile screen it takes up the whole width okay okay and then it's it's displayed as a column so i'm going to work on that i'm going to work on that we can say um you can see what right you can say flex direction to column like so and we can say for the width here to be a hundred percent oops did i do that correctly i'm going to grab the form there's the form and i'm going to say i want the form to have a width of 100 percent like that like that okay so if i remove this let's say work no okay so let me add a bit of a margin between this between the input and the filter i'm going to say let me place a margin of zero on the top zero on the right on the right or on the left and right and say 30 pixels on the bottom push that down and i want the filter by region where did i place this inside the div so i'm just going to say class name of region dash filter like that and then i can target it in my in my css by saying it's inside the filter and it's called region dash filter and i'm going to say let me place a width of 100 percent on it like that so that this goes to the to the to the what's it called to the left and then i can say because i want to target my select which would be this i can do that and say for the select and it has a class of select as well and i'm going to say a background color oops background color i want the color to be this as well i want the text color to be white i want the font family to inherit inherits like so i want the padding to be eight pixels like the input and then we can say what else do we need for this oops not that one so they we need uh it already has the card doesn't it it already has that so i can say um uh what can i do let's say let's have a width of 250 pixels no i don't want that or maybe 200 pixels let's say 200 pixels and then you can see you can see border numb which will move this border that you can see right there and you can see a border radius of 5 pixels so that it matches with everything let me just increase the padding to 12 pixels as well as the input padding oops console 12 pixels like so okay okay so let me remove the the padding on the board on the on the body so that this can spawn the entire width okay so i can move this padding right here and then i can remove the one that i placed on the media query like so which will span the entire way but then but then you can say this also spam which i don't want so what i can do is uh for the header let me go to my header here's the header for the head i'm going to say let's have a padding of 10 pixels on the top and bottom and 20 percent left and right like so we can move them inwards and then for the form for the form which will be wait a minute for the class of filters so that you can just do for the both of them so i'm just going to say for the class of filter i'm going to say padding of 20 pixels all round so that you can push inwards as well and then for these countries let me go to my country's js and i'm going to say for the grid class then i want to have a padding of 20 pixels as well i would have put this inside a container but i don't like doing that because these are just very easy to get confused okay so i'm just going to save for my grid let me add a padding of 20 pixels all round as well push the main ones like that now on on bigger screens on bigger screens uh i don't want this to appear like that so i'm going to say i'm going to change this way i'm going to change the inputs as well as for this once it reaches a width of around 768 pixels yeah 760 pixels should be fine so i'm going to say right there and i'm going to grab my filter and for my form control you remember i placed a width of 100 so i'm going to say width of auto like that and then for the input inside the form i'm going to grab that plus i'm going to say for the input should have a width width of auto as well and then i have to change the because i placed flex direction of column right arrow where was it i placed a flex direction of column right here so i have to change it to flex direction raw so that they got side by side again so it's inside my filter so i'm just going to say inside my filter my filter i want uh flex direction over row save that let's see that and then we can oops maybe we can move this so that it's just hundred percent for both what i do what did i do what did i do wrong since that my input my filter from control 100 with auto justify i can move this become a nine item center what am i doing wrong okay let me just check what i'm doing wrong um flex direction of raw this will go back to column and then i can see oh i have a margin somewhere i have a margin where was the margin was it on the input imagine on the input of 30 pixels so i can remove that right here and i'm going to say margin of zero and then i can go back up here and uncomment this which will place that like that and then i can say the filter should have a wave of 100 what am i doing wrong justify content justify content to space between okay okay okay that's enough that's enough let's just check what's wrong and you can see this is taking up all of this space so i need to target the select what did i do on the select let me just confirm this what they do on the select where's the select it's right here so a width of 200 pixels but that doesn't stop it from taking all of this why why why why region field has a width of 100 percent that's why that's why okay guys i figured it out i was almost giving up but we did it oops why isn't this resizing okay so all i have to do is just remove this once i declare it up here and i'm going to just place it down where am i right there and i'm going to remove and i'm going to say a width of auto as well let's see yeah right there okay nice nice nice nice nice very nice so let me add some padding for these for these widths so i'm just going to say um for no longer on the body but for the for my grid right for my grid and then i want for my filter as well actually i should just start with the filter and then the header as well the header as well i want all of them to have a padding of um maybe 20 pixels on the top and bottom and 100 pixels on the left and right let's see how that looks that looks nice that looks nice and you can see everything is right there now the in the next video we're going to be implementing um this such capability as well as adding the icon that i missed right there and this icon which you're going to be getting from font awesome and then i'm going to also be implementing the individual pages for the for the um for the countries and to do that we're going to be using react router so i'm just going to stop my server and i'm going to run npm install react dash router dom and this will give us access to the react router but we're going to do this in the next video okay so just to start it off i'm going to be importing right below that i'm going to import a few things and i'm going to import browser router brow browser router as router give it an alias and route as well and link and switch really switch really i don't think we need the switch but all of this will be coming from react dash router that's dom like that which is currently what we're installing okay so i'm going to stop this video right here guys uh if you like the video remember to leave a like and subscribe and once i finish all of these videos i hope it helps you and i hope you enjoy it and i'll see in the next video

Channel: tsbsankara

Views: 5,340

Rating: 4.9327731 out of 5

Keywords: HTML, HTML5, CSS, css, css grid, css flexbox, javascript, es6, es7, react, reactjs, frontend, front end, web, web developer, web development, netlify, vscode, restapi, rest, api

Id: vwZtmHSa9OY

Length: 53min 3sec (3183 seconds)

Published: Fri Dec 04 2020