React Website Tutorial - Beginner React JS Project Fully Responsive

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 พ.ย. 2024

ความคิดเห็น • 2.1K

  • @briandesign
    @briandesign  4 ปีที่แล้ว +145

    Get the source code here:
    www.codavilla.com/posts/react-website-travel-website-design
    Favorite Resource for Learning React: v2.scrimba.com/?via=briandesign

    • @CreativeWorkersBest
      @CreativeWorkersBest 4 ปีที่แล้ว +8

      css codes where?
      I cannot find in your github.

    • @briandesign
      @briandesign  4 ปีที่แล้ว +15

      @@CreativeWorkersBest check the master branch

    • @CreativeWorkersBest
      @CreativeWorkersBest 4 ปีที่แล้ว +1

      @@briandesignI found thank you

    • @drunkpanda3686
      @drunkpanda3686 4 ปีที่แล้ว +2

      i copied the cards.css file as in the video but my image is too big and the adventure label is not showing..what is the problem can u suggest?if i decrease the padding of image then there is a gap in the container and image

    • @briandesign
      @briandesign  4 ปีที่แล้ว +2

      @@drunkpanda3686 you could set a fixed width and height for your images that matches the size of your card

  • @alques-dias
    @alques-dias 2 ปีที่แล้ว +851

    Some notes from people who are going to code this now:
    In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from
    import { Switch, Route } from "react-router-dom";
    to
    import { Routes ,Route } from 'react-router-dom';

    • @mitchskizzy
      @mitchskizzy 2 ปีที่แล้ว +31

      Thanks! Wish I saw this comment 30 minutes sooner!

    • @nadamm6555
      @nadamm6555 2 ปีที่แล้ว +43

      Also component is changed into element

    • @jk480p
      @jk480p 2 ปีที่แล้ว +6

      When I got to the Cards section nothing displays using Brian's code. Was there any updated for v6 that needed code changes that you did to get the Cards showing?

    • @alques-dias
      @alques-dias 2 ปีที่แล้ว +7

      @@jk480p Not for me, one thing that is not mentioned in this comments above is that you also have to change Switch tag, like this:
      For this
      It might by just , i don't remeber exacltly.

    • @jk480p
      @jk480p 2 ปีที่แล้ว +1

      @@alques-dias Hey did your cards show up super big? Mine did-not like his. If so, did you change any Css to fix this? I'm also having issues with the images showing up. He has the coding as url('/images/img-1.jpg');

  • @jalenmickey3813
    @jalenmickey3813 ปีที่แล้ว +91

    I'm 20 minutes in this video as of 11/8/2023 and some things have changed. I will post more along this thread as I go through the video. Please upvote this comment to help those looking to learn by using this video!
    Must change App.js import to: import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
    The app.js file should instead look like the following, Switch is no longer part of React-Router:








    To get the hamburger menu working correctly, I'm sure it doesn't appear for most of you:
    'fa-solid fa-bars' instead of 'fas fa-bars'

    • @MauroMaculan
      @MauroMaculan 8 หลายเดือนก่อน

      i don't see my hamburger, and the code is this

      BlueBay



      Home

    • @pokerabend1
      @pokerabend1 2 หลายเดือนก่อน

      well to keep it easier to follow, and I hope I didn't fall over my own feet there, I imported 'Routes as Switch'

  • @jwhubert91
    @jwhubert91 4 ปีที่แล้ว +72

    Holla for the peeps who made it to 1:37:20 and were just soldiering on when Brian said "If you've made it this far go ahead and hit that like." So well deserved. Thanks for this awesome tutorial.

  • @linusyong4731
    @linusyong4731 ปีที่แล้ว +121

    For those stuck at 53:16, you have to change the component to element, like this: . I hope this helps

    • @michaellam4082
      @michaellam4082 ปีที่แล้ว +4

      well that helped out a lot!

    • @dylaneamos
      @dylaneamos ปีที่แล้ว

      It says Home is not defined.
      How to solve?

    • @michaellam4082
      @michaellam4082 ปีที่แล้ว

      ​@@dylaneamos do you know where you created the `Home.js` file? in this video the directory of that is`src/components/pages/Home.js`.

    • @SmashAdams
      @SmashAdams ปีที่แล้ว

      this helped thanks. Really important to have Home formatted like inside the curly braces. Without it your passing in the function Home, not the React.element

    • @mohamedalitalbe739
      @mohamedalitalbe739 ปีที่แล้ว +1

      Thank you so much man, I wwas stuck for 30min looking for the problem

  • @severedghost
    @severedghost 4 ปีที่แล้ว +325

    Don't forget to take the Footer component out of the Home component, and put it into the App component. That way the footer is on every page.

    • @briandesign
      @briandesign  4 ปีที่แล้ว +39

      true!

    • @anasizmaz5594
      @anasizmaz5594 3 ปีที่แล้ว +6

      Thanks, was really Helpful

    • @Matin1999_T
      @Matin1999_T 2 ปีที่แล้ว +2

      thank you very much.

    • @nicholasobrien5914
      @nicholasobrien5914 2 ปีที่แล้ว +1

      Feeling emotional lol great video

    • @stayalivewithjohn3039
      @stayalivewithjohn3039 9 หลายเดือนก่อน

      i am still having hard time to link pages home service products sign up what should i do

  • @BoostHealthHorizon
    @BoostHealthHorizon 2 ปีที่แล้ว +11

    As a beginner frontend developer this video increase my awareness. I can figure out the ReactJS better and I am encouraged about my development journey with this video. Many thanks!

  • @icyrealm7
    @icyrealm7 4 ปีที่แล้ว +85

    Yes! A nice modern reactjs tutorial (others were from 2 years ago!), straight to point and effective! THanks!

    • @briandesign
      @briandesign  4 ปีที่แล้ว +9

      Thanks! This was my first ever react website vid. I’ve made a lot more since and refactored a lot of code, so feel free to check those out

  • @scotianwheels
    @scotianwheels 9 หลายเดือนก่อน +3

    For anyone still struggling with the images or video files, my fix was creating an index.js file within the assets or public folder (whichever you chose to use) and manually exporting them all like:
    export { default as img1 } from './images/img-1.jpg'
    The same can be done for all the images and videos, as long as you keep the paths correct!
    Then you can import them all to any component like:
    import { img1, img2, img3, img4, img5, img6, img7, img8, img9 } from './assets'
    and set the 'src' attribute of any tag like this:
    Hope this helps!

    • @eva42sh
      @eva42sh 5 หลายเดือนก่อน

      in which class I should do manually export and importing?

    • @scotianwheels
      @scotianwheels 5 หลายเดือนก่อน

      @@eva42sh Not sure what you mean by this, but if you follow the instructions above and create an index.js file in the ‘assests’ or ‘public’ folder you can then import them into any other file using the correct relative path.

  • @fernandosegre9116
    @fernandosegre9116 3 ปีที่แล้ว +6

    I have been struggling with coding for rmonths, not getting the hang of it. Your video just enlightened the path!! Thank you very much for sharing your know-how Brian!!

  • @OMorningStar
    @OMorningStar 4 ปีที่แล้ว +42

    I'm sure I can recreate this, but I love coding along. Thank you, jumping in soon.

  • @paulburg5741
    @paulburg5741 2 ปีที่แล้ว +17

    Your Button components were really interesting, the way you used the functions to change the CSS was brilliant. I'm new to React, but I'm definitely taking a lot from this! Thanks so much for the upload!!

  • @j-williamsuckau3963
    @j-williamsuckau3963 2 ปีที่แล้ว +29

    Honestly so great. This helped me get started in so many ways- thank you for putting so much effort into this tutorial, it is much appreciated!

  • @arianmm-1
    @arianmm-1 ปีที่แล้ว +2

    Amazing tutorial Brian!! I've spent like 4 hours trying to understand all the code and solve hundreds of errors, but it was totally worth it! U won a subscriber

  • @mitchdrxms
    @mitchdrxms ปีที่แล้ว +22

    If you're following along now, you'll also need to make sure your Route in App.js is using an element prop in order to ge your page content to display. So for home for example, it would be this:

    • @boyzrulethawld1
      @boyzrulethawld1 ปีที่แล้ว

      Hey, thanks for the tip! I still need your help though, I get the error: "'Home' is not defined" when I type what you recommended. Is there something I should be importing?

    • @X4R80
      @X4R80 ปีที่แล้ว

      @@boyzrulethawld1 you gotta do
      import Home from ‘./components/pages/Home‘;
      but that should be in the video

    • @boyzrulethawld1
      @boyzrulethawld1 ปีที่แล้ว +1

      @@X4R80 Ah right, basically I’m at minute 16ish in the video. I can see the TRVL text in the Navbar now, but not any of the images from Font Awesome.

    • @X4R80
      @X4R80 ปีที่แล้ว

      @@boyzrulethawld1 well, if you sign up and paste the link it gives you, everything should work

    • @janllever7938
      @janllever7938 ปีที่แล้ว +1

      @@X4R80 Hey bro. it still doesn't work. Do you have any clue to fix this?

  • @pekwind
    @pekwind 3 ปีที่แล้ว +76

    For those having issues finding images assets under public folder, this seems to be an issue with upgrades associated with react-scripts 4.0.0. The current solution is to move assets under src folder, and redirect to url("/src/images/img-home.jpg") for your css files. This will resolve compiling issues for css files. Please make a pinned message about this.

    • @juanantoniomartin2988
      @juanantoniomartin2988 3 ปีที่แล้ว +3

      That's weird, because the video is playing perfect but images doesn't work..

    • @pekwind
      @pekwind 3 ปีที่แล้ว +1

      @@juanantoniomartin2988 I am only guessing react-scripts 4.0.0 affects only css url. The video url is in the js file which still works. Again, only guessing. The css issue seems to be still an outstanding issue on github.

    • @frankiecostoya4591
      @frankiecostoya4591 3 ปีที่แล้ว

      @@juanantoniomartin2988 i totally moved both images and videos over in the beginning when images weren't working for me. I was going nuts when video wasn't working. Moved videos back to public and we are good to go. your comment saved me! thanks.

    • @scienceofpsi2148
      @scienceofpsi2148 2 ปีที่แล้ว

      Thanks for Sharing! :)

    • @joaomarcoscarvalho10
      @joaomarcoscarvalho10 2 ปีที่แล้ว

      wow. I spent nearly 2 hours trying to solve this. Thanks

  • @kwandamadela7707
    @kwandamadela7707 ปีที่แล้ว +9

    Just a quick tip: if emmet isn't working for you on the .js files, just rename the file to .jsx. The extensions are pretty much the same thing so you won't have to change your code

    • @rmnvishal
      @rmnvishal ปีที่แล้ว +1

      Thank you!

  • @urmomapollo
    @urmomapollo 3 ปีที่แล้ว +13

    This is great demonstration of React and its various uses! Also great for new engineers like myself that want a simple and clean website. GREAT JOB!!!

  • @yhr4052
    @yhr4052 3 ปีที่แล้ว +9

    Man, I don't know why I'm saying this, but I like you! You give off such positive energy.

  • @imaninjakinda9640
    @imaninjakinda9640 3 ปีที่แล้ว +15

    You killing it man, everything is super clear, and I have never worked with React and everything makes sense and I am making my own sites and doing more things with the skeleton example you provided. Thank you so much man !!!

  • @annieperdue6140
    @annieperdue6140 3 ปีที่แล้ว +7

    IF YOU ARE GETTING AN ERROR about not being able to resolve images (about 40 min into the tutorial) it's because of that code you've just imported into App.css. There are three typos: the beginning period is missing in each image import. In other words "/images/img-1.jpg'" should be "./images/img-1.jpg".

  • @ГеоргийМихайлов-д6с
    @ГеоргийМихайлов-д6с 4 ปีที่แล้ว +16

    Hey! In order to fix problem with autocompleting in VS Code you can change your language mode(on the bottom-right corner of the status-bar) from 'JavaScript' to the 'JavaScript React'.

    • @jennifervaldez2554
      @jennifervaldez2554 3 ปีที่แล้ว +1

      I dont have an option to select javascript react. Do I have to get some sort of extension for this autocompletion?

    • @ГеоргийМихайлов-д6с
      @ГеоргийМихайлов-д6с 3 ปีที่แล้ว +3

      @@jennifervaldez2554 are you sure you don't have it?
      when you click on a 'JavaScript' usaualy there should be a pop out on the top of the screen where you should type out name of your language

  • @andressierra4850
    @andressierra4850 2 ปีที่แล้ว +42

    Excelente video, hay una pequeña actualización para renderizar en App.js :
    En el video vemos asi








    y ahora para que funcione (año 2022):








    Saludos!

    • @SignorPao
      @SignorPao 2 ปีที่แล้ว +2

      thanks dude

    • @kingsleyseatsntreats7156
      @kingsleyseatsntreats7156 2 ปีที่แล้ว +2

      Cheers man!!

    • @monikantagogoi7858
      @monikantagogoi7858 2 ปีที่แล้ว

      its not working for me

    • @aecho5955
      @aecho5955 2 ปีที่แล้ว +1

      Thanks alot my man! 🙌🙌🙌

    • @aecho5955
      @aecho5955 2 ปีที่แล้ว

      @@monikantagogoi7858 Do you see that there is not component={Home} but exactly element={}. Not component. Element.

  • @burgeractivity
    @burgeractivity ปีที่แล้ว

    I saw all the videos, then I found your video, You told me, you have done a good reaction in it. In the rest of the video, I used it in HTML, I wrote the link in the response, as I do it in HTML, you have adopted the correct date. i think your video is awesome

  • @stryker2k2
    @stryker2k2 3 ปีที่แล้ว +82

    Heads up - some of the updated ReactJS packages aren't showing images properly. In order for them to show up now, you have to write them in like this:
    src = {require('../images/img-9.jpg').default}
    or depending on what your file structure looks like:
    src = {require('images/img-9.jpg').default}

    • @ziraddingulumjanly8432
      @ziraddingulumjanly8432 3 ปีที่แล้ว +5

      It really helped me a lot . Thanks !

    • @Calebinator1999
      @Calebinator1999 3 ปีที่แล้ว +3

      THANK YOU. This issue was driving me crazy.

    • @adrienesquerre5790
      @adrienesquerre5790 3 ปีที่แล้ว +1

      Thank you !

    • @stryker2k2
      @stryker2k2 3 ปีที่แล้ว

      @@ziraddingulumjanly8432 I'm glad it helped!

    • @stryker2k2
      @stryker2k2 3 ปีที่แล้ว

      @@Calebinator1999 My pleasure!

  • @fernandocoelho8791
    @fernandocoelho8791 4 ปีที่แล้ว +19

    This was amazing man, thank you so much for this awesome work! Good job!

  • @eliseerickson5994
    @eliseerickson5994 3 ปีที่แล้ว +136

    I feel like I just learned an entire semester's worth of web development in 3 hours

    • @nechetv6268
      @nechetv6268 2 ปีที่แล้ว +1

      Nice can you be of help to me please

    • @latinstuff1
      @latinstuff1 2 ปีที่แล้ว +2

      It’s not 3 hours -____-

    • @ghfranklin
      @ghfranklin 2 ปีที่แล้ว +7

      @@latinstuff1 pausing and coding along can make it 3 hours XD

    • @latinstuff1
      @latinstuff1 2 ปีที่แล้ว

      @@ghfranklin I guess so

    • @linusyong4731
      @linusyong4731 ปีที่แล้ว

      ​@@ghfranklin for me it's like 1 week XD

  • @MrFsudude
    @MrFsudude 3 ปีที่แล้ว +6

    This is really well explained and a beautiful site. Excellent content, thanks Brian

  • @notmanymore1521
    @notmanymore1521 ปีที่แล้ว

    Thank you so so much! I'm a student of web dev and I've just started learning React, while I got the basic concepts of how it works and the general syntax, it was hard to see how it actually works but your video really helped me put it all together! Huge thanks!

  • @Kheldc
    @Kheldc 2 ปีที่แล้ว

    So far the best React JS beginner tutorial video here in TH-cam! keep it coming bro. ✌️

  • @suryapanday9722
    @suryapanday9722 3 ปีที่แล้ว +8

    17:05
    It is probably because of the .js extension in the component filename. If you change the component filename to .jsx then it might solve the problem.
    eg: NavBar.js to NavBar.jsx

  • @zombiegeekboy
    @zombiegeekboy ปีที่แล้ว +8

    For those using react router v6:
    function App() {
    return (




    );
    }
    above will fix your path so that the Home page will show up every time.

    • @mariiakrater9579
      @mariiakrater9579 ปีที่แล้ว

      thank you! was just about to start looking for an answer to that!

    • @boyzrulethawld1
      @boyzrulethawld1 ปีที่แล้ว

      Hey, thanks for the tip! I still need your help though, I get the error: "'Home' is not defined" when I type what you recommended. Is there something I should be importing?

    • @janllever7938
      @janllever7938 ปีที่แล้ว

      @@boyzrulethawld1 Hey did you find the solution for this?

    • @boyzrulethawld1
      @boyzrulethawld1 ปีที่แล้ว

      @@janllever7938 Hey buddy nah I've been busy with work, let me know if something works for you, I'll keep looking for a solution. I've narrowed it down to the icons because "TRVL" is showing up successfully.

    • @abhayhiredesai7648
      @abhayhiredesai7648 ปีที่แล้ว

      @@boyzrulethawld1do you know how you got TRVL to show up, mine doesn’t, I’ve done . But nothing shows up still

  • @marothimahlake7458
    @marothimahlake7458 3 ปีที่แล้ว

    Quality content right here. I even watched as as many ads as I can. You deserve it mate!

  • @Barcie.
    @Barcie. 6 หลายเดือนก่อน +1

    One of the greatest tutorials. Thank you for this!

  • @imike964
    @imike964 2 ปีที่แล้ว +50

    This video is all over the place lol, sign up here, delete this here, then there. type some random letters "poof" theres a command. Good video if you have experience but definitely not beginner.

    • @MrWood10
      @MrWood10 ปีที่แล้ว +5

      I totally agree

    • @michaeljensen8867
      @michaeljensen8867 11 หลายเดือนก่อน +2

      Totally. He need structure

    • @Darvis227
      @Darvis227 6 หลายเดือนก่อน +1

      Bro I was half way through and I just gave up because it was just back and forth I'll find another tutorial

    • @josephezra1701
      @josephezra1701 3 หลายเดือนก่อน

      Please I copied and pasted the navbar.css code but the text and trvl logo are not displaying just a black bar on screen

  • @dairoarleygarciavergara373
    @dairoarleygarciavergara373 4 ปีที่แล้ว +7

    This is a beautiful tutorial a page, Thank you very much!!! I watched until end

  • @nocturno7887
    @nocturno7887 4 ปีที่แล้ว +18

    Thank you! I love it, you are using modern JS.

  • @clairesingson3331
    @clairesingson3331 2 ปีที่แล้ว

    i would like to express my deepest appreciation for creating this tutorial and also including the source code ... .thankyou again

  • @malouette3991
    @malouette3991 2 ปีที่แล้ว +2

    I am blown away by the way you do it so easily. The explanations are very fluid. I even improved my CSS skills! Thank you for sharing this tutorial.

  • @Hamiscool
    @Hamiscool 2 ปีที่แล้ว +3

    I've found a solution to anyone experiencing certain sections not displaying: Check the CSS for any "url(image path)". Removing the "url()" and just leaving the "image path" fixed this issue for me.

  • @sappasa
    @sappasa 3 ปีที่แล้ว +3

    Thank you, Brian! The content is focused and engaging!

  • @techthred6595
    @techthred6595 3 ปีที่แล้ว +3

    Thank you brian. I enjoyed this. I also love your clear english

  • @최지우-r6b
    @최지우-r6b 8 หลายเดือนก่อน +1

    I had loads of fun with this project thank you.

  • @panosbsds9536
    @panosbsds9536 ปีที่แล้ว

    Thanks Brian for sharing your knowledge. I created my first ever react static website cause of this video. Thanks a lot!

  • @yanisleb5507
    @yanisleb5507 3 ปีที่แล้ว +36

    This tutorial is cool to watch, but I prefer watching a project where you start from 0 and then you are really showing us the real workflow behind your work. Cause here, most of the time, the code makes sense only long time after we wrote it. So yes, I learned some things, but it's hard for me to keep following actual non sense code (even if I understand it) without watching point by point what's those lines are actually doing to the page.

    • @GameChanger-ep3tf
      @GameChanger-ep3tf 3 ปีที่แล้ว +4

      It is basically not for beginner level in my opinion, u must have atleast 3 month practice of react before building this on ur own

    • @Matin1999_T
      @Matin1999_T 2 ปีที่แล้ว +1

      i agree with your comment but i think most of the parts where he skipped the codes and just copied and pasted them in his VS Code was actually the style and CSS parts to save some time.

  • @shifairtheprogrammer5571
    @shifairtheprogrammer5571 4 ปีที่แล้ว +3

    Thank you for the great tutorial that you made. I can't thank you enough for your time. Hopefully, I could catch up with your other great videos.

  • @yellowrice8633
    @yellowrice8633 ปีที่แล้ว +5

    If you are having errors with the hero section video. Use this

  • @snackdaddy1260
    @snackdaddy1260 ปีที่แล้ว

    yooo this tutorial just showed me every single thing i needed to learn in one place much appreciated

  • @smbdcry
    @smbdcry 3 ปีที่แล้ว

    after somebody helped me setting up the same environment, everything is being perfect.
    the rest is to learn the database.. anyway. I have tried to find other TH-cam react video but this is so far the most fluent decent speed English taught web-react.

  • @gagankashyap2401
    @gagankashyap2401 4 ปีที่แล้ว +8

    Thank You Sir, i Created a react app in a one day, love from INDIA

    • @briandesign
      @briandesign  4 ปีที่แล้ว +5

      Thanks Gagan!

    • @shreyanshparashar1152
      @shreyanshparashar1152 4 ปีที่แล้ว

      Hey can you share your source code please???

    • @briandesign
      @briandesign  4 ปีที่แล้ว +3

      @@shreyanshparashar1152 I did in the description

    • @shreyanshparashar1152
      @shreyanshparashar1152 4 ปีที่แล้ว

      @@briandesign yes sir but can you share all the code?? You just shared the images and all!!

    • @briandesign
      @briandesign  4 ปีที่แล้ว +2

      @@shreyanshparashar1152 it's on the master branch

  • @letsgobowling7
    @letsgobowling7 2 ปีที่แล้ว +29

    App.js needs to be update to the new version of react router, should be like this:

    • @DJMrTen
      @DJMrTen 2 ปีที่แล้ว +2

      Holy moly!!! 1million % the best comment ever on YT. Thank you so very much! I have been on this for two days and couldn't figure out why nothing from HeroSection was being sent.

    • @dagi_works
      @dagi_works 2 ปีที่แล้ว +1

      Thank you dearly for this comment, I was stuck for a while. You're a king!

    • @hashinisigera2342
      @hashinisigera2342 2 ปีที่แล้ว +1

      Thank you so much😀

    • @monikantagogoi7858
      @monikantagogoi7858 2 ปีที่แล้ว

      still didn't solve..can u please help me

  • @Giroudgiroud8
    @Giroudgiroud8 3 ปีที่แล้ว +6

    thank you so much !! modern react html css wow just wow !!!

  • @santoshnakka7431
    @santoshnakka7431 3 ปีที่แล้ว +1

    Brian, it is an awesome video. It is quite lengthy but every second matters from this Brilliant session. Thanks very much, God bless you. Keep it up. I can't wait to watch more videos like this.

  • @marcusramirez3911
    @marcusramirez3911 3 ปีที่แล้ว

    Thanks Brian! Smooth and easy to follow. I look forward to watching more of your content!

  • @Italya3343
    @Italya3343 4 ปีที่แล้ว +4

    Many thanks for sharing bro!!👏👏👏 Please more videos like that! 🤩✌🎂

    • @briandesign
      @briandesign  4 ปีที่แล้ว +2

      I made a few more react websites on my channel, so feel free to check those out

  • @avinashgupta6361
    @avinashgupta6361 4 ปีที่แล้ว +16

    background-image: url('/images/img-2.jpg');
    I am trying to add this but it shows a error
    Error: Can't resolve '/images/img-2.jpg' in 'E:\React
    eact-demo\src'

    • @ramazangenis3421
      @ramazangenis3421 4 ปีที่แล้ว +11

      Try moving the images folder into src and change path like this
      background-image: url("/src/images/img-2.jpg");

    • @Mr77igor
      @Mr77igor 4 ปีที่แล้ว +2

      @@ramazangenis3421 it worked! thanks!

    • @mdeeds1313
      @mdeeds1313 4 ปีที่แล้ว +1

      @@ramazangenis3421 thank you

    • @mzakysyukur3417
      @mzakysyukur3417 3 ปีที่แล้ว

      thanks bro

    • @mistersir3185
      @mistersir3185 3 ปีที่แล้ว +1

      @@ramazangenis3421 it fixes that particular issue, but adds a new problem where the css card images won't load. it would've been ideal for the image folder to be in the public folder...

  • @GrandofTheftHero
    @GrandofTheftHero 4 ปีที่แล้ว +8

    Hey there Brian, great video! I have everything working, except the video that should play in the background and I can't seem to figure out why.

    • @kylenhu916
      @kylenhu916 3 ปีที่แล้ว +8

      Here is how to fix it. Copy the video folder into the public folder and use the same link as Brian (src="/videos/video-2.mp4")

    • @veenakatti2825
      @veenakatti2825 3 ปีที่แล้ว

      @@kylenhu916 Thanks! It worked for me.

    • @bernardozelaya2685
      @bernardozelaya2685 3 ปีที่แล้ว

      Thanks !!!

    • @ThrillerNotLive
      @ThrillerNotLive 3 ปีที่แล้ว

      @@kylenhu916 Is there a reason why that worked?

  • @Aj-po9dc
    @Aj-po9dc 2 ปีที่แล้ว

    Buddy! This is the video I been looking for!
    First time watching your videos and I loved it! Def liked, subbed and hit the bell.
    Looking forward to watching more of your video man , thanks for your service to the dev world!

  • @pokerabend1
    @pokerabend1 2 หลายเดือนก่อน

    I had trouble with the video until I figured out everything was working, I only had to click on home. I know this is stupid, but it could save some other 'genius-like-me' a little time.
    Great stuff, good video. I'm taking a little more time with it, in order to read some things up and or goof around with them to figure out how they work.
    Do another one XD

  • @Paragonx89
    @Paragonx89 2 ปีที่แล้ว +10

    Another thing worth noting,
    "ReactDOM.render" is no longer supported in React 18. use createRoot instead.
    In your index.js file:
    import ReactDom from "react-dom";
    to
    import createRoot from "react-dom";
    AND
    ReactDOM.render(, document.getElementById("root"));
    to
    createRoot.render(, document.getElementById("root"));

    • @kurtishoover6060
      @kurtishoover6060 2 ปีที่แล้ว +1

      Hey, at around 40:47, he runs the code after importing Navbar.css and ./Button. I am able to folow up until this step, but once I import both of these files and run the code, the screen just goes white. Any suggestions?

    • @farokhcooper8788
      @farokhcooper8788 2 ปีที่แล้ว

      thanks man

    • @dreamgood130
      @dreamgood130 3 หลายเดือนก่อน

      @@kurtishoover6060 I have a similar problem what did you do?

  • @Bettys_artjournal
    @Bettys_artjournal 2 ปีที่แล้ว +7

    Hey Brian, thanks for the tutorial video. It’s amazing…. But I keep having issues with my Herosection part, it’s not giving me any errors and it’s not displaying either. I have read the code line by line, still can’t find the issue

    • @HelghastSon
      @HelghastSon ปีที่แล้ว +3

      I am also stuck on this. None of that component seems to show up and I have copy and pasted his github files to try and replicate exactly what he did. Still nothing. Hero section just doesnt display for some reason

    • @mitchdrxms
      @mitchdrxms ปีที่แล้ว +2

      ​@@HelghastSon I just figured it out, with V6 you can't use the component prop anymore, and you have to use element.
      So the route in App.js needs to be this:

    • @janllever7938
      @janllever7938 ปีที่แล้ว

      @@mitchdrxms Hey bro the error still persists. On the import area, what should be the exact code?

    • @ingollc5616
      @ingollc5616 ปีที่แล้ว

      @Hugh G. Rection ///////WORKS//////// Big Thanks Hugh! This worked for me to get the video working and the cards to display. Now I just need the card images 👍

  • @ДарьяУтянская
    @ДарьяУтянская 2 ปีที่แล้ว

    It was cool! I was doing it in 2022 and sometimes I struggled a lot, cuz some stuff changed. But google helps as usually. Thank you very much for such a nice material!

    • @oladapoayodeji4841
      @oladapoayodeji4841 2 ปีที่แล้ว

      Is the video in the public folder or src or component folder?
      How did you apply route to the page?

    • @janllever7938
      @janllever7938 ปีที่แล้ว

      @@oladapoayodeji4841 Have you addressed this issue?

    • @oladapoayodeji4841
      @oladapoayodeji4841 ปีที่แล้ว

      @@janllever7938 Yes I have, but it's been long I did it, I can't remember how I did it.

    • @oladapoayodeji4841
      @oladapoayodeji4841 ปีที่แล้ว

      Put the video in the src folder

  • @abdulganiuganikale9311
    @abdulganiuganikale9311 2 ปีที่แล้ว

    Thank you very much for pulling this up bro, I gained a lot. I recreated and I added it as my project on my LinkedIn. thanks so much..

  • @ishitashetty8499
    @ishitashetty8499 ปีที่แล้ว +3

    Great explanation!
    btw if you are having problem with video bg not showing up, fix it with:

    • @shaman75
      @shaman75 หลายเดือนก่อน

      This is THE ONE! Been battling that issue with non-working suggestions for two days!

  • @Silv3rSurf3r
    @Silv3rSurf3r 3 ปีที่แล้ว +3

    ok, can somebody please tell me why to use react or what the advantage is ? I can do this in a quarter of the time with simple html, css and js, why would I need react and all this weird setup

  • @AnkitRegmi-pj8lz
    @AnkitRegmi-pj8lz 11 หลายเดือนก่อน +3

    how do I use the fontawseome cdn as it is now kits , I cannot use the icons from the font cdn

  • @timreed9722
    @timreed9722 2 ปีที่แล้ว +53

    Amazing tutorial! I'm using the latest versions of both React and React Router (v6), and it seems that "Switch" is no longer found in the module. "Routes" is what is used now.

    • @HriCode
      @HriCode 2 ปีที่แล้ว +1

      This will correct the errror . I also had the same problem

    • @DJAndyO
      @DJAndyO 2 ปีที่แล้ว

      Tim did you get the background videos working?

    • @timreed9722
      @timreed9722 2 ปีที่แล้ว

      @@DJAndyO Yes.

    • @DJAndyO
      @DJAndyO 2 ปีที่แล้ว

      @@timreed9722 can you share your project? I must be doing something wrong.

    • @stevethach3340
      @stevethach3340 2 ปีที่แล้ว

      @@DJAndyO Yeah, my code compiles as well, but I also cannot get the video playing. I'm at the HeroSection, and everything looks fine, but I only see my navbar

  • @efrainlemus3047
    @efrainlemus3047 2 ปีที่แล้ว

    thanks so much for this tutorial! It helped me build my first react website and I'm still finding it useful when building the second one.

  • @tonyrm2027
    @tonyrm2027 3 ปีที่แล้ว

    Thanks, my first app in React, best wishes from Costa Rica ! 😃

  • @davidkroods811
    @davidkroods811 4 ปีที่แล้ว +17

    Better find some GIF for background cuz video loads browser a lot

  • @ShortsTravelHow
    @ShortsTravelHow 2 ปีที่แล้ว +4

    Instead of this is outdated
    Use element instead of component

    • @game2playz685
      @game2playz685 2 ปีที่แล้ว

      Saved me so much work with that comment. Thanks!

    • @hammerxu5393
      @hammerxu5393 2 ปีที่แล้ว

      do you know why at this step, the herosection video is not showing up? even when i commented the background img out.

    • @hammerxu5393
      @hammerxu5393 2 ปีที่แล้ว

      when i moved video folder as well, problem occurs, then i moved video folder back to original place. Solved. For images folder, i moved to src

    • @hari6840
      @hari6840 ปีที่แล้ว

      Which is this home folder?

  • @debanjandey64
    @debanjandey64 2 ปีที่แล้ว +36

    53:16 : (2022) if not showing, replace
    component={Home}
    by
    element={}

    • @dlos8357
      @dlos8357 2 ปีที่แล้ว +1

      You saved me!!! Thanks bro

    • @emr3-turhan
      @emr3-turhan 2 ปีที่แล้ว +2

      If one day I will be a good frontend designer, it's because of you bro

    • @adammanselll
      @adammanselll 2 ปีที่แล้ว +1

      Thank you! Could you possibly explain why we need to do this / what exactly it is doing?

    • @debanjandey64
      @debanjandey64 2 ปีที่แล้ว

      @@adammanselll As I think probably it's due to upgrade in react / router version

    • @ahra_
      @ahra_ 2 ปีที่แล้ว +1

      you're a lifesaver, thank you!

  • @eldionevruzi
    @eldionevruzi 3 ปีที่แล้ว +1

    Thanks for this tutorial Brian, turned out really great and learned a bunch of stuff.

  • @dimalavrenov3916
    @dimalavrenov3916 ปีที่แล้ว

    1. Instead of component={Home} you need use element={} in App.js;
    2. Also instend of , you need import video in HeroSection.js: import video from "../assets/videos/video-1.mp4" - format required!!! And after import use:
    -----------------
    I don't know why it's working, but it's working :0

    • @fenydani
      @fenydani ปีที่แล้ว

      I tried this way but it says it falls outside the src/

    • @razor8192
      @razor8192 ปีที่แล้ว

      @@fenydani hey bro im having the same issue, lets figure this thing out

    • @fenydani
      @fenydani ปีที่แล้ว

      @@razor8192 Hi dude, i figured already it out. I forgot a duckin' return tag😂😂😂 Lemme help u

    • @fenydani
      @fenydani ปีที่แล้ว +1

      @@razor8192
      I have used this code, and it works perfectly.

    • @JPam-qu9io
      @JPam-qu9io 2 หลายเดือนก่อน +1

      @@fenydani Yeah it's true...
      Thanks bud...

  • @luongbich3223
    @luongbich3223 3 ปีที่แล้ว +11

    i cant import image to css like: url('/images/img-2.jpg'), the compiler error. anyone know why?

    • @Unknown-vg9um
      @Unknown-vg9um 3 ปีที่แล้ว +3

      copy images folder and add it to src. then add dot in path to image

    • @leonardodossantos703
      @leonardodossantos703 3 ปีที่แล้ว

      @@Unknown-vg9um I added the dot and it's still not working :c

    • @charmz973
      @charmz973 3 ปีที่แล้ว +1

      same issue here,finished copying images to the public folder but still no success. error is originating from the App.css[background-image: url("/images/img-2.jpg")]

    • @charmz973
      @charmz973 3 ปีที่แล้ว +9

      Try moving the images folder into src and change path like this
      background-image: url("/src/images/img-2.jpg");
      answer from Ramazan Genis

    • @yashnistane6728
      @yashnistane6728 3 ปีที่แล้ว

      @@charmz973 It worked for me....but can you tell me what's the issue when images folder is in public folder

  • @braddygabrielabarcaaraniba6322
    @braddygabrielabarcaaraniba6322 4 ปีที่แล้ว +4

    Module not found: You attempted to import ../../images/img-1.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. me sale este error alguan solucion porfas

  • @michaelnti5616
    @michaelnti5616 4 ปีที่แล้ว +4

    Hey Brian I loved your tutorial, it was amazing. Could you also make a vid on how you come up with the design? and what tools/software do you use?

    • @briandesign
      @briandesign  4 ปีที่แล้ว +5

      sure yeah I'll add that to my video list

  • @lakdiniarambawaththa1536
    @lakdiniarambawaththa1536 3 ปีที่แล้ว

    It is a super easy to understand..... Thank u very much..... I was in the bottom and this gave me a fresh start.... thank u again...

  • @codecodeworld22
    @codecodeworld22 ปีที่แล้ว

    Much appreciated for this tutorial, looking forward to more contents like this to come! Thx a lot😊

  • @ImpeRiaLGoD
    @ImpeRiaLGoD 3 ปีที่แล้ว +5

    For those whose video doesn`t work, do this "import myVideo1 from '/videos/video-1.mp4'" then ""

    • @lucasmota9475
      @lucasmota9475 3 ปีที่แล้ว +1

      OMG man, i tried to fix this for hours and never thought to import the video like that. Ty!

    • @christephpemmanuvel6711
      @christephpemmanuvel6711 3 ปีที่แล้ว +1

      You are GOD....Thanks man

    • @deeqmohamed823
      @deeqmohamed823 ปีที่แล้ว

      thank you man, i was fixing this problem for an hour

  • @Elnur.Zarabi
    @Elnur.Zarabi ปีที่แล้ว +3

    Font awesome cdn does not show up for me. anyone find a solution to this?

    • @legacys24
      @legacys24 ปีที่แล้ว

      idk if you found a solution yet, but if you look up "font awesome cdn link" the first link is "Install Manually | Font Awesome Docs". And if you scroll down some, you'll find the link 👍

  • @tf7788
    @tf7788 4 ปีที่แล้ว +2

    Great video ! I love the way we can create re-usable components like you do for the Button component.

    • @briandesign
      @briandesign  4 ปีที่แล้ว

      yeah if you check out my recent react website vids I refactored a lot of code and made it even easier to reuse buttons

    • @adriablake
      @adriablake 2 ปีที่แล้ว

      @@briandesign yes but the buttons all link to the same place how can I change the link :(

    • @Plopi
      @Plopi ปีที่แล้ว +1

      @@adriablake just change the 'to="/page-name"

  • @vladislavbutorin7350
    @vladislavbutorin7350 3 ปีที่แล้ว +1

    I did this from start to finish. Great and understandable video!

    • @sanskarbhatt5935
      @sanskarbhatt5935 2 ปีที่แล้ว

      did your project is running completely

  • @peirdenaasem
    @peirdenaasem 4 ปีที่แล้ว +5

    I know what i'm watching tonight ;)

  • @dzoza777
    @dzoza777 3 ปีที่แล้ว +3

    Hi!
    Can someone please explain why videos and photos work only when image and videos folders are in public and background image only works when the image is in src folder? I wanted to put everything in src folder and my paths were correct but it didn't work until I moved it to the public folder.
    Otherwise, it's a great tutorial, everything else works fine!

    • @annavardaxoglou7291
      @annavardaxoglou7291 3 ปีที่แล้ว

      I struggle with the videos and images too. Did you figure it out?

    • @zeeshanhasankhan
      @zeeshanhasankhan 3 ปีที่แล้ว

      Yes, I also struggle with that especially video is not rendering?

    • @stayalivewithjohn3039
      @stayalivewithjohn3039 9 หลายเดือนก่อน

      i think it based upon the path u set i did tried setting to my component folders but it was not showing until i moved to public folder

    • @stayalivewithjohn3039
      @stayalivewithjohn3039 9 หลายเดือนก่อน

      but i am having issues with linking the pages my footer is showing on every pages

  • @sjonniesjonnie4378
    @sjonniesjonnie4378 ปีที่แล้ว +3

    Hey I'm not sure if you still react to comments on here but,
    When actually using a logo for the header instead of the text with the font awesome icon, the image does not scale with the rest and makes everything misaligned, I also would like the logo to stay on mobile view as well.
    The issues with normal scaling is that the black bar shortens more than the end of the screen does (so you start to see the background) and when even smaller the image just floats away. Any tips to fix it?

    • @mattr9887
      @mattr9887 ปีที่แล้ว

      I am having the same problem. Were you able to fix it?

    • @mikeyjpk_
      @mikeyjpk_ ปีที่แล้ว

      Are you talking about the nav-bar items being misaligned?

    • @ananyasahay
      @ananyasahay 5 หลายเดือนก่อน

      @@mikeyjpk_ yeah any solutions?

  • @AP_Aman33
    @AP_Aman33 ปีที่แล้ว

    this is just what i needed to practice after studying some theory part of the hooks and all that help me with gaining confidence. Thanks Man👍

  • @nadin3amanda
    @nadin3amanda 3 ปีที่แล้ว

    I am doing this right now! Thank you for this tutorial! I am looking forward that I can finish this and can make something similar in the future! More power to you! Thank you!

  • @siamazing0828
    @siamazing0828 3 ปีที่แล้ว +4

    Hey man I love your video but do you mind if I ask what extensions do you use to be able to implement the "nav.className" and automatically creates the JSX snippet. Thanks in advance!

    • @HCOSalsa
      @HCOSalsa ปีที่แล้ว

      Any luck in getting the answer to this?

  • @jonnymcshu9148
    @jonnymcshu9148 3 ปีที่แล้ว +8

    Did anyone else have an issue around 43 minutes where you get the error "Module not found: You attempted to import ../public/images/img-1.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported."

    • @nargesnavidi9388
      @nargesnavidi9388 3 ปีที่แล้ว +1

      I have the same issue. While moving the img to the src folder, it works but not in the image folder.

    • @tina360
      @tina360 3 ปีที่แล้ว

      Me too, how do i fix this issue

    • @jonnymcshu9148
      @jonnymcshu9148 3 ปีที่แล้ว +1

      @@tina360 you can either create a SRCimages folder within src folder or you can, instead of setting background-image in css, just set the image in the JS file using the tag and that you can use the public image folder files. Hope that helps

    • @tina360
      @tina360 3 ปีที่แล้ว

      Sorry to bother you, I got this error message. ./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
      Error: Can't resolve '/images/img-2.jpg' in 'C:\Users\tina3\Desktop\React project
      eact-website-yt-1\src'

    • @jannoriko7465
      @jannoriko7465 3 ปีที่แล้ว

      Me

  • @mistersir3185
    @mistersir3185 3 ปีที่แล้ว +4

    can anybody please tell me why my cards aren't the same height? They are all so disproportional to one another...

    • @KevinOmyonga
      @KevinOmyonga 3 ปีที่แล้ว

      This is likely caused by the use of div tags at the base of your CardItem (CardItem.js function). Replace the with and you shall be alright.

  • @divyakumar1653
    @divyakumar1653 3 ปีที่แล้ว

    Excellent video Brian.. my first try in the reactjs and learnt a lot.. looking forward to many in the future

  • @benbenitez2945
    @benbenitez2945 ปีที่แล้ว

    loved! had to find a few thing because its outdated by that part of being a web dev thanks man!!!!

  • @harshitsingh618
    @harshitsingh618 4 ปีที่แล้ว +3

    I am getting this error: Can't resolve '/images/img-2.jpg' in 'C:\Users\HARSHIT SINGH\travel-blog\src'

    • @AsianSensationz
      @AsianSensationz 4 ปีที่แล้ว +1

      React has a special restriction when developed by create-react-app.
      This restriction ensures files used are within src/
      You have to either disable/eject this feature or move the image files within the src folder.

    • @khoadao2381
      @khoadao2381 4 ปีที่แล้ว +1

      i got the same problem. pls help !!!

    • @harshitsingh618
      @harshitsingh618 4 ปีที่แล้ว +1

      @@khoadao2381 I moved my images folder to src and now it does work

    • @khoadao2381
      @khoadao2381 4 ปีที่แล้ว +1

      thanks bro

    • @timevora1316
      @timevora1316 4 ปีที่แล้ว +1

      @@harshitsingh618 That does not work for me

  • @emrystld
    @emrystld 3 ปีที่แล้ว +5

    For anyone who's having an error with importing pictures:
    - Move the images and videos folder into src
    - Replace the background-image URLs with: url('./images/img-2.jpg');
    Hope that helps!

    • @Submersed24
      @Submersed24 3 ปีที่แล้ว

      hmm do you happen to know why it doesn't work in the public folder? moving img to source brings up a lot of connectivity problems for me

  • @prestonmoore7962
    @prestonmoore7962 3 ปีที่แล้ว +4

    How do you get the autofill when you type ".navbar-container" etc

    • @arthurlage5859
      @arthurlage5859 3 ปีที่แล้ว +2

      in the bottom right corner of vscode, there will be a little text "javascript", click on it and write react javascript in the input that will appear in the top. Press enter and now the code will recognize .navbar-container

    • @Submersed24
      @Submersed24 3 ปีที่แล้ว

      @@arthurlage5859 dude thanks... saved me sooo much time

  • @honamwong563
    @honamwong563 2 ปีที่แล้ว

    in case anyone wondering, Switch in react-route-dom is now Routes

  • @skyland220
    @skyland220 3 ปีที่แล้ว

    After learning ReactJs, as a beginner this is very helpful to me
    great project for beginner thanks dear ?

  • @ColombianoenPolonia
    @ColombianoenPolonia 4 ปีที่แล้ว +6

    I want to ask you some: I Noob in React JS, how I can to lean React JS fast?

    • @briandesign
      @briandesign  4 ปีที่แล้ว +16

      just gotta code all day and build projects

    • @ColombianoenPolonia
      @ColombianoenPolonia 4 ปีที่แล้ว

      @@briandesign Thanks y

    • @sumankundu7295
      @sumankundu7295 3 ปีที่แล้ว

      @@briandesign how can I get projects on React as I am noob in React, please guide me

  • @anontough6907
    @anontough6907 2 ปีที่แล้ว +10

    omg, beware at 7:50, in the Narbar.css in the @media he didn't repositioned the justify-content to start.
    it really is majjor, otherwise you mobile navbar look like shit if you leave it with the actual css.
    remember
    Put justify-content start in nav-menu in @media in the Navbar.css file.
    Thx me later.

    • @felipeklopper5173
      @felipeklopper5173 2 ปีที่แล้ว +1

      thank you so much!!! i was trying to fix this but didn't know how. i changed the height:80vh to 60hv but it was not that beautiful, looked like a trash job.
      thank you so much again

    • @yakisobro
      @yakisobro 2 ปีที่แล้ว +1

      You're a lifesaver man, so glad I read your comment. I've been on it for a couple hours already and it was bugging me out

    • @chandrakant6283
      @chandrakant6283 2 ปีที่แล้ว

      Thanx man, immediately noticed it along with a couple other changes.

    • @siowjerhan
      @siowjerhan 2 ปีที่แล้ว

      this is the comment i was looking for!

    • @arparthur
      @arparthur 2 ปีที่แล้ว

      thank you very much, man.