• Thursday , 6 August 2020

Build a Website with React, React-Bootstrap and React-Router

Code Canyon
https://i.ytimg.com/vi/jgVkR5EKI68/hqdefault.jpg



Slack Channel – https://slack-code-life.herokuapp.com/

Please LIKE, SHARE or COMMENT if you appreciate this video! It helps others find the content.

In this video, I use React, React-Bootstrap and React-Router to quickly build a website. I have another tutorial where I build a website with React and Bootstrap 4 but this time I wanted to use the React-Bootstrap library that many people have been asking about. Please leave a comment if you have any questions.

Github Code – https://github.com/MyNameIsURL/react-bootstrap-website

Original source

3d Ocean

Related Posts

49 Comments

  1. Ragil Pratama
    January 19, 2019 at 13:52

    Goog job!

  2. bobobo boboboo
    January 19, 2019 at 13:52

    thank you for video its great. Is it possible to do a another video on customising more react-bootstrap components? Just like you did the navbar. I am finding it so tricky to change style without turning my css into a bunch of crazy !important and messing up my specificity =/

  3. ajs kjub
    January 19, 2019 at 13:52

    Nice video, I am so thanful..

    ps. Does anybody know how he did this, what is shortcut for that typing on multiple places

  4. Cruzer
    January 19, 2019 at 13:52

    6:08 Just use " shift + ctrl + F " to atomatically align code/text in VS code

  5. Anene Emmanue Temofe
    January 19, 2019 at 13:52

    Nice work

  6. Fay schouten
    January 19, 2019 at 13:52

    Thanks for the tutorial! 😀

  7. David K
    January 19, 2019 at 13:52

    Just getting into react, cheers buddy for the awesome video!
    very easy to follow along

  8. hemant jat
    January 19, 2019 at 13:52

    how to create register from in react js and connection with mysql database plzz help

  9. Code Life
    January 19, 2019 at 13:52

    Don't forget to join my free slack channel where I answer questions! https://slack-code-life.herokuapp.com/

  10. bobobo boboboo
    January 19, 2019 at 13:52

    can we do d-sm-none type stuff in reactbootstrap? I couldn't find documentation on it. eg lets for the jumboron we only wanted the h2 and not the p.lead text on small screens. In bootstrap 4 you can do d-md-none , how do we do that in v3?

    Media queries only way right?

  11. bobobo boboboo
    January 19, 2019 at 13:52

    please mooooar

  12. Justin Olson
    January 19, 2019 at 13:52

    That 'pwerson' and not saving the CSS was killing my OCD. Good stuff overall tho. 🙂

  13. Marion Meunier
    January 19, 2019 at 13:52

    Great video! Thank you for this tutorial 🙂

  14. Blank Blank
    January 19, 2019 at 13:52

    Subscribed!

  15. Blank Blank
    January 19, 2019 at 13:52

    Gotta say…
    This was awesome!
    Keep making stuff like this!

  16. Mani Kandan
    January 19, 2019 at 13:52

    How to deploy react multi page webapp to server using filezilla? Can any one help me?

  17. bhzad shreef
    January 19, 2019 at 13:52

    very gooooooooooood
    i want more example with data base

  18. Gilberto Toledo
    January 19, 2019 at 13:52

    This is an awesome tutorial. It's simple and straight to the point, you tell me exactly what I want to know. Is there any place we can donate? I'll gladly buy you a beer mate.

  19. Meloik
    January 19, 2019 at 13:52

    Hi Brice.Sorry, I have a warning in the console. Could you tell us how to fix this? index.js:2178 Warning: Invalid value for prop `component` on <a> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://fb.me/react-attribute-behavior
    in a (created by SafeAnchor)
    in SafeAnchor (created by NavItem)
    in li (created by NavItem)
    in NavItem (at CustomNavbar.jsx:18)
    in ul (created by Nav)
    in Nav (at CustomNavbar.jsx:17)
    in div (created by NavbarCollapse)
    in Transition (created by Collapse)
    in Collapse (created by NavbarCollapse)
    in NavbarCollapse (at CustomNavbar.jsx:16)
    in div (created by Grid)
    in Grid (created by Navbar)
    in nav (created by Navbar)
    in Navbar (created by Uncontrolled(Navbar))
    in Uncontrolled(Navbar) (at CustomNavbar.jsx:9)
    in CustomNavbar (at App.js:15)
    in div (at App.js:14)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:13)
    in App (at src/index.js:7)

  20. Awet Tsegazeab
    January 19, 2019 at 13:52

    Thank you. I have learned from it. I like it also , it looks natural. keep it up.

  21. Rohan Gorajia
    January 19, 2019 at 13:52

    Hello! Great tutorial, just two questions. What is the editor that you are using and how did you install all the React at the beginning of the video? Thanks!

  22. Meloik
    January 19, 2019 at 13:52

    Hello from Russia Brice.Thank you for your work. I have a question, why did you rename the JS in JSX files at the beginning???

  23. InJimess Bel
    January 19, 2019 at 13:52

    Very Helpful, Thanks .
    I want to ask you, if I want to make the website SAP. what do I have to change ?

  24. Imran Rafiq Rather
    January 19, 2019 at 13:52

    very helpful video.Thank You very much.

  25. Beeti Sushruth
    January 19, 2019 at 13:52

    <Navbar /> doesn't work from me. It doesn't show the navbar on homepage. 21:40 can anyone help please?

  26. Phong Phung
    January 19, 2019 at 13:52

    Thank man! Awesome Tutorial and i learn a lot.

  27. Chris Hurr
    January 19, 2019 at 13:52

    I was your 1000th subscriber! Congrats and thank you for the awesome tutorial, keep it up!

  28. Kunal Durne
    January 19, 2019 at 13:52

    i can say that… i dont have enough word to explain how awesome video is this!!!

  29. Phantom KE
    January 19, 2019 at 13:52

    Just WOW!! Really impresive.

  30. Willie Smalls
    January 19, 2019 at 13:52

    Excellent! Thank you for this! I needed this for a project.

  31. Emmanuel Gatica
    January 19, 2019 at 13:52

    I've been trying to follow along with your tutorials but the first command that you use to start your project isn't found on my commandline

  32. Yousuf Ameeruddin
    January 19, 2019 at 13:52

    my <Image/> element isnt working why ?

  33. David Moradi
    January 19, 2019 at 13:52

    Finally a tutorial that starts fresh and does everything step by step.
    Way too many tutorials just jump into it with pre-existing code

  34. Abraham Martinez
    January 19, 2019 at 13:52

    do you have the github for this project ????

  35. Martialito
    January 19, 2019 at 13:52

    What theme were you using when you recorded this tutorial ?

  36. Ian Concepcion
    January 19, 2019 at 13:52

    Thanks dude!!

  37. Manuel Morales
    January 19, 2019 at 13:52

    create admin panel with react! please bro

  38. Zihan Chen
    January 19, 2019 at 13:52

    pretty good tutorial

  39. Gonzalo G
    January 19, 2019 at 13:52

    Thank you!

  40. Vinith Raj
    January 19, 2019 at 13:52

    This video was very useful but I got stuck in place of using React Router (i.e.,) While u enter localhost/about on the search bar .. it gives you the content of About file whereas for me it says Cannot GET/about . This problem exists for all the pages that I try to navigate. It is getting navigated from a page by clicking a button but not gets navigated while tried from the URL entering bar. Help me in fixing this issue ASAP

  41. Bhagirathsinh Zala
    January 19, 2019 at 13:52

    Thank you from India!

  42. Sergey Vedmedev
    January 19, 2019 at 13:52

    Hey, i'm try to install react-bootstrap into folder named react-bootstrap and i got an error, that say: i cannot instal package in a folder with same name

  43. Cadiboy
    January 19, 2019 at 13:52

    Do you know how to change the font? I try to change the font on CSS Body section but it seems to be overriden by react-bootstrap.

  44. Vipul Hirani
    January 19, 2019 at 13:52

    Thanks for video.
    Create one more video with server-side rendering with same example.

  45. DagicCross
    January 19, 2019 at 13:52

    good stuff

  46. Thomas Erickson
    January 19, 2019 at 13:52

    Awesome video! I'm having a problem though with chrome not being able to access the cdn css files from localhost. it's giving me a cors error so my site doesn't have css on chrome. do you know how i could solve this?

  47. manoj sharma
    January 19, 2019 at 13:52

    awesome

  48. canis major
    January 19, 2019 at 13:52

    How do you deploy it now that it is finished? Cheers!

  49. Raj Chudasama
    January 19, 2019 at 13:52

    would this be a single page app?

Leave A Comment

You must be logged in to post a comment.