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

[@FerDiazdeLeon]

Man this is by far the best tutorial for beginners I've seen, you went directly to the point, simple explanation, practical and good looking site. Thanks for the video.

[@thehyperart11]

Thank you for the appreciation!

[@luisledesma4586]

Awesome! I've tried following 3 tutorials with no luck until this one, keep it on!

[@thehyperart11]

Glad you liked!

[@ЖеняЗаневский-ф7с]

Man! Thank you so much for this video))) I just started learning React. I've read documentation on React and then I made this project. THANK YOU SO MUCH

[@thehyperart11]

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

[@emranentertainment7]

pls remove background music . its a disturb

[@ademgokce3136]

I do not know how to support your creativiness. You are really really good! Keep creating more content please. you have that skill! Thanks!!!

[@2Cheeze]

Thanks for sharing the project it was helpful. I would of liked to see how the css was syled along side the project but maybe in the next one. keep the tutorials coming

[@thehyperart11]

Glad you liked!

[@donbigosso]

I am half way through. Very nice video. The only thing is missing in my opinion is the explanation, why some lines and files are not needed (and deleted)... But it's a detail. Well done.

[@thehyperart11]

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.

[@donbigosso]

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

[@thehyperart11]

@@donbigosso You're Welcome!

[@hitmanop4078]

Is the website responsive?

[@thehyperart11]

@@hitmanop4078 Yes it is!

[@johnmeyer1197]

Really good tutorial, thank you so much. I'm building a website for a personal project and this has been an awesome tutorial to just get the basics.

[@SanjeeviniSurendran]

Amazinggg video, you made it so simple and clear for me, thanks!!

[@stillpickinganame5350]

Thank you so much for this tutorial sir, it was very clear and easy to follow! Please keep making react videos! Greetings!

[@thehyperart11]

You're welcome!

[@anniamatthews6803]

Thank you so much for this tutorial! This helped me so much

[@Haxel0rd]

Great tutorial! Design of the landing page is also nice

[@salmalk1550]

Thank you so much for the tutorial. It really helped me.

[@kamalprajapati8880]

Nice tutorial dear..❤ Thank you

[@vedatsozen]

Thanks. İ think i can make landing pages with React by learning how to do with this video

[@ashirbadsrichandan7492]

this is awesome 🤩 just do more projects ....

[@nilayzcreativeartisticpage2053]

Thank you so much. its really helping

[@Nunu-gp8ir]

11:21 13:00 14:20 15:46 18:00 21:01 25:01 27:31 29:11

[@amandabarata9573]

Amazing tutorial, tks so much!

[@toluwaniayodele4776]

Thank you very much it helped me

[@muhammadshahid09]

bhai best yar love from Pakistan please more videos

[@thehyperart11]

Sure!!

[@youhavetodoit9070]

Thank You So Much :)

[@thehyperart11]

You're Welcome!

[@harksMush]

well explained bro,Thanks

[@Story_Entertain_you]

awesome work bro tnx a lot. a little doubt after rafac you do one shortcut to rearrange... what is it?

[@AnugrahM]

Please do more content like this

[@thehyperart11]

Sure!!

[@thanushaudara3730]

Thank u very much ❤

[@aishakabir]

I love the tutorial. thank u. But i try using the cntrl + K + N to convert the js file to react, but it didn't work, what can be the problem?

[@abishek3657]

U should try ctrl+K and M

[@Blinknone]

Very nice! Thanks!

[@thehyperart11]

You're Welcome!

[@anastasiyaa124]

Thank you 🙏!

[@ishadii]

Thank you so much bro

[@j0llytimes135]

Put vidoes on making figma designs. I helps us to get job in some companies too.

[@Cleverr]

great tutorial , but how the contact section should work ?

[@muhammadshahid09]

Good Job love from Pakistan , Faisalabad react mai aur banado ap tutorial's

[@thehyperart11]

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

[@yj2380]

Thanks for your video! I just wanted to know when we click the menu in navbar if the the page move to the part that I clicked!

[@Mu3a4Mustafa]

Is it ok to follow this guide while its my first time ever to use JS?

[@stanakkermans2983]

Great video!!

[@franciskp9117]

Hey man at 14:11, there are some anchor tags with empty href. How did you get away with empty hrefs ? I'm getting this error " Cannot read properties of null (reading 'useContext')"

[@charlesegbe546]

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

[@Kennisjohnabasidoh]

i love this

[@CodewithIk1177]

Brother I used your way and I write the npx create-react-app so the npx was not install in my laptop

[@jacktency948]

Thanks a lot sir

[@mimicc123123]

Excellent tutorial! You are really good. Please make more tutorials. Maybe some react with API.

[@HeeraYr]

actually it run only after recovering the reportvitals and index.css

[@Rob-J-BJJ]

good video just one question, I want the nav bar to work, how do I get it to when we click the menu in navbar if the the page move to the part that I clicked!

[@naimabelchiti7405]

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

[@Rob-J-BJJ]

it does work @@naimabelchiti7405

[@juniorandrade1990]

Good morning, I can't open the project in my browser, it keeps giving an error on the narbav logo page. It says it doesn't exist, could you help me?

[@thehyperart11]

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

[@abhinavsaxena8290]

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

[@HamzaJavedhj]

you didnt mention the purpose of different imports of each components

[@bismamughal5048]

Hi brother, I’m facing a problem whenever i try to minimise my tab the menu and logo doesn’t responsive “ justify-content: “space between” “ doesn’t working

[@bismamughal5048]

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

Very nice design and tutorial. Is it possible to add animation to another video? Thank you

[@thehyperart11]

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

[@thehyperart11]

@ 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.

