How to install and using Bootstrap 5 in ReactJS Project 👨‍💻💯

hi guys welcome to Patrick Pan channel in this video I'm gonna show you how to install bootstrap 5 in react.js Project alright let's get started okay first of all you need to install a react.js project so I'm gonna using the VJs okay open your terminal and then I'm gonna CD to my desktop and then I'm gonna use this command npm create with at latest okay hit enter Then create your project name I'm gonna use um react bootstrap okay hit enter and then select a framework so I'm gonna using the react framework and select a variant I'm going to use uh JavaScript okay hit enter then you need to CD into your react bootstrap folder okay I'm gonna see the react bootstrap hit enter and then using this command npmi or npm install to install the dependencies that we need okay hit enter and this will take just a second okay all right and then I'm gonna open my project in vs code and what you need to do open your terminal in vs code okay go to view and terminal so when you want to install bootstrap file in react.js Project you need two things so first you need to install the react bootstrap and bootstrap okay all right let's go back to vs code and then using this command npmi bootstrap and react bootstrap okay just two packages and hit enter after edit these packages so you can use the bootstrap now but second thing that you need to do is we need to add this code to our main.jsx okay let's go to Arc folder and go to main.jsic and then you need to copy this code so this is we import the bootstrap from the bootstrap folder disk CSS and then we using this file bootstrap.min.z okay and that's it you can start using your bootstrap in your react application let me show you we need to run our project by using npm run Dev okay and then go to this localhost part 5174 okay and then I'm gonna go back to um react bootstrap document and go to components okay when you want to use this component you can import bootstrap component like this okay so let me show you like uh if I want to using this alert I can import alert by using this code okay import alert from react bootstrap and select the component name okay you can using the alert component okay but you can destructuring this by using um curvy bracelet like this and you can remove this name like this and now you can using this alert component okay let's see if we use this component so you can using like a normal HTML tag like this okay and then you can give it a variant I want this alert to be um a success okay and then I'm gonna type some text here this is Success alert like this okay hit save and go back to our Crow as you can see right there we got this is Success alert and this is our alert okay you can using a lot of components here as you guys want like uh buttons before you using don't forget to import this component like this okay I'm gonna import button from react bootstrap okay and then I'm gonna use button and we can give it a variant primary okay click me like this hit save go back to our Chrome and as you can see we got our button there okay and it's very cool alright guys this is how you can use the booster file in your react yes project I hope this video is helpful don't forget to like And subscribe and see you guys soon in the next video

Channel: Patrick Pan

Views: 2,735

Keywords:

Id: pgB9x917ngE

Length: 4min 55sec (295 seconds)

Published: Mon May 01 2023