How To Install Bootstrap In React Project

How to Set up up a React Bootstrap App

Gaurav Singhal

Front Web Development

Introduction

React-Bootstrap is a component-based library that provides native Bootstrap components as pure React components. Instead of utilizing JavaScript source and plugins from the CDN, it converts all JavaScript to React and bundles all components together. It's compatible with all kinds of Bootstrap themes to give a consistent appearance and maintain homogeneity in your app. In this guide, you'll larn how to easily integrate React Bootstrap in any React app by setting upwardly a React Bootstrap app in just a few minutes.

Creating an Empty React Projection

Navigate to the directory where you want to store your projection locally and create a new project using create-react-app by running the following command:

                                      i                    npx create-react-app react-bootstrap-app                                  

shell

Installing react-bootstrap

To consume react-bootstrap modules, install two packages: react-bootstrap and Bootstrap, by running the following command:

                                      1                    npm                                                            install                                          react-bootstrap bootstrap                                  

shell

The kickoff package will install all the react-bootstrap core components and place them within your React's node modules binder. From at that place, you tin hands import any component you want to use.

The Bootstrap package contains all the Bootstrap styles to style your components and other things, such as layouts, utilities, typography, etc.

Cleaning up the Starter Template

Remove the logo, App.css , and all their imports from App.js . Clean out the starter template inside the App component. Your App.js should look like this:

                                      1                    import                                                            React                                                            from                                                            'react'                    ;                                                            2                                        import                                                            './App.css'                    ;                                                            3                    4                                        office                                                            App                    (                    )                                                            {                                                            v                                                            render                    (                                                            half-dozen                                                            <                    div                                                            className                    =                    "                    App                    "                    >                                                            7                                                            </                    div                    >                                                            8                                                            )                                                            nine                                        }                                                            x                    eleven                                        export                                                            default                                                            App                    ;                                  

jsx

Note: Sometimes removing App.css might state you an error. In such cases, instead of deleting the App.css, keep information technology empty, or if you accept already deleted it, create a bare CSS file under the same name in the root directory.

Setting upward a Development Server

Inside the root directory, run :

This will spin up a local evolution server (usually on port 3000) and yous can see all your changes live in the browser.

Importing a Global Stylesheet

To apply Bootstrap styles in your component, you must import them on the top.

                                      1                    import                                                            'bootstrap/dist/css/bootstrap.min.css'                    ;                                  

jsx

This lets y'all apply all your regular Bootstrap classes for layout, utilities, typography, colors, etc. and is the CDN equivalent of calculation the following line inside your alphabetize.html file :

                                      1                    <                    link                                                            2                                                            rel                    =                    "                    stylesheet                    "                                                            3                                                            href                    =                    "                    https://maxcdn.bootstrapcdn.com/bootstrap/4.v.0/css/bootstrap.min.css                    "                                                            4                                                            integrity                    =                    "                    sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk                    "                                                            v                                                            crossorigin                    =                    "                    anonymous                    "                                                            6                                        />                                  

html

Reasons react-bootstrap doesn't include default bootstrap styles with their components:

It makes the entire library lightweight without any pre-rendering issues

It offers more customizability in terms of designing and styling react-bootstrap components

The best and most efficient way to include Bootstrap styles is by always using a CDN. This is because a CDN loads much faster than your app due to caching in browsers, so information technology avoids a lagging user feel. Use the first method but when you want to apply Bootstrap styles in a few specific components merely.

Using Bootstrap SASS

You can too include Bootstrap's source SASS files in your chief SASS file and import information technology inside your component. Just include the following line inside a .scss file:

                                      1                    @import                                                            "~bootstrap/scss/bootstrap"                    ;                                  

scss

and the post-obit inside your component (ex App.js file) :

Importing Components

Permit's look at a quick and simple example that shows how to import the desired components and render them on the DOM.

To use the Button component, simply import information technology from react-bootstrap in either of these means :

                                      1                    import                                                            Push button                                                            from                                                            'react-bootstrap/Button'                    ;                                                            two                                        // OR                                                            3                                        import                                                            {                                                            Push button                                                            }                                                            from                                                            'react-bootstrap'                    ;                                  

jsx

Then render this component inside App.js :

                                      i                    ...                                                            2                                        <                    Button                    >                    Click Me!                    </                    Button                    >                                                            3                                        ...                                  

jsx

Customizing Components

You lot tin can easily customize any Bootstrap theme that you want to employ in your app or rewrite the Bootstrap classes and variables appropriately.

Create a custom SASS file and include the post-obit block of code :

                                      i                    //custom-style.scss                                                                                2                                        $theme-colors                    :                                                            (                                                            3                                                            "info"                    :                                                            blueviolet                    ,                                                            4                                                            "danger"                    :                                                            orangered                                                            5                                        )                    ;                                  

scss

Then import Bootstrap to set up these changes :

                                      ane                    @import                                                            "~bootstrap/scss/bootstrap"                    ;                                  

scss

And import information technology into any component like a regular SASS file:

                                      1                    @                    import                                                            "custom-style"                    ;                                  

jsx

Determination

Setting upwardly a React Bootstrap app is fairly simple and doesn't crave whatever complex installations. React Bootstrap'south official docs are precise, leaving no room for doubtfulness or confusion. Using a component-based UI library like React Bootstrap reduces your development time so you can focus more on implementing complex event-driven features in your app.

Source: https://www.pluralsight.com/guides/how-to-set-up-a-react-bootstrap-app

Posted by: bowmanearthey.blogspot.com

Share this post