React Website Tutorial From Scratch - Responsive React Js 18 & React Router 6 Project Tutorial

[@blackopss017]

This is what a production-grade project looks like. I learned so many things from your design pattern of the webpage. ✅ Day 1: 1:01:54 ✅ Day 2: 3:15:13 ✅ Day 3: 4:23:00 Finally Completed the project🎉🎉

[@olurotimiwilliams]

Your workflow is better than most if not all I've seen, and you're very meticulous. Thank you for this video. One plate of jollof rice for you!

[@d3fuzatorul]

Thank you for taking in consideration my suggestion to do some more React based Projects! This kind of projects are very useful for people that are trying to learn more about Front-End. Thanks again and keep it up!!

[@bilalarain4632]

this man speaks the language of gods

[@TravisKowalenko]

This is my second react project i've done through your tutorials and I am blown away with your work flow. Thank you for your efforts and being along on the journey with us who are students!

[@josecardons6221]

I wanted to take a moment to express my sincere thanks for creating such a fantastic video tutorial. Your expertise and attention to detail really shone through in every step of the tutorial, making it incredibly easy to follow and understand. Thanks to your hard work and dedication, I was able to learn in no time at all. I truly appreciate the effort you put into creating this tutorial, and I know that I will be able to apply what I learned in my future projects. Once again, thank you so much for sharing your knowledge and expertise with the world. Your tutorial has made a real difference in my life, and I'm sure many others feel the same way. Best regards

[@mikenorthwood7160]

Thanks a lot for the video, it helped me learn many new things. Just a few notes: *under 1080px and over 1024px the page breaks because of the footer *you can take advantage of using 'auto-fit in CSS grid, it will make responsiveness easier to implement

[@Ed-xy2jf]

I didn't even started the video yet, but I wanna thank you for this project. Your work have been a great way to study these technologies. Thank you!!!

[@KiKEEkikee]

I followed from the beginning until the end; it is straightforward; thank you! I really gain valuable knowledge!

[@MGdriver77]

Thank you Egator. You're a beast. It took me a few days to get through this. But I'm proud to say it followed it end to end (I did use AWS amplify to deploy it). I needed this to create react js skills within myself. I had a job interview last week. Ultimately they said no. I know it was because my react skills were low. But I promised my self, that will never happen again. I will be ready for whenever the next react interview is. I really appreciate you taking the time to make this. I learned a great deal. I'm going to go through more of your tutorials! Subscribed!

[@poisedhoneii5524]

I really love your teaching style! Can you please create a video on how to attach a full stack live demo to a portfolio? Like if you click on "Live Demo" it takes you to a new page built with react and python or any language? I'm not sure how to create multiple pages to show the projects I worked on.

[@thewebspatialist]

I am just about to start the tutorial...from your previous tutorial, I have appreciated your teaching style. Thank you.

[@piuspolocha]

I will be very glad of you create a website that have admin and user dashboard at the same time which less routes on the website Thanks you the best so far

[@konradhylton]

FYI, Swiper which is used in the testimonials section has some bad docs and didn't mention that they changed how to import when it changed versions. If you're having trouble use the code below import { Pagination } from 'swiper' import { Swiper, SwiperSlide } from 'swiper/react/swiper-react' import 'swiper/swiper.min.css' import 'swiper/modules/pagination/pagination.min.css'

[@virajghadge6916]

Thank you EGATOR ❤️ always learning from you and your design concepts also help me improve my designs!

[@KwameGyanko]

Blessings to you country brother. Now starting on my coding journey

[@mkwaliyo]

Your tuts are just very straight forward.

[@Dragulamp3]

Maravilloso tutorial. La verdad que me ha motivado a crear mis propios proyectos, muchas gracias. Veré de conseguir los cursos en Udemy de ser posible Saludos

[@Rihanshorts9716]

Your teaching style next level thankyou

[@udayan285]

Love this tutorial. This tutorial is very helpful for us.

[@tapantorbangla]

