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
– Dhaval Jardosh, Commented Dec 10, 2017 at 21:54
But if I add from my index.html, how to use it from the js side? — Emixam23
– Emixam23, Commented Dec 10, 2017 at 22:59
Future readers using Bootstrap 5 stackoverflow.com/questions/53941329 — Carol Skelly
– Carol Skelly, Commented May 2, 2023 at 17:41

Dhaval Jardosh · Accepted Answer · 2017-12-12 14:40:22Z

6

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.

edited Dec 12, 2017 at 14:40

answered Dec 10, 2017 at 23:55

Dhaval Jardosh

7,3075 gold badges35 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Emixam23 Over a year ago

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 :/

Dhaval Jardosh Over a year ago

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.

Dickens Over a year ago

@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:)

Dhaval Jardosh Over a year ago

@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 Over a year ago

I would download the packages and use it rather than CDN :)

|

Collectives™ on Stack Overflow

How to use bootstrap with reactjs

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related