How to use bootstrap with reactjs

Question

I'm a newbie in React.js and since I began to read documents and tutorials, I am not sure how does Bootstrap work with React.js.

I saw a couple of npm packages such as reactstrap or react-bootstrap, however, I don't get it. The HTML code comes from a method that returns a piece of HTML (like this):

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

If I'm right...

So, my question is either:

Should I add the <link/> or <script/> of Bootstrap into index.html, either into body or into header?

or

Do I have to include Bootstrap from my App.js file and use it from a method?

PS: I am developing for years now but I never did any Javascript/HTML/CSS web, so if you have any advice, thanks in advance!

I need to use the logic of Bootstrap grid in order to realize an HCI

Thanks for any help

all you need is to add Bootstrap in react right? if so you need to add css cdn in `index.html` — Dhaval Jardosh, Dec 10 '17 at 21:54
But if I add from my index.html, how to use it from the js side? — Emixam23, Dec 10 '17 at 22:59
Future readers using Bootstrap 5 https://stackoverflow.com/questions/53941329/ — Carol Skelly, May 02 '23 at 17:41

Dhaval Jardosh · Accepted Answer · 2017-12-12T14:40:22.437

To answer your question, both of your suggestions on your questions are correct. You can do it either way.

Include bootstrap CDN in your index.html
You can add bootstrap packages such as React-Bootstrap using npm/yarn and import required components into you App.js

If you do it first way all you need to do is add your Bootstrap CDN in index.html and when you access your class in Javascript, it will be working fine

NOTE: While accessing class in react use className and not class

Here is an example of how you add CDN in your index.html

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return ( 
    <div>
      <form onSubmit = {this.handleSubmit} >
        <label>
          Name:
        </label> 
        <input type = "text" className="form-control"
          value = {this.state.value}
          onChange = {this.handleChange}/> 
        <input type = "submit"
          value = "Submit" className="btn btn-primary"/>
     </form> 
   </div>
    );
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div id='root'></div>

EDIT:- Assuming you installed React according to Official Installation

Use the following file structure

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>        
    <!-- And then your bundled js -->
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/app'; //Make sure it's the path to your App.js

ReactDOM.render(
    <App />
  , document.querySelector('.container'));

src/components/app.js

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <form onSubmit = {this.handleSubmit} >
          <label>
            Name:
          </label> 
          <input type = "text" className="form-control"
            value = {this.state.value}
            onChange = {this.handleChange}/> 
          <input type = "submit"
          value = "Submit" className="btn btn-primary"/>
        </form> 
      </div>
    );
  }
}

Check this, it should work.

Can you just specify where you put the code (exactly)? I put the first part into `App.js` and the second one into `intel.html`'s body and, the design doesn't seem like yours :/ — Emixam23, Dec 12 '17 at 07:42
How have you installed react? If it's according to the official documentation , then you add 1st part in `App.js` and 2nd in `index.html`. But you will need to figure out as you might need to do some changes in `index.js`. Better if you can put your code on github and I can see it and make some necessary changes to it. — Dhaval Jardosh, Dec 12 '17 at 11:32
@DhavalJardosh, Hi Dhaval, I just wanted to ask, which way should we use in order to use Bootstrap in React project. Is it true that we need to use Bootstrap cdn during development but during production we need to use bootstrap package installed in React project. Please can you give your professional advice. Thank you. Peace be with you:) — Dickens, Sep 24 '19 at 04:38
@Dickens, hey sorry was preoccupied with something. You can use the CDN or reference the downloaded Bootstrap CSS and JS file in production. Bootstrap is backed by Twitter and hence there are fewer chances of them deprecating bootstrap CDN in the near future, but if you want to be safe you can download the packages or as I mentioned in the answer as well use `react-bootstrap` — Dhaval Jardosh, Sep 24 '19 at 17:26
@DhavalJardosh, thank you Dhaval for your kind explanation:D. Dhaval, if you were in my shoes, for real projects would you download bootstrap package rather than linking CDN?:). I just kindly want to know which way you would use personally according to your experience — Dickens, Sep 24 '19 at 19:28
@DhavalJardosh Is there any difference between React Bootstrap and the vanilla bootstrap in Javascript? Also, do I include the import bootstrap in `index.js` or `App.js`? — Daredevil, Nov 02 '19 at 09:34
React Bootstrap is more component-based, so they provide you with components like ` — Dhaval Jardosh, Nov 02 '19 at 09:50

How to use bootstrap with reactjs

1 Answers1

Linked

Related