React Website Using Styled Components - Beginner React JS Project Fully Responsive
HTML-код
- Опубликовано: 5 июн 2024
- Learn how to make a Responsive React Website using Styled Components in this beginner project tutorial. We will use React Hooks and React Router.
The site is made with reusable components that you can customize and place wherever you want.
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Timeline
0:00 Website Design We're Building
4:34 Creating React App
8:12 Creating Components & Pages Folder
10:13 Editing the Navbar
18:55 Creating GlobalStyles
29:17 Adding React Router
1:02:39 Creating Info Sections
1:06:20 Creating Home Page
1:31:36 Getting Our Images
1:38:24 Creating Footer
2:16:30 Adding Pricing Component
2:19:52 Creating rest of Pages
2:27:36 Adding Scroll to Top Effect
Source Code
www.codavilla.com/posts/react...
React API Finance Tracker App
• React API Project - Cr...
React Todo List App
• React Todo List App Tu... "
Get the source code here:
www.codavilla.com/posts/react-website-using-styled-components
Not able to find the code in your github
@Brian Design please give us the code. Thank you
@@godwinn9860 it's on master branch
how can deploy it on heroku.. suggestion please.
I can post a complete github repo once I finish this video
If anyone is like me and has problems with the img not rendering and showing up in browser as src="[object Module]", try adding '.default' in the end of the img properties in the Data.js file, like so:
img: require('image.png').default;
Took me ages to find that out
That's really driven me crazy. I appreciated!
thanks man
Thanks man I fixed the problem
Thankyou
Thanks bro
Man, your channel is great, hope to see this channel growing more and more! Best regards from a Brazilian fan!
Thanks Alex! I've always wanted to visit Brazil!
Dope..i love this design... More power to you man...Loved it
Thanks Naik! Glad you like it!
Learning React and I am really grateful I got to see this channel. Got to understand Router, never worked with it before. Looking forward to seeing more React Tutorials. ✨🙌
Thanks!
First time to learn the styled component, thank you Brian, I really enjoyed your tutorial.
Thanks! glad you liked it
Very well explained. After watching this tutorial feels it's easy to create website using React & Styled components. Keep up good work Brian!
Thanks!
Many thanks Brian! I've subscribed. Lov the design.
Awesome design, simple and clean, thanks a lot
Man you are gonna be famous(you already are quite famous) soon I promise! Love you content, it is very concise and on to the point. Thank you very much :)
Thank you for this project Brian. As someone relatively new to React this was a nice follow along. I liked the website as well as it can serve as a sort of skeleton for a multitude of websites so you don't have to code from the very start. Subbed and looking forward for more to come.
Thanks Kani!
Thanks a lot Brian! Great video!
Thank you so much Brian for such a clean code. I've learned a lot from it. Good luck :)
I did like before play the video, you and your classes are so fantastic, im an your Brazilian fan haha
aye thanks Felipe! good to see people from all over the world!
This video was uploaded on my birthday date. Wish I found this video at that moment. This would be the best birthday gift in my life tbh. I'm learning React, Styled Components, React Router DOM all in one right now. Also I found your other videos talk about Framer for animation. These videos are really helpful to give me actual example of how to integrate all those dependencies in the right way on my on-going project! Thank you so much Brian! You nailed it man! Definitely, you earned my subs 🤟🏼
Do you mind for uploading more videos about using Firebase Auth and CRUD with Firestore + React? I think people would love that 🔥
Really good work, clean and smart code! truly love it. Keep it up man 👍
Thanks Awran!
I really enjoyed this tutorial and learned a lot. Thank you!
This tutorial is super helpful it has saved me tonnes of times, packed with very good insightful content well put together. Thanks 👍
The best video I have ever seen for a fresher. Best best best wishes bro. Lots of love..
Hey Brian. Great Project! I would love to have more explanations about styles and what those styles do and react hooks.
Great Job Man!!!!! Thx a lot! Very good Front End content! Keep going!
Great video. On 21:47, to style both the left and right side with margin or padding you can also use margin-inline / paddding-inline.
This course taught me lots of things. Thank you 👍
this is such an underrated channel! Sometimes I don't understand the algorithm of YT, I see some loser that filming a video like PHP in 2020!? , JS in 2020!?, 10 min blabla for nothing then you learn simply nothing. I hope you will much more followers than this. I humbly bow before the extraordinary work you do each day. ! #respect!
Thanks Kenan! appreciate it!
@@briandesign You're welcome.
import react from react no longer needed for jsx, thanks for the great video man!
Thank u so much! Great video!
this should have more views! great works!
what an amazing tutoriel thanks a lot for the time you spent doing this for us
for anyone having issue with image not loaded make sure you type
img: require('../../images/svg-1.svg').default, you need to add the default or else it wont work
Wish I could like 100 times.
I followed your tutorial, and made a truly dope website. I integrated some of the button effects you taught in other videos and customized it to the max.
awesome! thanks Jim
Which button effect videos did you integrate?
Man, this was awesome, I learnt a lot thank you.
First time study how to use styled-components.
Thank you, many useful for beginner React like me 😍
Thanks Tin!
Thank you for an awesome tutorial i learnt alot. You got a new sub, thanks from Norway!
Awesome, thank you!
Awesome video :)
Thank you for sharing your knowledge :)
enjoyed so much thanks you!
This is awesome! Subscribed!
Awesome! Thank you!
Amazing job Brian!
Thanks Lucas!
Great video man, thank you!
Thanks Leo!
Awesome!!! TQVM!
I learn new things ! Thank you 🙏🏽
awesome!
Excellento!
Seriously Amazing brother, Keep doing...
Thanks Prasath!
Wow I'm glad I found your video. Thanks bro.
Thanks mate!
Great work brother!!!
Appreciate it Harold!
great tutorial thank you! :)
Glad it was helpful!
many many thanks for this video.. I learned lots of things from this....
Glad it was helpful!
best thing is your are showing the Errors Especially thanks for this
yeah a lot of people skip over them, but I found it helps me learn and others can benefit from them
You are the man.
You're the man Peter!
Bro, you are pumping out great content to which I can't keep up with,.....bro......
Bro, grind don't stop! Thanks btw
You are great. Thank you .
Thanks Bimal!
Thank you, Awsome website.
Thanks
To show the signup button, you actually don't need any of the window resize event stuff, the use effect, or the state. You're already tracking whether it will show simply by putting it inside of the NavMenu component, which hides everything under a certain screen size.
exactly
thanks a lot sir
love you brian
Thanku for greate video.
Loved it man...
Thanks!
@@briandesignmake more projects like this
currently working on some!
@@briandesign okay man
something i've learnt brian. When it says undefined but you're sure you've defined everything, Just restart the server.
thank you so much
Thanks!
greate man great work greate smart dude
Thanks!
You are amazing
Thanks!
Just going to Code -> Preferences -> Settings, search "editor hover enabled" and disable checkbox.
*THIS WILL REMOVE THE MDN REFERENCE POP-UP BOX*
BLESS YOU
Try VS Code settings- parameter hints also look at hover-sticky. hopefully this helps you with popups
I'll check it out!
Thankyou sir .
Welcome
Noce Content Bro..
Thanks!
New subscriber
I named my project styled-components big mistake. Terminal be like- really you gonna install styled-components in styled-components. I felt the terminal passing judgement.
Great Video as always.
haha yeah you might wanna rename your folder and just start vscode. Sometimes naming it the same as a file will cause issues, so I always add a random v1 or something to make sure I can identify it easily
Hi Brian! thanks so much for the amazing project. I have a question tho: I'm trying to put a logo in svg format instead of the famagento, any help on how I could do that please? would really appreciate your answer!
team styled component :)
Curious, why, at 54:47 does that button get made as a global style rather than a styled component? Is this just a pure preference thing, or is there a reason for it?
Also great video! thank you :). Been having issues figuring out how to do responsive nav with react without using bootstrap.
Gonna blow up soon ❤
Appreciate the kind words Saksham!
Nice design :)
Recommend using next.js as a default for landing pages since create-react-app SEO is horrible, which is really bad for landing pages
yeah I use gatsby for my actual live sites, but this is just a tutorial showing how to make something using react
Hey thanks for the video! I developed my website with it, you have a video explaining how to integrate a contact form in a contactus page using the repo of this video?
Hi Brian, thank you so much for the great project. I have a question tho : how can I change the icon(famagento) into an actual Logo of mine in svg format? tried using img wrapped in Link but wouldn't work. HELP PLEASE !
Bro vedeo is perfect. UZBEKISTAN
Thanks Xurshid!
great and nice one.
what if I don't want all the buttons to be linked to the SignUp page. i.e I want to link the button to a separate page?
please any help will be welcome.
30:30 after this my website won't run, running yarn or npm start throws an unknown BABEL error and points to App.js
What do?
Hi, whey have you made the NavItemBtn and NavBtnLink as flex ?
I have a Solution for the Image Problem: in JSX: and in the data. js => img: require("../../images/profile.jpg").default,
The Problem is no className in JSX and .default in "css" you need both to solve the problem... have fun
Thanks it worked...what do you eat my guy i need your diet, that was brilliant
Dude, you are awesome, can u make one seconds car website something like that... just a request!
Thanks! What's the exact website called so I can check it out?
Please make a clean video on the sidebar navigation with the route also. Your videos are great.
I made a react sidebar already with regular css. Did you see that one? Or you want me to make a different style?
@@briandesign cool😊. I am looking for a sidebar that should always stick to the left side of the page (Like navbar). and it should also have the nesting of items in them. Thanks for the reply. Have a nice day
Great tutorial. What is this technique / pattern called, im super interested to learn it further, thanks
Thanks for nice tutorial. Learned a lot.Can you plase do a tutorial on MERN stack.
Soon!
great tutorial can you do the section where you can include image as logo, carousel banner and dropdown thank you
Had the same issue but still no solution :(
I love you
Did you just created for all menu buttons separate menu for each? Why you did't place your nav link inside menu?
Great tutorial but I have a problem with 'sticky". In my Chrom it doesn't work. How can I fixe it? thank in advance ;)
What browser are using for the inspect i mean like how do you get different screen sizes with inspect eg iphone5 glaxy.
Man your tutorial is top.
Keep it up
Mern stack social media next pls
I use google chrome for my browser
Help! How do I redirect each button to different pages in the reused info section? Do I use props?
easy way is to just wrap the button with a link tag and then set the path
How do I scroll to top the same page I am on ? It doesn't seem to work for the same page if I click the navbar link ? Any help?
Hello, help me please my img: require("../../images/svg-1.svg"), doesn't work, what i must to do ?
Why do you create a top level fragment on all of your components?
On Mobile screen size after the Footer there's an empty white space below I think the height are not being used up has anyone fixed this?
if anyone has error saying " cannot import navbar from ./components ", then do this.
import Navbar from './components/Navbar/Navbar';
hope it helps :)
still doesent work
@@nicolasgomez5207 make sure the path is correct bro. Ur Navbar file path
Thank youu
Great information half way through the video very nice information you are sharing. I think what would have been better is you creating the style component directly you could have convert html to div, nav> ul > li > a then style component like navContainer, NavBar, NavItem. I think it will help people out how the style component is working behind the scene but greater concept
check out my previous react website videos because I coded those with just CSS, so I basically refactored them into styled components in this video. So if you wanted to see a similar design with just react and regular css, I go through those line by line and it might help you see how I converted them
Hi Brian , first of all I want to say that this tutorial was extremely helpful, but I have one question that'd saved my ass big time.
Do you have any idea how could I make Scrolling to particular sections and still see the rest of other sections when I scroll manually back up? Because now if I click let's say on "Products", I can't scroll up manually and see what's above. I hope you understand what I mean.
Thank you so much in advance.
Marek
I'm not sure what you're asking? The way I created the design is for each menu nav item to navigate to another page. So essentially if you click on products that is a completely different page with different content. So I don't understand what you mean by scroll up and still see the same content?
If it were a static page, where if you click on a nav menu and it scrolls down to it, then that is a completely different design and I'll eventually make a new vid showing how to do it.
Brian Design Oh yes I static page sorry! You are right I didn’t realized this is not static page but it feels like one that’s what confused me.
I’d really appreciate static page tutorial so much.
Thanks Brian
Hi! I read your comment on Andy Sterkowitz´s Video about documenting your progress. I also considered doing this but can you explain how to do? Do you learn new stuff in the morning and then at night make a video about it? Thanks!
Hey Ralph, yeah so there's a few ways you could go about it. One is just to build things, then show people the finished product, which is much easier and you're still documenting, but you're not teaching/showing them exactly how you made it.
The other way is to build something (could take 1 day or 1 week+), then you would record yourself building it again from scratch, which is basically a tutorial like I've been doing recently. I originally started just talking about what I made & what I'm currently learning, but now I switch to tutorials because it utilizes the Feynman technique, which is learning by teaching and everyone says that's the best way to learn, yet literally zero people do it, so I figured I'd test it out.
As far as learning, If it's a simple app like a todo app or something easier, then yeah I basically learn it during the day, then film how I made it at night. For larger projects, they can take way way longer
@@briandesign Thanks for this amazing answer! Keep up the good work:D
@@markushektor8505 Thanks Ralph! Look forward to seeing your progress as well!
Hey great tutorial. I am trying to adapt this to Next.js and ran into a problem at 1:02. I put in " window.addEventListener('resize', showButton);" but get an error saying "ReferenceError: window is not defined". Do you have any experience with that error?
not sure, it might not work with next.js or you have to refactor to a different method
@@briandesign I believe I solved it with this usehooks.com/useWindowSize/
I also came across this which gives more detail reedbarger.com/how-to-create-a-usewindowsize-react-hook/
ah okay glad you figured it out!
Anybody else got a problem with the text color on the light background components? Background is white and so is the text. Where can I change the color?
you can show tutorial of 3 cards on same page that switch in carousel to different 3 cards? ? (0,1,2)-> (3,4,5)->(0,1,2)