Bootstrap 5 & React - super easy and fast tutorial

okay so before we start i do assume that you have npm installed if you don't have it please check the description down below um where you're going to find the link to tutorial how to install npm i will be actually using npx which comes with npm since version 5. so if you're using npm version 5 or above you should also have npx installed so we're going to start with npx create react app and we're going to provide a app name so let's say bs 5 react now i'm going to hit enter and wait until it will create the app it may take some time now when installation is over we can navigate to our new folder so bcd bs5 react and we could start our application by typing yarn start but before we started let's add bootstrap so what we're going to do we're going to type instead yarn add bootstrap and react bootstrap and i'll explain you in a second why we have to add two packages let's wait for installation to complete okay so now let's start our app by typing yarn start this will compile our project and open this in a new window now let's navigate to the source file and go to app.js now we will import new component so let's import a button import button from react bootstrap slash button okay now let's add this button for example here button this is button and let's save the file and now we can see that our button is working but it doesn't look like a bootstrap button and the reason behind it is because react bootstrap comes only with js and doesn't have any css style so that's why we installed also a bootstrap package which contains css what we have to do now we have to import also the css so let's do import bootstrap this css bootstrap min css file now our button looks like a bootstrap button now one important note for you before you start using bootstrap react is that there are two ways of importing your component and you can see that on the documentation so this is uh one option and this is the option number two now why this is less ideally is because it this will import the entire library and we'll use just the button while this import only the button code so if you do it like this although it's more handy because you because you can also use a card nav and specify multiple uh items um in a single line it will also import the entire library so your your library will basically be much more heavy so if you want to do it you can still uh do it but keep in mind what's the consequences and instead obviously it's better to do be a little bit to be a little bit picky cherry and import certain component from a specific place of the library to make sure that we are importing only what we need i hope you enjoyed this video if you want to see our another tutorial where we are actually building the entire page using react and bootstrap don't forget to subscribe our channel thank you for watching and keep coding

Channel: Keep coding

Views: 134,402

Keywords: react, mdb, bootstrap5, bootstrap, mdb react, react tutorial, tutorial, bootstrap tutorial, webdev, developer react, react developer

Id: xdXd8BJwJ-U

Length: 4min 1sec (241 seconds)

Published: Tue Oct 26 2021