Code A React Website Tutorial | ReactJS Tutorial For Beginners

[Music] hey guys how's it going i'm back here with another video and today i decided to bring this tutorial which was requested by a group of my subscribers and it's been a while since i actually wanted to make this video because i know how difficult it is to understand the fundamentals of react so i thought about i thought why not just combine many different concepts that are really important in the beginning and just show you guys overall how to build a full website in react um this website will be organized the way that i would probably want to organize so i will teach you guys some stuff about folder structure how to organize your project also we're going to be using some important libraries such as react router dom so that we can have different routes in our application and we'll also be making a really cool responsive navbar in our application if you are interested in seeing what we're going to build it is basically this right um it's a very simple website uh it's the it's a mock of a restaurant website as you can see um it has a footer it has a navbar um there's a beautiful landing page then you can go to the menu page where there's many different menu items um which you can you can see the way i organized this is in a way that will teach you guys many different essential skills in react and it all looks really good um then we can we have an about us page um which you can organize in like whichever way you want i don't want to focus that much on like making this exactly like a restaurant website i just wanted to use this as an example as you can see of what of how you can actually build a full react website so that if you're in in the beginning stages of learning react i hope you can gain as much value as as possible now i mentioned the responsiveness and you can see that when you drag this a little bit like this um it's the links at the top of the navbar will just very simply disappear and you can click on this and it will toggle appear the links will appear so that it will work well in various different types of screens um obviously i don't want to focus that much on css in this tutorial and for that reason i won't be actually showing any css all the code is in the description um there's a github repo if you want to check it out together with all the images that all we'll be using in this application which are copyright free so that if you want to use in a public um web app you can just use them and i won't be focusing on css i'll just copy and paste the css that i build myself so um if you want css tutorials i can definitely make them however if i included css in this tutorial it would definitely like stretch the tutorial by like i don't know one hour more and i just want to focus on the important stuff which is actually the react aspect of the application now before we actually get into the tutorial if you guys can leave a like and subscribe i would massively appreciate it um every single video takes a lot of time for me to make and if you guys leave a like it definitely push my video to more people so i would definitely appreciate if you guys did that so we can grow this channel and just hit my goal that i have my personal goal that i have for this summer which is to hit 30k subscribers by the end of the summer i don't know if it's doable but if you guys with the support that you guys are giving me i definitely think we can get there so i just wanted to ask you guys that and now let's get into the tutorial so the first thing we have to do is we actually have to create a folder in our computer um and give it a name i called it react website tut to to call it like tutorial but you can call it whatever you want and then you can open your code editor i'm using vs code but again it doesn't matter you can use whichever one you want i prefer vs code because it has a lot of extensions that are really nice and it's really it has a really good support for react so when you open up your code editor like this um at least for vs code you can just click on open over here and you can choose whichever folder you want to run your application so i'm going to choose the react website which is already opened here so when i click on this it should open up your application and you can see that we are now inside of that folder which is great and when you're inside of that folder you want to open up the terminal because we want to run a command that will allow us to run our react application so i'm going to click on um over here terminal at the top and click on new terminal and you can see that this will appear i'll close this on the left and just keep the terminal like this and i'll clear it by just pressing ctrl k or if you're using mac it's command k and you can see we have our beautiful um comp like our beautiful terminal over here now one thing that is important for you guys to understand is that um you need to have node.js installed in your application uh in your computer and you can also need to have npm installed in your computer so i'm going to open up here so you can see no gs you just go to node.js download over here it will give you instructions on how to download node.js depending on your operating system and for npm as well you just download npm and node.js is uh basically you need to have it in your application so that react will run and npm is a package manager which will allow us to install different packages in our application including allow us to install react into our computer npm is probably one of the most famous package managers out there especially if you're using react there's also yarn which is a package manager that i use a lot as well but for this tutorial for simplicity reasons i'll be using npm and i recommend you installing node.js and npm before you actually start coding so after you have both of them installed you can come here to your terminal and there's a simple command that will generate a react application for you automatically this is a very famous command for especially in the beginning in react and i definitely recommend using this command uh whenever you're going to start an application it will automatically generate all the different um files and configurations for a react app so that you don't have to do that i'll do that you basically come to your terminal and just write npx create react app like this and then you just put a dot at the end to represent that you want to create this react application inside of the current folder that you're in when you press this command you'll see that um it'll start generating all your packages if you don't see this if it's not running maybe you had some issues downloading node.js or downloading npm maybe you just want to restart the terminal so i would recommend also closing the terminal by clicking this over here and just opening the terminal again but if it works you just have to wait a bit so it will generate all the files you can see it's already started generating folders and files into our application and i'll be back in a second when it finishes installing everything as you can see um our command stopped running and one thing that is important is uh it might be a little bit different you'll see mine has yarn.lock it's because my computer is already pre-configured to always use yarn but yours might have another package which is a packagelock.json it doesn't matter um both of them it won't make any impact into your application so if you have yarn door lock good it means you're using yarn but if you have packagedlock.json it means you're using npm so now that we have our react app completed we can actually run this application it auto-generated many files that already come with the react app as you can see over here and it actually comes with an example application and i'll run it just to show you guys i'll run npm start to start our application and when i run this you'll see that it will start um generating our local host and our actual website will run on the localhost 3000. it will refresh a bit and you can see this is the example application that comes with every create react app website so this is good but this isn't what we want to build we actually want to remove everything that already comes with this if you want to check it out i definitely recommend looking over the code if you're a real like a very very um like just beginning to learn react i would definitely recommend to go over that code however we're actually going to make some major changes to this what i like to do with every react app is actually like to delete some of the files that come with create react app for example i want to delete the setup tests the logo the index.css and the app.task.js the reason for both of these test files is that i don't actually want to test anything testing is good but if you're an advanced level um for a beginner you definitely don't need to write any tests and the index.css and the logo are completely unnecessary for most use cases so i'm going to delete all of these files like this and i'm just going to move them to trash but now we also need to make some changes for example i want to be able to come to my index.js and just delete this import statement here at the top because we deleted the index.css so we don't actually want to see this anymore now we just come to the app.js over here and i'm going to close this terminal here just by clicking the x button and i want to remove most of it actually i'm just going to leave this div here and i'm just going to delete this logo at the top now i'm going to assume you guys know a little bit of react so you understand what a functional component is you understand that every react application runs directly from this function called app over here and we can write stuff over here for example we can put html or better known as jsx inside of here and the changes will appear in our website for refresher you can see whatever i put there appears here i can actually just put like an h1 like this and it will definitely appear as if it was pure html as you can see right here now the important things that i won't be i won't be assuming that you guys know is how to actually structure application maybe how to work with states and also how to actually build a full website um using react but the very basic stuff i won't be taking as much time to explain just so that the video isn't that long now that we just went over this we actually have our program running and i want to start making some changes the first thing that i want to do is i want to create a navbar so that our website actually has a beautiful network here at the top similar to what we've done previously so what we do is i want to create a folder over here which is going to hold all the components in our application and components will be every single piece of code that might want to be reusable or any piece of like a ui that we want to just just add to a certain part of our application so in this case i'm going to include for example here the navbar and the footer which are two parts of our website which aren't actually pages but they exist independently from each other so over here i'll add a file called navbar.js and this will be the file which we use to actually create our navbar there is an extension that i'm going to be using in this tutorial which i'm going to open up over here if you go to the extensions tab you can see there are many extensions that you can download i recommend downloading many of this as you can see over here but more specifically i recommend downloading the um let me just find it uh is it the um it's one of the most important ones i think yeah over here es7 react redux graphql wreck native snippets this allows you to whenever you create a component for example the navbar you just type something like rfce and press enter and it will automatically generate a functional component with the name of the file for you this is amazing because it reduces your development time and it just makes everything goes a lot go a lot faster so we just created here our beautiful navbar um and we want to start actually making it look a little bit better so what i want to do is i want to add a class name to this called navbar like this and over here inside i want to divide our navbar into two parts and you guys will see exactly what i mean i want to have uh i want to basically create a navbar that goes throughout the whole screen but half of it the left side will be where there's like a logo or whatever we want to add and the right side will be all the links to the different pages in your website so to do that i usually like to create two divs inside of this navbar um one of them will be called left side like this left side and the other will be called right side one thing that i didn't mention but if you're just not familiar with that in react you actually don't use the word class similar to an html use class name and the reason for that is because um in react since it's javascript class is actually a keyword in javascript so to avoid confusion they just call it class name and i definitely recommend using class name so now that we've divided this into all its divs um we actually want to add the individual stuff inside of here one thing that i want to add is i want to add the logo to the left and obviously right now we don't see any ui any css but we'll we'll see it later um i just want to do the just want to write the actual react first and then add the css but i want to basically just put here an image tag and this will be the logo that we had in our website and to add an image it's pretty simple you just put the image tag you write src and instead of putting a path like a string you actually put as direct javascript like this you open and close um curly braces which indicates that you want to add javascript so you don't actually do it like this where you just put the the path to the image like this what you do is you put this curly braces and you import the image that you want to have into your application and just use it inside of this tag you'll see exactly what i mean because we actually need to put the image for the logo inside of our web inside of our folders right so create here a folder in our application called assets and here it will basically include every single image audio video that we might want to use in our application it's just a good way to organize our project so the image that i want to put and again if you want to get the exact images they're all in the description um and they're all inside of the repository i definitely recommend getting them i can also put some of the links for them in the description so you can just download them but i'm going to put all the images i want inside of this assets folder as you can see i just put the pizza logo over here this is the image that i'm using and it is inside of our assets folder so what we need to do now is we actually need to import this image into our component so i'll just come over here and say import give this image a name i'll call it something like logo and then say from and then put the path to the image since we are inside of the navbar component which is the navbar file over here we need to get out of this components folder and get inside of the assets folder so to get out of the components folder we use two dots as the path then a slash and now you can see we are actually in the src folder so we can just write assets like this and then go inside of the assets folder and access the pizza logo.png image and in react this is the standard way of doing it i know it's a bit weird if you're not used to react but you just import the image give it a variable name and then whenever you want to pass this image to an extra src or source you just copy the logo name and put it over here now you'll see that we'll actually probably have the image if we don't actually don't because we haven't set the css for this page yet and we actually haven't even imported the nav board to our application um so let's do that right now we we want to display this nav board inside of our app right so what we do is we need to come to our app.js which is our actual application and we want to be able to import this component inside of here so i'm going to do that right now i'm going to come here at the top and i'm just going to import navbor from the path towards the navbar.js file so to do that i'll just go to bat two dots back um actually i don't need to go to dots back because i'm in the app.js so i just go one then slash and then i go to the components folder and then the navbar um file like this and if you're importing a javascript file you don't need to put the dot js as you can see you just put the name of the file and it knows what it is automatically then we just grab this navbar component and if we want to render this component in our application i'll just paste the name of the component like this and self-close it like this with components you need to self-close you can't do it like this uh like you normally would do this won't work you need to actually put the slash inside of the tag so when we save this you'll see that we have our pizza image like over here obviously it isn't how we actually want it to look because we haven't added any css yet but you can see the image the image is actually correctly rendering so what we want to do now is we want to be able to um come to our navbar now we want to be able to put the links over here however to do that we actually need to install a package into our application which will allow us to actually have different routes in our website and what i mean by routes is if i want to go to the about us page i can go to slash about in our link and it will bring us to that page react doesn't have support for that um like normally so you need to install an external package which is a very very famous package called react router dom which will allow you to do that so to install this package we just come to visual studio code we'll open up here the terminal and i'm going to open another instance of the terminal by clicking on this plate tab over here and you can see that we have our terminal here on the right and all we want to do is we want to write npm install and the name of the package in this case we're going to install react router dom like this when we press enter it's going to start installing our package and we can even just close this while it's installing because we know it's going to finish installing so what we want to do is we want to import this package here at the top on the top of the app.js because with react router dom you need to define whichever routes you want to have in your app inside of the highest order components so in this case it would be the app.js component because it is the entry point of your app so if you want to get more in-depth to a more in-depth tutorial on regular dom i have a full video on it where i explain everything about it so i won't be focusing that much on recorded dom i'll i just want you guys to understand that if you want to have different pages in your app this is how you do it so i'll come over here and say import and i'll import some stuff from react router dom so i'll say from react router dom router dom like this and the things that i want to import are basically uh we want to import a router tag a router component and what we usually do is there's this thing called browser router inside of recruiter dom which um it's just a long name so we actually usually change it to router by saying as router and now we can use the word router to represent this component instead of browser router it actually doesn't matter you can call it both of them but i'll just do it this way because it's kind of the standard it's in the documentation and then we also need to import the route component and a switch component and i'll go over what they mean right now so basically um if we want to add different pages to our app we need to come over here at the top and inside of our app div we want to find a router and this will just tell react that um we want to have uh some some routes in our application so i'll put router over here and you can see that it needs to be wrapped around all your different routes then inside of here after the navbar we want to add what is known as a switch tag which is just a component that will allow us to to basically tell our routes that we only want to render one route at each time so inside of here is where we actually define the different pages or routes that we want to have in our app for example we want to have a home right like a a home route just the route or the page that is rendered when you just write the you the url for your website so to do that we just come over here and put route and then you self-close because this is a self-closing tag and inside of here you put the following properties you put a path which is basically the the like the the destination of your route so since we're ha this is the home page it's just a slash to represent that it basically is the website that the page that opens when you open the website then we're gonna pass an exact um tag or property which just again together with switch it means that um you just wanna display this route uh and you're gonna wanna display multiple routes at the same time and at the end we wanna display a component we represent uh what component you want to render when someone tries to access this route so imagine we're going to have a home page right a home.gs file this is where we put that component so this is the idea of routes and why did i want to introduce routes right now is because um we're going to create now a home page inside of our folder we're going to create a folder called pages and this will contain all the different pages that we want to have in our app um so for example i want to have a home.js file which will have to represent the homepage and in the tutorial website that we're building it's going to be that page where there's like a beautiful image with the name of the website um in the middle of it and it's just basically that right and again since this is a react component i'll just write rfce and press enter and this should just render our or create our component as you can see so i'll save this right now and we just want to import this home component here at the top so i'll just do import home from dot slash components slash actually it's not in the components folder it's actually in the pages folder so slash pages slash home as our route and now to make it so that whenever we write something in this route um or whenever we access this route we want to render the home component we just copy the home tag over here and just put it inside of this component property and you'll see that now if i write here in the home.js imagine that in our home page all we want to see is a tag saying hello world right hello world so what happens is if we go to if we refresh our page over here um now you see that we have the hello world tag over here and if we go to another route for example let's say we want to go to the about page we haven't defined an about page yet but we know that it isn't the home page so it won't show the hello world down here at the bottom it will only show if you go to this route over here and this is kind of the idea of how we define we define different pages and different routes in our app and the reason why the logo appears for both of them is because a navbar is something that we want to keep in every single page so uh that's why we put it on top like above the switch because the switch will just change the the page below the navbar um depending on the route you go but we want to keep the navbar in every single page so that's why we do that um when we create a footer we're going to put the footer below the switch tag so that the footer is also in every single page now that we have this defined we we actually can come here to our navbar.js and we can start putting the links we needed to define this first because with react router dom there's a component called link which we can use now since we actually defined that we're using react router dom so i'll come here to navbar.js and i'll import that cool um component from react or dom called link and this component is similar to like an a tag um where you can click on it and it will basically serve as a link but it's better it's best practice to use this component instead of a link tag and similar to like in html because um it is pretty pretty defined and react in the react router dom library so we'll just import this link tag and instead of here we'll just put a link so to to make a link it's pretty simple you just say link like this and you put here for example the text that you want to represent that link so i'll say something like home and over here you just give it a two property which you just pass whichever route you want to go to whenever you click on this link so i just want to go to the home tag like this or the home route like this whenever i click on this link but we're going to create four links uh one for the home page one for the menu page one for the about us page and one for the contacts page so let's just change them like this the menu page will be on the slash menu route the about us will be on the slash about and the contact will be on the slash contact so we'll just do it like this let's say um menu and let's say about and over here let's just pass a context now when we save this you'll see that if we go over here we have all of our links beautifully displayed here in our screen when i say beautiful i obviously don't mean it it actually looks good because we're gonna change that um but we had to actually just start defining our routes or our html like this before we actually do something now before we actually move on and start making this network responsive i'm gonna show you guys i'm just gonna put the css so that it starts looking a little bit better so you guys can actually understand what we're doing so to put the css i'm gonna create a folder over here called styles and here's where we're actually going to keep all of our css files the only css file that won't be over here is the app.css which by the way i would recommend just deleting most of it just keeping this small thing over here at the top and i'll show you guys which css we want to put inside of here we do want to put some css in here and the css that we put inside of the this app.css is all the css that affects every single page so that's kind of the organization we're gonna or the the the flow that we're going to be following so i'll close this for now but we're going to create our navbor.css file inside of the styles folder so navbor.css and instead of here i'm going to paste all the css that i have pre-built for the navbar component if you want to check this out again code is in the description this is what we're doing we're just styling it up so that it looks better right now it won't show actually because we haven't actually imported the css file inside of our navbar.js so if you make any css files the way you actually see the changes is you come here to navbor.js or the component you want to have and you need to come here at the top and say import then just put the path to that css file so i'll just say two slashes back to get out of the components folder then go to the styles folder and then go to navbar.css and you'll see that now we at least have some styling in our application right it looks semi-okay it doesn't look perfect but that's completely fine um you can see that right now we have this a weird uh thing over here like this weird padding and to fix this we're gonna add some styles to the app.css and the styles will be the following i'll actually replace this with the following css we're removing we're accessing the body and removing the padding and the merging because it for some reason automatically comes with it so you definitely want to remove this and i'm also using aerial throughout the whole application so you see that if i come now to our page it looks a lot better it already started looking like a real website and i just like how it looks right um again check out the code in the description if you want to grab all the css because i won't be going over css in this tutorial now the issue with this navbar right now is that when we push this thing over here you see that and when we make our screen smaller you see that it doesn't fit in right it definitely doesn't adjust to whichever screen you you have so we want to fix that by adding some media queries first so i'll just paste the media queries so you guys can see over here at the bottom we'll just paste this this code and it will basically media queries if you're not familiar with css it just um gives you some you can determine size based on the width of the screen so now if we decrease this you'll see that um some of the the things will start um shrinking and the logo might you see that the links disappear when it reaches a point because what we want to do now is we want to make it so that when we get to a certain screen size um we're gonna show the button uh the the toggle button that i showed you guys in the beginning and we also want to make this logo maybe disappear or at least shift over here and that's something that we're gonna be doing right now so let's come over here to our network.js and what we want to do is we want to add that button that will appear when we shrink our screen right but to do that we want to actually install a package which is the material ui package which will allow us to include icons already pre-built and it's really awesome you can add all of this different cool icons into your application and it's actually pretty simple the way you install it you come here to the getting started in the material y um website as you can see and you just copy two commands you copy the npm install material ui core so i'll come here to my um to my terminal again and the same place where i actually installed reactor dom i'll just paste the command and run it and while it's installing we also need to install the the icon part of the library which you can see it's down here just copy this command saying npm install material ui icons and by the way i'm going to put this link in the description if you want to click it just go to the description and click on the link and then after this is installed i'll just install the material ui icon library as well so now that it finished i'll just install the other package the material icons as you can see and while that is installing we'll start by implementing the icon so with material ui one cool thing that you can do is you can come so i'll just go back over here and you see that we are in the material icons tab in material ui and you can just search for all the different icons that you want to put in your application the icon that we actually want to use is the um the name is reorder as you can see over here so what we do is we just click on this icon and you can see it already have an import statement that we can use to make this icon work in our app so just copy this like this and let's paste it here at the top and this means that we can just use this as a component so that we have a beautiful button in our application so i want to put this right below the this links because i want to show you guys some a cool thing that we can do so i'll just import this uh or use this reorder icon component as you can see and actually i'll just do it like this and i'll wrap this around in a button because we want to be able to click on this icon so that whenever we click on it it will change or display our links right so you see that if we come here to our app uh right now it is does it show uh let me refresh this but i guess the reason for it not showing is because in the css that i added i actually removed the i already added the css that will make it so that the button will only appear when we shrink to a certain screen size so to see the button let's just close this like this and you'll see that it will appear like here right as you can see it's a white button and it will only appear at a certain place in or at a certain screen size and all of this was done through css so if you want to really check out the css code just go over it but you can see that the button is appearing and you can click on it but nothing really happens right so what we want to do is we want to be able to whenever we click on this button um remove this icon from here and display the links that were over here inside like on this left side of the div right so to do that i am actually going to insert um new the same links but on the left side and we're going to create a div over here right after the logo and this div will be called we're actually going to give a class name to it so class name and the class name will be hidden um links because initially it won't be showing we're going to set the display for this equal to none which in css means we're not going to show these links um you'll see that right now it doesn't actually show it anything if i refresh the page the links aren't appearing because we actually haven't set it so that it only shows when you shrink to a certain size right it kind of makes sense but this is kind of the idea so after we do this we'll come here to our code and we need to make it so that we deter whenever we click on this button it will determine if we want to show the links or hide the links so to make this kind of logic what we're going to be using is a very important topic in react a very important concept to react called states which is basically a variable that we're going to create which is uh gonna be a true or false variable so a boolean um which if it's set to true then we want to show the links and this and remove the the logo from the screen and if it's false then we want to show the logo and remove the links this is what the toggle the button that we're going to be clicking will basically make so to make this work we're going to come here to our import react statement and we're going to add a use state hook over here at the top meaning we want to use this hook in our application so to create a state you just come into the your your component and you just say const then you set this equal to use state and you give it an initial type so um initially we don't we don't want to show the links we just want to show the logo so we're going to set this equal to false and then over here we want to give a name for the state or a name for the variable let's call it open links but we can call it whatever we want and then we need to give a name for a function that will change the value of this state now i don't want to go that much in depth on states because it is a whole different concept and i'm assuming you guys are already very familiar with states just because it is one of the fundamental concepts in react and i definitely recommend taking some time to understand it but just think about it this way it's just a variable that um whenever you change its value it's going to re-render the website so that it will show the changes that were made if you did this by just creating a normal javascript variable it wouldn't actually trigger a re-render of the website so that's why we are using states now the syntax for states is a bit different so i definitely recommend watching a video on states before actually trying to build this because it is something that you need to know so we're going to create this function i'm going to call it set open links and like this and now that we have this state we want to be able to uh determine if we want to show this or not um based on the value of this so what i like to do is i want to i like to come here to uh the left side div and i like to give it an id and the reason why we're getting in in it and the reason why we're giving it an id is because uh we we want to basically change its id based on the value of this state so that we can actually add styles depending on whether or not you clicked on the button that's is that that is the only way you can actually make this work so we're going to come over here and i'll just say that if the open links is equal to true then let's give this div an id called open for example and if it's equal to false we'll give it an id of close so that now in our css we have a way to assess what we want to do or which styles we want to give based on if you clicked on the button or not so the way to do this is you can actually use something in which is very common in javascript called ternary operators which is basically like this it's like an if statement but it's a bit different you say that if open links is equal to true then um you want to make this id equal to open else you want to make this id equal to close and this is kind of the syntax you make the if statement the condition over here this is basically saying like then do this and this is basically saying else do this and we're just setting we're just setting the id to different values based on the value of open links and the way to assess this is we're gonna initially it's false right so let's come to our website you'll see that if i open this up the inspect in my google chrome you'll see that the id is closed but if i set the sequel to true initially and i refresh my page um over here let's refresh the page you'll see that i'll actually just come over here you see that now it's open instead of close right it is it is changing the based on the value of open links so let's just add it to go to false and what we want to do is we want to be able to click on this button and based on what we clicked um it's going to change from true to false or if it's true it's or if it's false it's going to turn into true we're just changing whenever we click on the button so to do that we actually have to create a function over here and we'll call this function toggle navbar like this and to create a function it's just like a function in javascript we'll just use the normal javascript syntax and inside of here actually before we write any code for this we need to tell our button to call this function whenever we click on it and in react it's pretty simple you just come on the button you make this you give this an on click like this and instead of here you just put the name of the function so put this function which is the toggle navbar and now whenever you click on this button it will actually call this function and inside of here we want to add the logic to basically um change the value of open links from false to true if it's if it is false and if it's true we want to turn it from true to false right we want to alternate between them and the best way of doing it is by basically grabbing this function which we can use to set um to basically change its value and we just set it equal to the opposite of what it currently is so if we wanted to whenever we click on this button always make it true we can just put true over here um but if we want to always make it false we can just post it false over here but if we want to alternate the value meaning that if it's currently false it will become true and if it's currently true will become false you basically put a not symbol and then the current value and this logic is very common in in javascript in general you're just changing its value to the opposite of what it currently is and this means that now if we come to our application you see that if i refresh my page um currently the it is closed right but if i click on if i actually shrink this a bit and the button will appear and when i click on this button um it should change from close to um open and as you can see this is exactly what happens we're just changing the id value inside of our actual html and this is great because now we can add some styles based on if it is open or closed and i'm just going to copy the css so you guys can see i'm going to come over here to navbor and and i'm just going to paste the rest of the css which again is in the code in the description and now if we come to our website you'll see that the links are not over here but when we click on this it will actually toggle between between the the image and the actual links which it looks amazing i think it looks really good um it is a really important thing to understand in the beginning because um it is really nice to have to to actually build this it will teach you a lot about react um and all the changes that we're making are all being done by css so um i definitely recommend checking the code out uh so you truly understand what is happening but now you can see we have our beautiful navbor finally done and whenever we click on any of these links it will actually redirect us to the page where we like to the link that we put whenever we created this route which is amazing right so what we want to do now is we want to start actually building the pages okay so the first page we're actually going to build is the home page and by the way shout out to my roommate colin pereira who helped me build this page um he's good with ui so that's why i asked for him for his help and we were able to build this page which we're going to be replicating right now so let's open up here the code and let's go to the pages folder into the home page so i'm going to actually close this tabs over here because we're not going to be dealing with them right now we'll actually need to create a new styles file which is a new css file for the home so home.css and for the home.js let's think about what we want if you recall in the beginning of the video we want to basically create a page where there is a picture of a pizza and inside of it there's like a text a header with a button um right at the center but to the left and that's what we're going to be trying to replicate right now so let's actually come over here let's remove this and we want to be able to put a div inside of here which will basically be the div that rep that holds the text so like the the title or whatever like slogan you want to put to your pizza website so i'm going to put some class names for this one i'm gonna call it um i don't know home and for this one i'm gonna call it uh something like header container it's just a a simple header a simple um kind of title card where we're to be able to put text so let's call it header container and we want to basically inside of it add two different types of text we want to add a main title which is kind of like if you if you were creating a website for nike it would be the just do it the slogan you know what i mean for us it would be something saying like pedro's pizzeria something like that so let's just come over here put in h1 and say um pedro's pizzeria like this and then we're gonna have a sub like a second title um which is gonna be a smaller one so it won't actually be a an h1 tag it would be just a simple p tag which will say something like a cheesy line something like i think i put pizza to feet uh to fit any um taste something like this and then finally we want to be able to create a button where when you click on it it will bring you directly to the menu and to make to make that work we're actually going to create a button like this um which is going to say something like order now and we're actually going to wrap this button around with a link tag which is the same link tag that we used in the navbar over here this link tag so we're actually going to do the same thing we did before we're going to import this link tag from reactprotodom and we're just going to wrap this around wrap the button around with link tag which will basically make the whole button act like a link so whenever you click on this button like anywhere in the button it will bring you to whichever path you put over here so i'm going to put two and we're gonna say to the slash menu which we didn't create yet but it's gonna be a fundamental part of our website now this should look okay let's come here to our chrome page you can see this is what's happening if i click on this it actually brings it to the menu page which looks really good but um we want to put the picture right how do we actually put an image over here and this specifically something that a lot of people have issues with because we don't want to put a sim a normal image like we did for the knight board this is an image so we used an image tag for this but what we want to do here is we actually want to put a background image for the whole page and have it act as a background image and it is a little bit different um the way you do it in react so that's why i wanted to bring this to you guys um we actually have to add the background image um inside of this div and not actually in css so what happens is you can actually add css similar to how you would do normally with html directly to your react app so to do that you just give a style tag or style property then instead of it you just add another set of curly braces so two of them one enclosed on each other and here you can add a type of css that isn't really css but it's just a modified version of css which can which allows you to give all the styles you want so for example if i want to put a background image to this div i can just put the background uh background image um tag over here and then we need to do something very specific which is we need to pass a url which is basically the path to this background image and usually um if you're creating a normal application you put this in the css file and you just put the path but again since react doesn't work that way we actually need to import the pic the the image over here and pass it directly inside of here and that's why we're not actually putting this inside of the css file if you have any doubts on that just leave a comment down below i can go further into this why this happens why react is this way but this is something that you guys need to take into account so the image i actually already put over here i called it pizza.jpg again the links for them are in the description so we're actually going to have to put this image over here and the way to do this is we just actually have to use um back the backticks and not normal quotes because we're going to be adding text and also javascript inside of text this is very common thing in javascript so i definitely recommend understanding where we're doing this and then we're going to put url over here and then inside of here we need to put the exact image we want to um display which is the um pizza image that we put into our assets folder so i'm going to import this this picture over here let's call it banner image something like this um then let's put the path to that image let's go to the assets folder then slash pizza.jpg something like this and then let's put the banner image inside of this url and this over here should create a div with a class name of header container and put a background image to it which is exactly the background image that we defined over here so let's check to see if this is happening it is happening but obviously the css uh we we added we haven't actually added any css yet to our home page and we're gonna actually do that right now um the css will basically just set uh the size of this div to be equal to the whole screen um and then also center the text so that it looks a little bit better and change the button to look a little bit better as well so let's actually just come over here to the home.css and i'm going to paste all the css for this um so you guys can see it so as you can see we just added here all the css um very basic we just again set the size um we then made some changes to the header container so that it looks a little bit better edited the button edited the the text um then we we added some hover transitions we made it a little bit more responsive again the point of this website is not to be completely responsive uh if you want to change that you can definitely take into account all the different changes that i made to make it more responsive um but the thing is oh i forgot let me just remove this because this apparently has no no use but this is the css that we're adding and now all we have to do is we have to import the css file over here so let's just say two slashes then um styles and then the home dot css and now if we look into our page you can see that this is how it looks now to actually make um this div or this page fit perfectly we we need to complete the the skeleton of our website um what i mean by that is basically we have our nav board that is going to be it's going to be appearing in every single page but then we have um this page which will be manually changing depending on whichever route we click on but finally at the bottom we're going to have our footer which will be similar to the navbar it will exist in every single page so technically when we change routes the only thing we're doing is we're rendering a new component in between the navbar and the footer so right now that's why it looks a little bit ugly um we need to add a footer to application so that it will fit perfectly with the css so let's do that and with a footer similar to navbar we're going to create it in the components folder because it is not an actual page so let's call it footer.js and let's use the rfce to create our footer in our application and then we need to come to our actual app.gs um and add the footer below the switch statement so that the skeleton is pretty well defined it will be a navbar um then a switch between all the routes and pages in application and the footer right below it so i'll just copy this and import the actual footer into our app so i'll say footer and then i'll copy this and just put the path to the footer and then down here i just render the footer as it should i'm accidentally putting n over here but that's fine so now we have this footer which should be appearing at the bottom let me just see if it's working i'll just put a random text inside of here and you can see that it appears down here uh perfectly you can move through pages and the footer will constantly be in the page so what we want for the footer is actually pretty simple um we're going to have some sort of like um way to contact uh our like the business social media account so like we're going to put an instagram a link a twitter link a facebook link a linkedin link whatever we want and then at the bottom we're gonna have that classical uh text which shows like this is copyrighted content don't don't copy this website i don't know why i always put this because it looks nice and it's just something good that you should put in every website so let's do that right now um let's just put a class name to this uh let's obviously cool it call it footer like this and then over here i'm going to delete this and we're going to add a div that is going to represent all the social media icons in our page so uh let's just call it i don't know social media yeah let's call it social media like this and over here we're going to put all the icons for the social medias and down here let's actually just put a p tag and the way you actually put the copyright sign um it's very it's a very standard way you can use the ampersand like this and just put copy and it will know automatically what you mean and then you put the ear that what your website was made and the the url for your website i'm going to call it pedrotec pizza.com something like this and you'll see it actually shows the the copyright sign over here at the bottom and the cool little copyright text so now we need to put the social media icons to our page and how do we do that well we can actually grab them from material ui i memorized every single icon from material ui so we don't need to go to the website and search for them again but they have one for each for each like social media so to actually import it we can just come over here and say something like um import instagram icon from um at material ui icons like this and then slash instagram and this should import the instagram icon so i'm gonna put it over here so you guys can clearly see um it working you'll see that now when we render this component it should display the icon uh for the instagram logo as you can see down here at the bottom um and we're gonna do this for both for all all of the other social medias so i'm just going to paste this three more times and let's change this to twitter then facebook um let me see facebook like this and then let's do for linkedin as well and then we also need to change obviously the um the links over here oh accidentally pasted um i should just copy this paste it over here and then this and paste it over here and we need to remove the word icon as well so that it's just facebook linkedin and twitter now you'll see that um if we actually try to render each of this icons in a row like this we have four of them so i'll just copy their names and paste them like this you'll see that we actually are now rendering all the different icons in our app and they look very small but we're going to change that through our css um that's going to be completely okay and honestly that's it for the footer it's going to always be at the bottom all we have to do now is add the correct css to make it look a lot better so let's actually create that css right now let's create a footer.css over here and i'm just going to paste all the css that we need for the footer and it actually isn't that much right we just basically set the width to be a hundred percent we make it a height of 200 pixels we changed the color to be um this really cool color that i've been using throughout the website um and then uh the each icon is an svg so to increase its size and change its color um we just access the svg inside of the social media div and this is like a a simple css but it actually makes the footer looks look pretty nice if i refresh the page and i actually forgot completely to import this always remember you have to import the css file to your component so to make that work we need to come over here and say import and then go and say uh styles slash footer dot css and now the changes should appear as you can see we have here our beautiful um social media icons and our beautiful copyrights uh text down here at the bottom so you see our website is actually looking pretty nice right now we just need to fix this so that it actually fits into the whole page and we'll have it set to continue working on the next three pages and i just realized my error with um why this page is actually not fitting perfectly it's actually a very dumb mistake if you look at our home.js file you can see that we added the background image to the header container div which means that only the div containing the texts will have this background image while we actually want to set the background image to the whole page which means the whole home div so we just have to copy this over here and paste it in our um home div over here and now you can see that our image actually works perfectly and we have a beautifully made home page i'm sorry about that i just i completely missed this but this is the idea um we have this beautiful page we can click on this and go to the menu page but all we have to do now is build the the subsequent um pages in our application and the next page that i want to go to is the menu page because this is actually the page which will teach you guys the most about um the fundamentals of react we're gonna be using um helper functions we're gonna be using lists we're going to be using json so it's actually going to help you guys a lot understand the basics of organizing your application and dealing with data so where are we going to deal with data because we want to create a menu right i decided on six items that will exist in this website or in this restaurant and i found a picture for all of them i found the title for all of them as you saw in the previous uh in the beginning of the video it looks pretty good so we want to create over here our menu.js page and we're just going to start a component by saying rfce and we'll just start by just coming over here to our div and giving it a class name of menu like this and in the menu we gotta really think about this what do we want in this component well we want to first of all have an h1 which is going to be um just an h1 saying something like our menu i want to make this cursive because i think it looks nice but i'm going to do it on the the css and i want to give this a class name because i want to differentiate this so i'm just going to say menu title something like this it's just because i want to access this in the css so i can make it cursive and the best way of doing it is just by giving a class name directly then we want to create a div which is going to display all the menu items and what i mean by that is i could very easily say imagine we have six items right and each item we have a picture we have a title we have a price so like the name of the item the the picture of the of the the item and the price right so i could just get them over here put six images in a row inside of this div put six tags to i don't know put the price i could do exactly that but that's not efficient at all and it defines one of the main purposes of react one of the coolest things we can do with react is we can come to this over here and we can actually give this a class name for example of let's call it something like menu list right and instead of manually putting every single item in the menu we're actually going to have a list in our application an array in our application which we're just going to loop through the array and ma and automatically render each item in that array as a div in our website if you're new to react that might seem very weird if you're already a beginner to intermediate developers in react you know exactly what i mean this is a really awesome thing you can do in react and i'm going to show you guys exactly how to do this and to actually make this work we're going to have to create another folder over here so that we can start defining our menu so i'm going to i like to call this kind of folder uh helpers because it will just contain a file which um will basically help us um with some part of our application but it doesn't fit on the other folders so you can call it whatever you want you don't even need to create this folder you can just put the file in anywhere you want but i like to do it this way and inside of here i want to create a file called the menu list so let's call it menu list dot js and this file won't be a component it will actually just be a single file where we're going to export a single variable in in javascript and this variable is a list and we're going to call it menu list and this list will be a list or an array containing objects inside of it and each object will contain um three different properties one property will be the the name of the item so for example pep peroni pizza something like this then it's going to contain some sort of image which um i'm gonna we're gonna import the images for each item over here and we're just gonna put the image imagine that we we imported an image from our folder like we've done so far um and and called it pepperoni pizza right so imagine we did that i'm going to do that in a bit but imagine we did that then this is where we would put that image and then finally we'd put a price and let's call it something like i don't know 12.99 so we're going to create each item like this and we're going to have a list of these objects and then to render this this items into our website we're just going to loop through the list and use each item of the object of the list to change the the ui so that it fits for each item specifically you'll see exactly what i mean but we need to create actually right now six different items in our menu um the link for the items that i created are in the description with the code i'm gonna cut so after i actually put all the items over here and i'll be back in a second if you want to make the changes create your own menu play around with this it actually is really cool so i would definitely recommend doing that but i'll be back in a second where when i finish filling up the data for our list okay guys so i'm back and you can see that we actually made a lot of changes to this um file the first thing we did is i added many different pictures to our assets folder these are all the pictures we're going to be using in this website so um if you want them again link in the description and then i just imported all the pictures for each menu item over here so if you're for making a website and you're playing around with this you're not you're not making a pizza right a restaurant you're making like i don't know a sushi restaurant you could import here the pictures for each menu item directly over here and then i created an individual menu item for each like i created very like six different menu items um one for pepperoni pizza margarita pizza i created a pedro tag special pizza which by the way this is actually a real pizza not that it's this isn't the name it's just how i called it but it's not famous outside of brazil which is where i'm from definitely recommend trying it out it's really good um and then i put a price put the picture the the image link or the path then i did one for each of this other types of pizzas and now we have a menu composed by six different items which is amazing and why did we take our time to do this can we just manually put each like render each item um as a div and then as an image well you'll see why because now what we can do is we can come here to our menu dot uh dot js which is our our component and we can actually just loop through this menu list so we need to import this menu list over here i'll say import um then let's import from let me say dot slash helpers slash menu list and we're going to import the actual variable that we exported now you can see that we actually uh we're doing something a little bit different over here and i just want to explain this really quick you see that we're putting curly braces around the import statement what this means is whenever we're importing exporting a variable for example like this from uh from a file uh so we know it's a variable because i'm exporting a constant or i could call this var as well i can call i could use a let keyword whatever i want but i'm exporting a variable then we can grab it by basically using this syntax we open and close curly braces and we grab the variable individually from here um it's a bit different from when we are exporting something by default for example like a component where we couldn't actually use curly braces we'd have to actually just import the whole file like this so this is just a side note that i think you guys should should understand if you're if you don't know that um i can definitely explain in the comments um if you're if you're more if you still have doubts on this so we just imported over here the menu list and we now want to use it in our application so i'll just come over here and i'll say menu list and we want to loop through this list so how do we loop through lists inside of our jsx or inside of our html in react well in react there's a very standard way of doing this and i know it's going to be confusing if you're a beginner however just try to wrap around your head around this this is something that you're going to be using a lot in every single react project it is something that is extremely important and i definitely recommend you be familiar with the map function and arrays before you actually start um coding and react or before i actually continue watching this video because we're going to be using it right now we're going to say that we want to grab this list and we want to map through each element and then for each element we want to grab the menu item and we want to grab its key so it's index and for each item we want to basically return a new div like this and in react this basically means that we're going to loop through each item in this list and it's going to create html or jsx for each item so we can manually use this menu item value over here and this will represent each item individually so if i want to for example just display uh divs with the i don't know the name of the pizza of the pizza i can just come over here and grab the menu item dot name because menu item is uh an actual object and you'll see that if we come over here to the menu page um it's not actually showing anything did i actually create something um i did oh i didn't actually define my route so if we want to see the menu page we need to come to the app.js and we need to create another route in our app for the slash menu so let me just do this real quick i'll have to import the menu over here so let's say menu and let's just copy it over here and paste it over here as well so now we should be seeing you can see that now we're looping through every element in the menu list and for each element we are just returning a div containing the menu item.name we can actually change this we can make it to show the price for example and you'll see that it will show the price for each element so this is kind of the idea of what we want to do but instead of just showing one of them individually we want to show them all of them at the same time as a beautiful card to make it look like a menu item in a real menu so are we actually going to display the ui for each item directly over here no actually no because i want to show you guys another concept in react which is the idea of having individual components um differently from what we're doing over here for example we're creating a footer or navbar we're going to create another component which we'll call a menu item and this will be a very simple component what it will do is it will access accept props um and render ui based on those props so props in react is basically imagine that this menu item will just be a div and let's create this div let me just give it a class name of something like menu item and this div right here will have three things it will have a div with a with a background image oh accidentally click some button but it will have a div with a background image then it will have an h1 tag like this and then it will have a p tag so the the h1 tag will be the the name of the item this div with the background image will have the image of the item and the p will have the price so what we can do is we can grab we can say that this will accept props and we can grab an image a name and a price from here and then directly from here we can just say that we want in our h1 tag to this to display the name that we passed as props and for the price we want to add a money sign and then display the price and then for the background image we're actually going to do a very similar thing that we did with the menu not not with the menu the home page we're going to add the same syntax for our background image like this but instead of putting a better image and inside of here oh actually accidentally didn't copy let me just copy it again let me just do this just copy this and then paste it over here um but instead of putting a better image we're going to put the image that we grabbed from props so if you're not familiar with props think about it this way it's just you have a function and you want to call this function many times but past different arguments right so it's the same thing we're just rendering this menu item many times but we're passing different values for the prompts so that uh if we want to render this component all we have to do is we have to come here to our menu list not our menu list our menu.js we have to import this component so import menu item from two slashes slash components slash menu item and then inside of here we want to instead of returning a div we're actually going to return us a menu item because we all the ui and logic has been created inside of this component but to differentiate each menu item we just pass the props and to pass props we actually just have to look at what props we said we were going to accept um and we we actually set an image a name and a price and we just have to pass over here um those values so i'd have to pass a an image like this uh some sort of name and some sort of price so we can grab those values directly from the menu item value that we're mapping through the list so i'll just say here for the image i want to grab the menu item dot image for the name i'm going to grab the the menu item dot name and for the price i'll do the same i'll grab the menu item dot price and now it's i i think it's beautifully done um we have this perfectly done into our application and we can actually save this and i just want to add this thing over here because react gives some some weird bugs if you don't use this key item so let's just add a key item over here this will make zero difference it's just that react gives some weird bugs if you don't put this or weird warnings so i just recommend doing this um and now what we should be seeing is we should be seeing each item each menu item being displayed like this now you can clearly see we don't actually see the image and the reason for that is because the image currently is a background image to um to a div so we just have to put some styling some css so that it will actually look good so this is basically it for the menu um let's create a menu.css file over here and let's paste all the css for this menu page okay so this is all the css let's save this and let's see let's import the css in this menu.js file by doing what we've been doing throughout the video um styles slash menu.css and when we save this you should see our menu is looking amazing and we can we can alter this to whatever we want for example if i don't want to if i want to make the the pepperoni pizza be i don't know five dollars i can just come to the menu list and just change the pepperoni pizza to be five dollars when we save this it should be five dollars you get what i mean like it's it's so maintainable this way because we're actually dealing with data if you start this menu in a database this is how you would be dealing with the data so it's best practices to do it this way and it looks just a lot cleaner a lot nicer so i definitely recommend understanding very well what we did here because it is an essential skill that you need to understand in react so we have our menu page actually done now so what we want to do is we want to transition to the about page which it's going to be very very simple um if you want to skip this page we're not going to do much here we're just going to put a banner at the top an image and then we're going to put some description and another image over here the contact page is going to be really good so we stick around for that one or just skip to when we make the contact page okay so to build our about page let's just come over here and let's create a new page over here which is going to be the about.js page and let's just write rfce again and over here we want to first of all add a class name which is going to be the let's say about and then over here we want to basically just set a page so that um we're going to have a picture here at the top i'm filling up like half of the string and then at the bottom we're going to have some sort of text so what i want to do is i want to be able to create two divs and separate this div into two parts so the first part is going to be a div which is going to um i don't know let's call it uh about top uh to me that is a the the top part of the about page so about top and let's create another one which is going to be about bottom like this about bottom and what we want is we want to first of all to add an image to the about top so it's going to be the same same same thing we did with the with the home page we're going to add a background image to this div so let's just copy this over here and paste it in our div for the about top and the picture that we want to add it's actually the picture over here called multiple pizzas again you can just use whatever images you want it depends on your application but i'm going to be using this one so let's call it multiple pizzas and say from two slashes then let's go to assets slash multiple pizzas um like this and i think it is dot jpeg and now let's just put this as the actual image that we want to put in this div and we won't be able to see any changes because we now need to define this route in our app.js so let's define the route let's just come over here and say about route like this and pass the about over here and we actually need to import the about which we can do automatically by just um writing about and pressing enter you can see it was automatically imported here at the top so when we save this you'll see that now um it should send us oh we need to go to the about page um it should have been sending us to the correct div um it isn't actually and i guess the reason why this is happening is because um we didn't actually add any css to this about um div and it won't work till we add some css because despite we're putting a pic an image over here it's not actually displaying any text if i actually put something inside of here any text you'll see that the image will now appear as you can see a list like a little bit of it so what we want to do is we want to start by implementing the rest of this so what i want to basically make is i want to be able to come over here and put an h1 which is going to say something like about us and i want to make i want to write a paragraph which would be kind of like a statement um for the business for the restaurant just give a little backstory to uh to like um what the the the what the restaurant is about um when you get started all the kind of stuff that restaurants usually have and this is a good place to to put that information i'm just going to copy a huge paragraph to use an example and paste it over here so as you can see we just pasted this paragraph and i think it should be okay um you'll see that it will appear over here but obviously we need to add some styling and this is kind of basically it for all the the actual um like jsx and javascript you want to add now we just have to add a css file to our styles folder so let's just come over here and create the about dot css and just paste all the css to this let's actually just import here at the top on this file so two slashes um let's go to the styles and to the about.css and let's just paste all the css into this file so as you can see um when we paste all the css and we save it um you can see that over here it should have our beautiful about us page with this text over here which looks good um obviously this means nothing this is just a lorem ipsum um text uh but you can put like a a beautiful like restaurant statement over here and it should be fine now we're going to go over to probably one of the the second most important page in my opinion in this website which is the contact page because using forms and using inputs in react is really good it's really it's something one of the most important parts it's not going to be functional so we won't be able to send emails with this contact page however the appearance of it will work perfectly you'll be able to write stuff just that to to send emails you'll need a back-end for example so or you need to make an api call to some sort of service so we're not going to be dealing with that uh we're just going to be showing you guys how to build this in react so first things first let's just close this over here and create a new page which is our last page it's going to be the contact.js let's do some rfce and let's just add the class name for this div so let's just come over here and say class name and call this contact and then over here inside we want to divide this page into two parts if you remember in the beginning of the video where i showed the website we want to have a picture of a pizza over here on the left and the contact form on the right so to do that i like to divide our page into two divs um the la one will be called left side and the other will be called right side so let's give a class name left side and let's give it a class name over here for right side like this right side and now the left side will have a picture as a background image so we want to add the background image similar to what we've been doing through the other ones so i'm just going to copy the same style tag that with property that we've been using and i'm just gonna paste it over here however the picture that we're gonna be using um it's probably the pizza left this one over here so let's just import it uh pizza left from um two slashes then we go to assets uh accidentally went to the wrong one assets slash pizza left and there is a a gpg so gpg let's just save this and put pizza left over here right now you i don't think you'll be able to see anything yeah you won't be able to see anything and also we the reason why we can't see anything is because we actually need to define this route in the app.js which is the final rail we're going to be defining so this is awesome i'll just paste it over here and just put the contact um route and just put a contact um component over here press enter and it will automatically import our component um so now that we have this done you can see when we go to contact it should be over here but obviously we didn't add anything to our contact page like if i wanted i could have just put some text over here and it should actually put something as you can see right but for now let's just leave it like this and not worry that much about this so what we want to do is we want to add a form to our application so the form we want to add is very simple we want to put it in the right side of our app of our div and we want to have at the top and h1 will accidentally open this sorry we're going to have an h1 saying something like contact us and then instead of it we want to add a form tag so form tags are pretty simple and very um commonly react but also very standard in regards to comparing it to when you're creating a normal application in html without using react you just create a form tag you give an id such as i don't know contact form um you give it a method if you want to uh like let's make it a method like a post method um and then instead of here you put all the inputs and labels regarding are related to this form so we'll put the first label which will say something like full name so you want to put your full name and let's just put 4 over here and you can see that actually when you put four which is something very commonly used in in forms in html nothing appears the reason for that is because if you want to uh basically have an input over here at the bottom and this input will be related to uh this label is to to make it so that they are connected you have to use a property called html4 uh html4 this is different from what normal html has but it basically does the same thing we just put over here basically the name of the input so this will be for the input with the name name so we'll just come over here past something like an id if we want to or let's let's just pass a name and call it name like this we also want to put a placeholder so let's just paste a placeholder it says something like enter full name and then we want to add uh some sort of like type so this will be of type text right and this should be it uh for the labels so we'll just copy this and paste it for how many uh inputs and labels we want to have in our application we're only gonna have uh one more input which will be the the the input for email so we wanna definitely ask the people to put an email uh if they want to contact us so i'll just put over here email and let's do something like email the placeholder will be email like this and then what we want is we want to change this to type email which is a type in html and finally we want to add another label but this will have actually a text area which will be where we write our actual message so i'll say something here such as i don't know message or yeah whatever you want to write and we can put something like message over here and finally at the bottom was let's just put a a text area so text area one thing that you guys probably noticed is that um we have to self enclose inputs this is something we have to do um in react we usually don't do this in html but we have to do this in react but for the text area you don't actually have to do this you just have it so that it has an open tag and a closing tag like this and inside of here we we don't put anything but we put some properties to the text area for example i just wanted to have six rows this is something that i like to do with text areas um i want gonna put a placeholder which is gonna be something like uh enter message and then i'm gonna put a name and the name will be uh the message name that we put over here and i wanna make this required probably so i'm just going to put the property required and that's basically it for all of our inputs the only thing we need left is the button so i'll just add the button here at the bottom it's going to be something like send message and uh we can make this of type submit like this and now if we look at our page you can see we have all of our inputs over here but again they look horrible we have to add some css to make them look good so let's do that right now um the css we're going to add is pretty simple i'll have to create a new file over here which is going to be the contact dot css and let's just import it here at the top so i'm going to say import two slashes uh styles slash contact dot css and i'll paste the css and i'll be back in a second and as you can see i just pasted the css um i worked on the css on my own want to check it out it's in the description and as you can see it made a lot of changes into the application putting css makes your website look a lot better i think it looks nice this is a cool contact page the button seems a little bit weird i'm actually going to fix this right now before i submit the code i don't know why it looks like this actually i'll just try it out in a second okay so i just pasted the css as you can see over here and if we go to our page you can see that there are many changes that were made just by that css code that we just put um the form looks a lot better you can definitely edit this form to make it so that it looks however you want but this is kind of the idea this is the contact page and we have here a button at the bottom which you can add functionality to send um some sort of email or some sort of request whenever someone enters a message over here but again we're not going to do this in this tutorial so this is actually basically it right we have our whole website over here we have this image which is on our home page we have the menu which is showing a lot of skills that um you need to know and react such as mapping through lists and displaying items rendering components using props all that kind of stuff and we also have here our about page which is pretty simple but at the same time i think it looks nice and i think it it reminds you of a real website and we have your a contact page which i like this contact style i always do it like this and we have a beautiful pizza here at the left so this is basically it for this tutorial i'm pretty sure that this tutorial is extremely long but it's because when you're building when you're trying to teach how to build a full website you have to go through some boring stuff like the fact that i had to create pages like five different times create css files like a lot of times and just import stuff repetitively but i know that if you're a beginner you probably want to see those repetitive stuff because it helps ingrain them like in your brain so that you will start understanding and getting stuff faster so that's why i made this video if you're interested in the css take a look in the description all the code is going to be there i didn't want to show the css and i kind of feel bad just copy and pasting the css that i've made previously before the video but at the same time um the video would be five hours long if i had spent time using css to make this or like actually showing you guys all the css changes that i'm making so that's basically it enjoyed the video please like down below and comment what you want to see next subscribe because i post three times a week i'm putting a lot of effort into the channel and i would massively appreciate you guys if you guys could do that shout out to my roommate colleen who helped me build a website we built this together over at night we just wanted to have some fun and i decided to use this for a video so shout out to him for helping me and yeah that's basically it really hope you guys enjoyed it and i see you guys next time [Music] you

Channel: PedroTech

Views: 10,947

Rating: 4.9840002 out of 5

Keywords: css, javascript, learn reactjs, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, react js crash course, react js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react website tutorial, react website portfolio, react responsive website, react responsive navbar, react navbar, react website tutorial for beginners, learn react, react crash course, react js tutorial, Brian Design

Id: QwarZBtFoFA

Length: 86min 57sec (5217 seconds)

Published: Wed May 26 2021