Uses of Bootstrap in React App for Beginners
Hey mate! I know you are looking for something, which is common for every beginner out there. Even me, when I have started to use react this is one of the concerns for me. enough talk let’s do it:-
1. BootstrapCDN: I think the easiest way to use bootstrap for the first time in your React app is to use the CDN link. I know, I know it's a bit confusing where you will put that CDN link just put it to your React app inside the Public folder, go to the index.html file put the link in the head tag. I have added inside the index.html into the head tag the bootstrap CDN after the title tag.
Simply put the CDN
<link>into the<head>section of your app, as shown in the following snippet.
If you want to use the JavaScript components that comes with Bootstrap, you need to place the following
<script>tags near the end of your pages, right before the closing</body>tag, to enable them.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>Congrats! Now you can start using the built-in Bootstrap classes and JavaScript components in your React app components. Ta — da — :)
2. Another way to do it and as a professional to install bootstrap in your React app is a more convenient and more powerful way. You will need to install Bootstrap as a dependency for your app.
Installation
The best way to use Bootstrap in React is via the npm package which you can install with npm or yarn as on your uses method.
npm install react-bootstrap bootstrapOr if you are using yarn
yarn install react-bootstrap bootstrapAfter successful installation you have Bootstrap, go ahead and include it in your app’s entry JavaScript file. If you are used to create-react-app, this should be your src/index.js file.
import 'bootstrap/dist/css/bootstrap.min.css';
Importing Components
You should import individual components like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client.
import Button from 'react-bootstrap/Button';
// or less like
import { Button } from 'react-bootstrap';
Conclusion
WOW! Congratulation you just learned the way of using Bootstrap in your React apps. Wish you good luck with your work.
Thank you for your time, hope it will help you with your project. See you I my next article.