Thanks for your tutorial. It helps me a lot to understand grid concept and color variable..

[@awaisrajput9921]

Amazing brother u don't know how much this video help's beginners 💕💕

[@MightyKingKala]

Looks amazing bro!

[@thankgodobuah8326]

Boss your designs are outstanding. I really need a mentor like you boss

[@isaacmobe]

Thanks bro, I always learn from you👊🏽

[@thisismyplaylist]

I had to learn this new version of react because my boss wanted that i learned this new shit , I would say this new version has new interesting stuff.

[@msalameh01]

excellent project and explanations, Many thanks

[@oluwaseunajibowo7422]

Thanks for this tutorial with Great explaination, may God bless you,keep it up please😊

[@ruthadenike3548]

You are the best PAPI pls we need Django CRUD and python tutorial plssssssss

[@creativestudios1207]

Loved everything about this project learnt a lot. For dynamic importing in gallery where we used require is no longer supported which is the other way it can be done. I had to import all images and add all of them in the images dictionary? Thank you very much for this tutorial

[@siainguyen1046]

Awesome bro, video is great

[@Thewealth_Dev]

Thank you bro, pls I love your color mixture ... how can I get colors for my personal project, I’m a self thought developer. I will be glad if you help... smile, have always been glad thanks again for all you do.

[@itsnaivasages]

19:00 " ...so we come back to our app and we have a biiiig error. Beautiful" 🤣

[@numericalwallah9174]

You did it man

[@CodeModeOn7]

1:09:54 isNavShowing line shows me error i don't know why i write the same thing please solve my problem

[@noahoshana3175]

Were you able to figure this out? I was looking at this and don't understand how that syntax would compile

[@jabbarmk]

Did u fixed that?? i am getting same error @

[@akinfabunmi8186]

VAWULENCE 😄. Great Job👍

[@riturajsingh7706]

Hello sir can please tell how you prepared that data.js file I mean content inside that you wrote manually or something else?

[@hagerahmed1694]

Really thank you very much keep it up😊👍

[@FatihŞahin-f2f]

Before creating the app, make sure the directory you are in, doesn't have CAPITAL letters.

[@Islamic_channel9]

❤️ More videos on projects plz

[@encounter7883]

Nice Job bro👍

[@blessingsunday5272]

Sincerely you are the best

[@EGATORTUTORIALS]

Thanks Blessing

[@KeLairenjam]

you are great and going to be the great all the time. thank you.

[@EGATORTUTORIALS]

Thanks Ke

[@JoaoRocha-on8ds]

Hello Egator, Navlink for Home is always active, other links are OK. Why is Home always active and can I correct this?

[@jac0392]

If the end prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched. ...

[@chunhauee5064]

downgrade react-router-dom version to 6.3.0 will solve the issue

[@DeveloperAttic]

Cool video. Maybe try to add back-end development with it

[@ItsMeAnanda]

Hey Brother Thanks for making this tutorial. We want also please develop a admin panel :) Support from Nepal.

[@jayantaghosh4813]

when styling the Programs component inside the home page in the programs__program class a tag is not taking the styling!!! can you please help me?

[@mahamaslam1533]

Where did the data.js file came from? Are we supposed to make arrays before in it?

[@NYUMBANISASA-bu5xf]

Hello there my Brother, thank you very much for your videos, they are very helpful. On this one, why do I get the data.js to link the navbar? Please assist

[@totorocsithailand6764]

Can you teach me how to write a Pos program and sell a product for 1 clip? Thank you.

[@marcelobc2230]

Thanks Egator

[@fumalyson]

Can u do more videos with nodejs + react? connection with databases, routes, serverside... ur job is awesome, thank u

[@EGATORTUTORIALS]

Sure

[@TechieEmma]

yea that's a good one

[@EslamMagdy-ur2zd]

please i have a problem ,when i make children in card component , and pass the code from programs component to the children , it does not appear , i dont know why , can someone help me ?

[@abhijitmanna4524]

