How To Use React With React Bootstrap?
In this post, we'll go through how to use React and Bootstrap, integrate Bootstrap into a React project, and outline of how to develop a React app using Bootstrap.
Join the DZone community and get the full member experience.Join For Free
We'll go through how to use React and Bootstrap, and how to integrate Bootstrap into a React project. We’ll also be discussing how to install React Bootstrap packages like react-bootstrap (with examples), and outlining how to develop a React app using Bootstrap in this article.
Incorporating Bootstrap in React
The following are the three most typical approaches to include Bootstrap in React:
- Make use of BootstrapCDN.
- Import Bootstrap as a dependency in React.
- Install a package for React Bootstrap (such as bootstrap-react or reactstrap)
Make Use of BootstrapCDN
Import Bootstrap as a Dependency in React
Install a Package for React Bootstrap
The final option for incorporating Bootstrap into a React app is to utilize a package that includes rebuilt Bootstrap components that can be used as React components. The following are the two most popular packages:
Both packages are excellent choices for using Bootstrap with React apps, but you don't have to use either of them. They have a lot of the same traits.
Using Bootstrap's Built-in Classes and Components
By applying the built-in classes to elements and components in your React app like any other class, you may use Bootstrap directly. To show how to use Bootstrap classes and components, let's create a basic theme switcher React component. To construct our theme switcher, use a dropdown component provided in Bootstrap, as illustrated in this sample. The size and color of the dropdown button are likewise controlled by the built-in button classes.
Start writing the code for the ThemeSwitcher component and make sure you've already set up a React application. With Bootstrap's dropdown component and a few built-in classes, you can create a simple theme switcher component. Firstly, use a theme attribute to build up the component's state and set it to null.
Then, in the component class, you need to implement two click event handlers for picking a theme and resetting the theme, respectively, resetTheme() and chooseTheme(). Render a split button dropdown menu with three themes in the render() method. Primary, Danger, and Success are the three words that come to mind. Each menu item has a click event handler that performs the desired action.
Notice how you can acquire the theme color class for both the dropdown buttons and the text by calling the theme to LowerCase(). If no theme is specified, you can use secondary as the default color. Therefore, Bootstrap's built-in classes and components can be utilized easily after being demonstrated in the above example.
Using React-Bootstrap to Rebuild Theme Switcher
To make the app, you will utilize the create-react-app command-line tool. For this, make sure the create-react-app utility is installed on your computer. Currently, react-bootstrap targets Bootstrap v3. However, work on supporting Bootstrap v4 is still ongoing. SplitButton and MenuItem are two components from the react-bootstrap package that you can refer to.
First, we used a theme attribute to build up the component's state and set it to null. Following that, we create a chooseTheme() click event handler for selecting or resetting a theme. We built some container styles in the render() method to help us accomplish horizontal and vertical centering because we're using Bootstrap 3.3.7.
The bsSize prop on the SplitButton component is used to specify the button size. Also, note how the themeClass parameter is passed to the bsStyle prop to dynamically modify the button color based on the state theme. Each MenuItem component's eventKey prop receives the theme name. This is also where the onSelect handler is set. chooseTheme() is a function that we defined earlier.
Properties used to set up the component’s state
- Theme property has been set to null.
- dropdownOpen was set to false by default. This property will be used by reactstrap's ButtonDropdown component to keep the dropdown's toggling state
Toggle the open state of the dropdown, as defined by the toggleDropdown() method. The ButtonDropdown component will also use this.
UncontrolledButtonDropdown is an uncontrolled component provided by reactstrap that does not require the is Open or toggle handler props to function. This can be used instead of ButtonDropdown in most circumstances.
The DropdownItem component is used to render each item in the dropdown menu. Notice how the size prop is used to specify the button size on the DropdownToggle component. Also observe how on both the Button and DropdownToggle components, the themeClass is sent to the color prop to dynamically change the button color based on the state's theme.
You can also use the chooseTheme() and resetTheme() handlers to set the onClick handler on each DropdownItem. Finally, change the src/index file.js. The Bootstrap minified CSS file is first imported. You also render your ThemeSwitcher component to the DOM after importing it. If you launch the app now with a yarn start or npm start, it should work.
React App With Bootstrap
Let's take this a step further and make an app with more features. We'll do our best to incorporate as many Bootstrap classes and components as possible. Because reactstrap supports Bootstrap 4, we'll also use it to integrate Bootstrap with React. To make the app, you'll utilize the create-react-app command-line tool. Make sure the create-react-app utility is installed on your computer.
As a dependency, install Axios. Axios is a promise-based HTTP client for Node.js and the browser. We'll be able to get posts from the BaconIpsum JSON API with it. To incorporate the Bootstrap minified CSS file, make a small change to the src/index.js file. Construct a Post component that renders a page post Set the post property to null to start the component's state.
When the component is installed, use Axios to get a random four-paragraph post from the BaconIpsum JSON API and change the state's post field. Finally, make changes to the src/App.js file.
Discussed above are a few different approaches to incorporate Bootstrap with your React projects. We have further outlined how to use react-bootstrap and reactstrap, two of the most popular React Bootstrap packages.
In this article, a few Bootstrap components like alert, badge, dropdown, navbar, nav, form, button, and card have been taken into consideration. Tables, modals, tooltips, carousel, jumbotron, pagination, tabs, and other Bootstrap components are still available for testing.
Published at DZone with permission of Jay Baer. See the original article here.
Opinions expressed by DZone contributors are their own.