Landing Page Tutorial React Js | How To Build A Simple Landing Page In React?

hello everyone today we are going to be building this particular simple looking restaurant landing page in react and the code will be very very simple and I'll try to explain in each and every simple step I'll attach a link to the figma file in the description so you can get these assets or these images so that we can use in this project later on I will also attach a link to this particular GitHub repository so in case if you want to clone it you can just simply download the code and hit npm start and run it but we will be building it from scratch foreign Ty folder and I'll open this folder in Visual Studio code you can absolutely use any of the code editor you want I'm using just I'm just using visual studio code here and let's open up this terminal click on this terminal button and click on new terminal and write npx npx create slash foreign so now the initial project setup is ready let's clear this up and hit npm start what this will do is this will open up this particular project in our browser so here you can see some initial loading done by react but we have to now do is we have to clear up these particular files let's go let's go into index.js and remove these lines line number five and these lines as well also you can delete this file uh report by vitals and it also delete this file called setup test dot JS we don't need this these files we will also delete the logo and we will keep the index and we'll also delete the app.test.js file and yeah I think I think this will work fine also we need to delete the index.css file we don't need that let's just clear this up delete everything from app.css file and we need to remove this line as well so let's remove this go to app.js logo is not available anymore so we will remove the line okay and we will also clear this up just in order to test let's write a simple hello and check okay so this is working uh let's go back to our GitHub repository uh you can go into this Source folder and then in this particular app.css what we need to do is just copy the code and paste it here in the app.css file I have already compiled all the CSS for you so that we just need to focus on the component structure I think this will help you a lot so let's go back and see okay so the app.css is working now we need to add some font so go to Google phones and search in ring Goofy so this is the name of phone you go down here and select actually select these styles and copy the HTML for it just click on this button and come back to your public folder into the index.html and you can paste it here we can remove these these lines this one as well and we can change the name from react app to press drawing landing page you can name It Whatever whatever you like I will I will also remove these commented lines as well so we don't need these logos let's grade them okay I think it's fine let's refresh this okay so the font has been applied now what we need to do is simply create a folder named components and in this particular folder we will create all our components for example this home component this about component and these components as well so basically what we are doing is we are we are dividing our project our page into a lot of different smaller components so that it makes it easier for us to understand the code at parent level and render it better uh let's go to code and in the components folder let's create a file called home.js.js and what you can do is Click on your keyboard hit Ctrl K and then hit m and then type in react so what this does is it enables the react intelligence so it will be a lot easier for you to code with it just type in rafce this will create a arrow function component in case this particular shortcut is not working for you then you what you need to do is you need to install this particular Library react es7 you know Redux react native Snippets you can install this and I hope and I hope it will work let's go back to code what we need to do is now we can also create a new file called never dot JS and do the same control key then M then type in react and then hit enter and then we can say rafc and we can import this name for import and we can render this never in our home component so let's just paste it here and give this div a class name of home container let's go to app.js Let's import home component and simply render the home component down here [Music] now let's go to our nav file.js file and we need to get this particular uh we need to get this particular assets assets folder so what you can do is you can clone the project and get the assets folder I actually already have this on my computer so I'll just copy paste but you can absolutely clone it from there I don't think it will cause any problem or what I will do is I will attach a link to this access folder and directly in the description you can go and download that directly uh let's go back to our code we need to import our logo now what we need to do is we need to actually install a few of libraries so the first Library we need to install is called react icons you can simply write it down and this will take you to the website so just copy this particular code and paste it in the terminal and hit enter the second Library we need to import is mui.com so click on get started click on installation and you will get the code so copy and then paste and hit enter also we need to import we need to install this package npm install this one for icons so just copy and paste and I think they are installed so the packages are now installed let's close this terminal let's import a few of things that we need foreign [Music] [Music] [Music] foreign so now we are done with our inputs so now let's create a few variables uh we will name the first variable as open menu this will be used in order to make sure that the network is responsible in uh which smaller devices as well so set open set open menu and initialize this open menu variable to be false let's create another another variable for our menu options foreign [Music] let's start building uh the HTML structure for our Network we will name the what we will do is we will replace this tip with nav and this one also with the name and inside of this now we will create a div foreign like a slider somewhat like a slider that will slide down from the right part of Mobile screen when viewed this website on smaller devices so let's let's just do it I'll open this side by side and I'll let you know what I'm doing here foreign [Music] foreign let's go back to our home.js file and we need to add the structure of our home component so let's get started before we actually write down the jsx of our home component we need to import a few things so let's import the banner images and the images we need to in order to complete the home component [Music] now that we have completed the import statements now let's move forward with our jsx thank you [Music] in case of our heading we can simply go here and copy the text and paste it here [Music] same for the paragraph as well this just come down here copy the text and paste it in here foreign [Music] let's go back to app.js or simply let's go back to now components and create a new folder called about.js simply hit Ctrl km then react then enter Then rafce to generate the snippet of code we need and let's get we need to import a few things before we get started so import we need to input actually the background and about image and a icon as well so let's do it [Music] foreign [Music] about section so we'll start with assigning the class names and copying the content from figma file and then pasting it in here so let's do it [Music] foreign foreign [Music] and render it here so it's working fine actually let's move to another component the next one we have is a work section so let's create a file for work.js and rafc with Ctrl k m Ctrl km then react so first of all let's import few of the things that we need to Import in order to get this work page and look correct according to our design so let's import all those images foreign [Music] foreign s so now let's start building the structure let's start with giving this parent div with a class name of our instruction and wrapper and give class name would be work section and top and we need to enter subheading actually [Music] foreign what we need to do is now is let's import the work page in our app.css file and render it here okay so it is it is rendering but we have a problem right here this this needs to be more bold so what we can do is we can go back to our work page and remove the subheading to make it just ready and it's fine now so the work page is done and now we need to move on to our next component and and our next component is the the testimonial section so let's create a new file called testimonials foreign we just need to import a image and and star icon in this particular page so let's do it so these were the only Imports in this particular file now we need we will be moving forward to our HTML and we will assign the class names so let's do it [Music] foreign [Music] foreign page and render it down below the work section [Music] yeah it's working fine so yeah it's working fine but we need to change the color of these Stars let's go back to the testimonial section and we need to just add an S here yeah so it's now perfect the next component we have is the is this particular contact Section let's go ahead and build this for this we need to make a new file in component folder just name this as contact.js then type in rafce uh you can do Ctrl M Ctrl Ctrl k m and then react uh for this particular page we don't need to import anything we can simply start writing our GSX right down here let's give it a class name of contact page wrapper foreign [Music] so the contact page was pretty much straightforward now we need to do the same with contact page let's import the contact page and paste it below testimonials [Music] uh yeah it's coming up and it's working fine [Music] the next component we have is our last component which is footer which is footer this particular section let's go ahead in components folder and create a folder create a file named footer.js rfce save and then Ctrl k m and then react to enable react intellisense for the footer we need to import a few things so let's import our logo and several icons [Music] so we are done with our Imports now let's start writing the jsx in order to make the footer look good foreign [Music] [Music] so I think we are done with our footer section now let's simply import the footer render it down uh down the contact Section I think it should work fine okay it's not coming up so we need to check the issue okay it's coming up so yeah it's working fine and I think this is complete now so yeah this is actually working fine in the mobile devices as well as you can see it's completely responsive I hope you really like the video please do let me know if you have any confusion or any problems related to this one and also do suggest me what videos should I post on this channel related to coding uh in the field of react uh maybe in web free development or web 2 development as well so I would really appreciate your contribution

Channel: The Hyper Art

Views: 136,635

Keywords: react js, react website, react website tutorial, how to build a landing page, react js tutorial, restaurant landing page, simple landing page, react developer, landing page tutorial, design to code website, design to code react, how to convert ui design to code

Id: GVjIflROwJ4

Length: 32min 9sec (1929 seconds)

Published: Wed Jan 04 2023