actually i need a help after putting in main-header height as calc(100vh - 3rem ) my site breaks any sol ?

[@ГарикЕгиян-ъ4е]

THANK YOU !!!!!!!!!!!!!!!!!!!!!!!

[@УлугбекУраков-ы7ъ]

Thank you for video

[@kelvinnwachukwu8141]

Please can you do a project with react and tailwind css

[@hoang-vu99]

Thanks, sir ❤

[@tahakhan3045]

Black is beautiful

[@harshalkhairnar1943]

can i add this project in my resume as a beginner?

[@nitikabansal9553]

Hi.. In navbar its not removing active class from Home menu but if try to click on another buttons that getting change but home is always active.. Where i am going wrong i am not getting?

[@tynelson6722]

Same with me and I can't figure out how to fix it. Came to the comments to see if anyone else has the same issue. Did you figure it out?

[@nitikabansal9553]

Nope

[@tynelson6722]

figured it out from other comments need to downgrade react-router-dom run this in terminal " npm install react-router-dom@6.3.0"

[@nitikabansal9553]

@@tynelson6722 thankyou will try

[@TravisKowalenko]

@@tynelson6722 this fucked my entire project

[@Mkmoney1]

After I deploy the the website to github, when the link is clicked the first page that shows is the notFound page

[@andidaffaliefalza]

What's next after this bro? what technology will you use ?

[@Funny-collector]

which language did you learn first coze you are definition of amazing ❤️❤️, because am lost for sure

[@EGATORTUTORIALS]

My very first language was Python

[@Funny-collector]

which year was that? as from my point of view i guess you don't use it that much

[@DavidAlofokhai]

where can i get d animated navbar videos

[@mdiqbalhossain9832]

Many many Thanks

[@sanskrutipaitwar5843]

can we deploy this using netlify?

[@eduardofranca181]

When you access a website made in reactjs, does the browser download every single page and asset of the application at once? (Images,libraries, videos,etc)?

[@m7mo0o]

no

[@blackopss017]

yes it downloads everything at once, to tackle this problem we use Lazy component which as provided by react which prevents all files downloading at once

[@abhicornellgaming]

1:09:09 i have to continue tomorrow from here

[@jayantaghosh4813]

.programs__program a { margin-top: 2.5rem; display: flex; align-items: center; justify-content: center; } .programs__program:hover a { background: var(--color-secondary); color: var(--color-gray-600); } this styling is not working in the Programs component inside the home page

[@vandenikolovski9804]

Perfect tutorial, nice explanation......but I stuck only in one step with Nav....the className={({ isActive }) => (isActive ? "active-nav" : "")}, the active class from home not moving, strange :(

[@scary_ninja1310]

I have fixed this problem. The solution is to change {} on [] like this: const [isNavShowing, setIsNavShowing] = useState(false). So useState Hook can understand value right and will work will work as intended.

[@TahirKhan001]

Hey ​ @EGATOR , Thanks for the awesome tutorial. Can you please share the images/icons only (not code) in a Google Drive shared folder? We need the images while following your tutorial video.

[@EGATORTUTORIALS]

Check the video description for the that please. There a GitHub link there for the starter files/assets

[@TahirKhan001]

@@EGATORTUTORIALS Just found it. Thanks for the help. You are great :)

[@theway_up]

Can you share the link to its deployment?

[@castrombithi4135]

there is a whitespace below my footer

[@bhargavkumar]

Bro If i get a job one day as a react developer. You will be the reason behind that

[@EGATORTUTORIALS]

I'm glad u find my projects helpful bro 🥂

[@CodeBridgers]

Good tutorial but code font is too small. I can't see it.

[@parthsarthishukla]

css isnt getting implemented and there isnt any complilation error also means all my syntax are correct , what to do in this case?

[@Hafsa0526]

Hey Parth! I hope your doubt is resolved. Have you created projects on React js? Are you interested in exploring opportunities in web development?

[@parthsarthishukla]

@@Hafsa0526 Yes it would be great