[@Nanashi-rq7lk]

Good tutorial!!!

[@thehyperart11]

Thank you Nanashi!

[@CherietFaycel]

very beginner friendly :)

[@Idan_naduf]

Hi, when i try to do the key combination Ctrl K + Ctrl N to convert javascriptreact isn't working . how can help me please?

[@thehyperart11]

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

[@Idan_naduf]

TNX!!@@thehyperart11

[@BusinessChamp-p8d]

@@thehyperart11 NOT WORKING , SAME ISSUE

[@Rihcterwilker]

i tried installing react-icons and Mui, but got an error: etimedout for both.

[@aktarhussain97]

may I know why you are deleting files and lines in the starting

[@arpanmascarenhas1048]

for our project, we have to add some level of backend to this. For example, we need to make a contact us page where the entered details are just stored in database. Can you suggest how to do this?

[@beinspired-themotivational7709]

use php and sql

[@huudeveloper]

Very usefull ^^

[@ostenwiecenjap6544]

Thank you, is there any way for me to link a LINK to the item in the side menu? I would like to know if it is possibly

[@BrainFlex-y8u]

good work

[@thehyperart11]

Thanks Gray!

[@SatyendraSingh-yf9cz]

I am not able to download or copy the assets can you help to download the assets file. Please help me to download the assets

[@crafttechindia]

bro we want more react js projects

[@nirvana903]

Thanks a lot

[@99ine.]

is this also responsive to mobile devices?

[@thehyperart11]

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

[@99ine.]

@@thehyperart11 thanks man!

[@thehyperart11]

@@99ine. You're welcome!

[@amintwithmani]

why select language mode is not opening in my VSC

[@pratikshamangrulkar70]

hey i closed the tabs and my pc got restart for some reason how to go back and reopen all of this

[@thehyperart11]

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

[@pratikshamangrulkar70]

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

[@thehyperart11]

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

[@pratikshamangrulkar70]

@@thehyperart11 oky thank you so much

[@thehyperart11]

@@pratikshamangrulkar70 You're welcome!

[@Jegan_Eng]

Thank you

[@CharleneGriffin-k2n]

cool video)

[@hitmanop4078]

Hello bro I have a request from you See i got a blood bank website project and there is no recourse to be found on YT All the blood banks project are like old bashed on php and stuff We need a modern mern stack blood bank website can you do it ?

[@thehyperart11]

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!

[@hitmanop4078]

@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

[@YashMatade-jg7jw]

where is the navigation brother????????

[@peterombui1009]

which software did you use for the design?

[@thehyperart11]

Figma

[@surajdhungana407]

add dropdown menu also in drawer

[@thehyperart11]

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

[@divyanshnigam5916]

kindly make more projects

[@PlayTv713]

Any Idea what to do with this error 'List' is not defined.eslintreact/jsx-no-undef

[@2Cheeze]

@joshua wells did u find a solution?

[@PlayTv713]

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

[@PlayTv713]

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

[@zelle2841]

hopefully, I get a response. why is the navigate just appending the page and not redirecting it? redirect works on my other sites. P.S. Nice tutorial by the way

[@thehyperart11]

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.

[@thehyperart11]

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

[@zelle2841]

@@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.

[@thehyperart11]

@@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 KZbin that can help you understand simple concepts of 'react-router-dom'. I wish you all the very best!

[@zelle2841]

@@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!!!

[@natureisbeautiful4486]

interesting brother but background music is irritating

[@rangerblekuk]

Bro, i cant catch up ur link

[@thehyperart11]

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

[@abhinav_mishra_2003]

Great Content

[@thehyperart11]

Thanks Bhai!!

[@augischadiegils.5109]

nice

[@thehyperart11]

Thanks!!

[@sandipadhikari8872]

I am facing some issues while importing the Background images in the About section.

[@thehyperart11]

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!

[@i_ujjwaljha]

18:00

[@supriyajadhav9080]

Make it Responsive

[@dlafle3]

why are your file .js and not .jsx

[@BrianKarmo]

why do you suggest the reem kufi font is this targeted towards pakistanis?

[@thehyperart11]

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

[@naimabelchiti7405]

can i have source code ur link to ur git not working

[@thehyperart11]

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

[@basictears]

why the music , i can barely hear you

[@syahidprabowo2179]

How to do 3:05 ?

[@thehyperart11]

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

[@TheDailyProphet789]

ctrl k+m not working

[@iamnikitamallya]

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

[@razzaqWeb98]

Upload react lecture

[@brown_eyezg7856]

encountering errors in css. anyone else experiencing?

[@alok2428]

@thehyperart If a video teaches how to create a hero section and covers all the necessary details, then it can be productive. However, if it only focuses on writing syntax, CSS class names, and webpage content, the video becomes a waste of time and doesn't contribute effectively

[@parasuramancse4076]

Where is the Css code bro

[@afaqahmad8918]

Your theme name plz?

[@thehyperart11]

What theme are you talking about Afaq?

[@afaqahmad8918]

@@thehyperart11 sir vd code theme and extensions

[@thehyperart11]

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

[@afaqahmad8918]

@@thehyperart11 thank you ❤️ sir

[@thehyperart11]

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

[@Simply-Sahil]

🥂

[@abeerafazal6700]

nai kam ki abhai 13:38 pr aakar ruk gya

[@nsvlog2510]

If you are providing such course content . Then First stop this background music. its draining

[@ShubhamKumar-kb5jj]

Pura video bas import karte project bana diya 😂😂

[@VaibhavTalks]

remove the background music , really its irritating

[@thehyperart11]

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

[@anupkaushik9370]

Do you call this landing page its just a hero banner 😂