How to Use React with React Bootstrap?
Over the last several years, the popularity of single-page applications has resulted in a flood of JavaScript frameworks, such as Angular, React, Vue.js, Ember, and many more. As a result, using a DOM library like jQuery to construct web apps is no longer necessary. This has corresponded with the appearance of CSS frameworks aimed at assisting developers in the creation of responsive web apps.
Bootstrap, Foundation, and Bulma are all responsive (mobile-first) CSS frameworks with extensive features and built-in utilities, and if you're a frontend developer, you've almost likely used or heard about them. If React is the most popular JavaScript framework for creating online applications, Bootstrap is the most popular CSS framework, with millions of websites using it.We'll go through how to use React and Bootstrap, and how to integrate Bootstrap to 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
The simplest approach to include Bootstrap in your React app is to use BootstrapCDN. There are no downloads or installations necessary. Simply include a link in the head area of your app, as demonstrated in the example below. If you want to use the JavaScript components that come with Bootstrap, you'll need to add the following Script> tags near the conclusion of your pages, right before the closing /body> tag.
For its JavaScript components, Bootstrap 4 uses jQuery and Popper.js. We utilized the compact version of jQuery in the preceding snippet, but the full version is also available. These code snippets will often be placed on the index page of your React project.
Import Bootstrap as a Dependency in React
This is the ideal method for including Bootstrap in your React application if you're using a build tool or a module bundler like webpack. Your app will require Bootstrap to be installed as a dependency. After you've installed Bootstrap, be sure to include it in your app's entry JavaScript framwork code. If anyone is using the create-react-app, src/index.js should be the file. You'll notice that the first dependent is the Bootstrap minified CSS.
Using the built-in Bootstrap classes in our React app components is now possible. However, if jquery and popper.js aren't already installed, you'll need to install them before you can use Bootstrap's JavaScript components in your project. Then, as demonstrated in the following sample, make additional changes to the src/index.js file to add the new dependencies.
Imports for $ and Popper were added here. The Bootstrap JavaScript minified bundle file was also imported. In your React app, you can now use Bootstrap JavaScript components.
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:
- react-bootstrap
- reactstrap
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.
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.
With Bootstrap, You Can Make a React App
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.
.png)
.png)
Comments
Post a Comment