[@Hafsa0526]

@@parthsarthishukla Hey Parth. Good to know that you are interested. For discussions on the job opportunities you can connect with me using the contact information in the 'About' section of my channel.

[@senjithp6285]

How you solved it?? My too same problem

[@parthsarthishukla]

@@senjithp6285 yes it is

[@watchanime4903]

Can you do a project on laravel?

[@auto-diciplime237]

Thank you very much sir please do you have a course about reat,css,html and javascript?

[@EGATORTUTORIALS]

No please

[@auto-diciplime237]

@@EGATORTUTORIALS okay you explain things very well I think you have to think about it to connect more and more with your audience

[@SOHELRANA-fk9hj]

Brother can you please reply me.. I can't access data.js It's not working.. I'm using react though Vite.

[@mikenorthwood7160]

4:38

[@MuhammadUsman-kw3pj]

Sir please an ecommerce tutorial on the same technologies you have used in this video

[@EGATORTUTORIALS]

Ok

[@vaishnavia.n.312]

For the gallery section, If I don't add the "require", it gives me error, So I removed the "require", now my images are not being loaded on to he screen, Any idea on how to resolve this? The issue got resolved, As I did not give {} in the push statement, instead I have given [ ], since I was so much used to it. Keeping this because any one with such a minor difference, may not know the mistake immediately.

[@132_abhishekpethe7]

I am having the same issue , but not resolved. Can you share the code. , it says require is not defined , I've tried import and what not but still ....

[@adelkhalifa1104]

Egator, I'm about to start learning React, do you recommend to start with class based components? I read that learning them first before functional components makes it easier to learn hooks later, what do you think? Should I spare some time to learn class components?

[@EGATORTUTORIALS]

Learn functional components instead. It's the most used out there. U can even do without learning class based components, although I'd recommend you learn the basics of that too.

[@TahirKhan001]

​@@EGATORTUTORIALS ​ Thanks for the awesome tutorial. Can you please share the images/icons only (not code) in a Google Drive shared folder? We need the images while following your tutorial video.

[@nakulsubramaniam3285]

Hey Ernest plz come up with a course on full stack development paid will also help

[@Hafsa0526]

Hey Nakul. Good to see you learn from tutorials here. Are you a fresher and open to opportunities in software development?

[@ZPIB]

Hello, is there a website that structures my code? I am looking forward to your feedback!:)

[@PritamDas-eb6kp]

sir which website u use for the the images to downloed ?

[@EGATORTUTORIALS]

Pexels.com

[@niniolawarith1435]

The entire app is crashing after I import the data.js file Any ideas on this please

[@raihanhaqqani1ia096]

bro can i know what theme do you use in this video?

[@EGATORTUTORIALS]

It’s called Blackk

[@soulrelaxing541]

sir which xd version do you use..any free version avilabe

[@EGATORTUTORIALS]

I use figma more often. But I think xd is free too.

[@CryptoGuruji369]

Can you share free file

[@ColombianoenPolonia]

Where you obtain the greatest images?

[@EGATORTUTORIALS]

All from pexels.com

[@dabbarnaresh7791]

how to get Api and its free or pay, please confirm me

[@3d__glitch347]

bro can you do laravel + react tutorial

[@FarhanMasoodKhan]

NICE 👍

[@nii1067]

How do I download the images

[@EGATORTUTORIALS]

Check the description for the link and clone it

[@ValentinWF]

Aún sigues usando créate React app ? Dinosaurio

[@m7mo0o]

video is 7 months old

[@faisalsheikh6193]

hello can you please share images with me its very helpful to make same design thanks

[@harshalkhairnar1943]

instead of writing so much CSS we could have directly used bootstrap

[@kafuidoe2676]

Egator, am Ghanaian and I'll like to get in touch with you. Pls

[@EGATORTUTORIALS]

[e-mail]

[@emmanuelike]

Please boss I will like you to create something for me

[@EGATORTUTORIALS]

Send me a mail [e-mail]