In the world of frontend development, React and Bootstrap is among the top choices. They are essential for establishing a strong and professional website that have fast and scalable web apps and reusable UI components. In this article, we will guide you on how to use React with Bootstrap. Before we proceed to the process, let us first know about React and Bootstrap.
Bootstrap
Unlike React, Bootstrap is considered a full-fledged CSS, HTML, and JavaScript framework. It can help you establish a fully functional web app. It has a customization feature that allows you to make web apps more manageable. Meanwhile, React can offer React DOM that makes React faster.
React
React is an open-source JavaScript library for making user interfaces. Take note that React is not a framework. It is essential to control your app’s flow.
Now that you have learned about Bootstrap and React let us now dive in on using React with Bootstrap.
Using React with Bootstrap
The following is a step-by-step guide on how to use React with Bootstrap.
1. Place Bootstrap in HTML file in a public folder that will serve as the root of your React app
In placing Bootstrap in React through HTML file, you can copy the needed tags from the official website of Bootstrap and select a single tag (bundled one or complete three tags which include Bootstrap CSS link tag, Bootstrap JS script tag and Popper JS script tag,
Place Bootstrap CSS in <head> tag of the HTML file:
<head>
...
<link href=“https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-BmbxuPwQa21c/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl” crossorigin=”anonymous”>
<head>
Take note that you can also use the Bootstrap CSS along without Popper JS and JavaScript.
Then, place Bootstrap JS to your code. You can decide between separated or bundled.
<head>
...
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
There we go, you successfully installed Bootstrap in your React app.
2. Include Bootstrap CSS and JavaScript tags inside JSX directly
The next step to use Bootstrap in React is to place it in your code as JSX tags. Just like how you include Bootstrap JavaScript and CSS using <script> and <link> tags in HTML, you also have access to JSX tags. Meanwhile, you can’t access <head> tag in JSX.
The solution is to use the required or import function. You can treat CSS like a module in React.
You can add Bootstrap CSS using require or import function.
import “./ bootstrap.min.css”
// or
require (“./bootstrap.min.css”)
Once you installed React with a package like Create React App, the feature including CSS was already preconfigured for you. If not, you can do that manually in your webpack.config.js file or other bundlers.
You can now place Bootstrap JS as <script> tag at the end of JSX wrapper:
…
const App = ( ) => (
<div>
…
<script src="https://cdn.jsdelivr.net/npm/[email protected] beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossOrigin="anonymous"></script>
</div>
)
Bootstrap JS and CSS tags are included as HTML tags. So, check the properties and change them in camelCase.
3. Use React Bootstrap Library
Incorporating React with Bootstrap is now common among developers. You can use the React Bootstrap library. The good thing about React Bootstrap is it can offer a way to place the elements of Bootstrap into reusable JavaScript functions.
You don’t need to encounter non-semantic <div> elements. Instead, you can concentrate on building your apps without tracking the piled-up rows, containers, and other non-semantic elements.
The following command allows you to use React Bootstrap library in your React app.
The first thing to do is to add “react-bootstrap” and “bootstrap” packages to your app:
$ npm install react - bootstrap bootstrap
If you use Yarn:
$ yarn add react-bootstrap bootstrap
If you want to use Bootstrap elements in the library, you can import or require them individually as necessary.
import Button from “react-bootstrap/ Button”
// or
Import { Button } from “react-bootstrap”
The app can run faster since you don’t need to include the entire library to your code.
You can no use React elements with the full function of the Bootstrap framework.
const App = ( ) => (
<div>
<Button>Button</Button>
<div>
)
There we go, so that was the method on how to use React with Bootstrap. By following these steps, you can access the benefits of the integration of Bootstrap and React.
Conclusion
To sum it up, integration of React with Bootstrap can be beneficial in making processes for your project. In addition, it is also a good idea to use Bootstrap WYSIWYG editor to make more customization with your project.
With this post, we hope that you already learned how to use React with Bootstrap.
