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

Thank you for the appreciation!

Glad you liked!

Glad You Liked!! I'm building another project to clone ChatGPT. Stay Tuned!

Glad you liked! We deleted those files becuase we don't need them in this particular project. Allow me to explain a few of them: public(folder) 1. manifest.json - It’s used to define our app, mostly contains metadata. 2. robots.txt - Defines rules for crawlers and scrapers for accessing your app. src(folder) 1. App.test.js - A very basic test(for the default app) is defined in this file which can be replace by our own tests. 2. serviceWorker.js - Service worker for pre-caching the scripts files of our react app thereby improving performance. 3. setupTests.js - As the name suggest this files setups tests and runs them. This file in directly invoked when we run tests from cli(npm run test). Since our project is relatively simple and we are not running any tests nor we have any performance concerns, we can delete these files. They will be useful when we create more complicated projects. More Info - medium.com/@abesingh1/create-react-app-files-folders-structure-explained-df24770f8562 Thank You. Let me know if you have any queries.

@@thehyperart11 you are great! Thanks for the detailed explanation.

@@donbigosso You're Welcome!

Is the website responsive?

@@hitmanop4078 Yes it is!

You're welcome!

Glad you liked!

Sure!!

U should try ctrl+K and M

You're Welcome!

Yes! I'm doing more cool web3 and web2 projects on this channel in React.

You're Welcome!

Sure Suraj! I'll do this in the next tutorial.

Good morning, Have you cloned the project from github or trying to open after installing react?

​@@thehyperart11 same issue , do we have to download react for this?

One more thing i use your code . In App.css theres a classname “nav” and in Navbar.js class name is “nav-logo-container” i changed the “nav” to “ nav-logo container “ then it alligns properly but still the space between issue is there

I'm getting this same exact error too.Please who can help us out

@joshua wells did u find a solution?

@@2Cheeze I have not found yet you had any luck?

@@2Cheeze use this import statement import List from "@mui/material/List";

where did u find the source code the link of git does'nt work

it does work @@naimabelchiti7405

use php and sql

Thank you Nanashi!

Here's the link - github.com/thehyperart11/Restaurant-Landing-Page-Tutorial

You need to first hit Ctrl + K, then release Ctrl and then press 'M'. Let me know if it works!

TNX!!@@thehyperart11

@@thehyperart11 NOT WORKING , SAME ISSUE

Thanks Gray!

Hey Sandip, Please make sure you have correct file name and correct file path. This could likely be the issue. If you're still facing problems let me know. Thank You!

Yes it is responsive. You can have look at the deployed link here - the-hyper-art-tutorials-react.web.app/

@@thehyperart11 thanks man!

@@99ine. You're welcome!

You can run 'npm start' command from the terminal of vs code after opening the root folder of the project.

​@@thehyperart11 Will everything be the same as it was before restarting?

@@pratikshamangrulkar70 Yes things will be same, unless you have made changes in the code.

@@thehyperart11 oky thank you so much

@@pratikshamangrulkar70 You're welcome!

I would love to contribute! Can you give me more information regarding the functionalities and stuff? If possible do suggest a relative website too. Looks exciting to build this project. Thanks!

@The Hype Art : I'm not sure you got my comments or not cause the comments are not visible here Do know me if u got the comments

Hey, If I had built other pages as well, the tutorial would have been too long. One very simple thing you can do is: You can use this library called - "react-scroll" to have the webpage scrolled to respective sections when you click on navbar links.

Do let me know if you have any problems implementing this. Thank You.

@@thehyperart11 i didn't use "react-scroll" to navigate to another section of the page. I just used href="#here" something like this. my main problem is that it does not go to a different page. useNavigate just appends the page I'm about to go to at the bottom of the footer. Thank you for replying. I'm quite new to react.

@@zelle2841 Hey, I didn't want to make this tutorial much complicated which is why I didn't create routes to different pages. But we'll be doing this in our upcoming projects. If you want to navigate to different pages. You can use "react-router-dom". I suggest you having a look at this documentation - reactrouter.com/en/main/start/tutorial Or you can give this prompt to ChatGPT - "give a simple example of how you can create a route to a different page in react". It will explain you how to setup things. Lastly, navigating between different pages in react is an important concept. It's good to see you keen toward learning this. There are a couple of tutorials out there on RU-vid that can help you understand simple concepts of 'react-router-dom'. I wish you all the very best!

@@thehyperart11 thank you so much! This is the first time I came across the link you posted. When I searched about "react-router-dom" i sometimes get redirected to "404 page"! the output of my navigation weird. hahaha been exploring for days on more in dept knowledge about routing! 😍🤩 Thanks much!!!

The font looked good that's why I've used it. It was never the intention to Target any country.

Here's the link - github.com/thehyperart11/Restaurant-Landing-Page-Tutorial

Thanks!!

You may have to install ES7+ React/Redux/React-Native snippets extension in the VS code editor. Then the command works.

There is a link in the description to the github repo.

What theme are you talking about Afaq?

@@thehyperart11 sir vd code theme and extensions

@@afaqahmad8918 It's called the 'Seti' theme. You can get it by pasting the id in extension search bar - @id:vscode.vscode-theme-seti

@@thehyperart11 thank you ❤️ sir

@@afaqahmad8918 You're Welcome! Please do subscribe if you like the video!

Thanks Bhai!!

Sure! Thanks for the advice. Will definitely try to improve!

Sure!!

Figma

Yes it is possible. What kind of animations do you want to be added?

@@thehyperart11 Scroll animations Framer motion + React + Vite for beginner. Thank you

@ Got it my friend! I recently created a demo project that includes everything you mentioned - archamerica-demo.netlify.app/ Will try my best to upload a tutorial on this in future.