Skip to content Skip to sidebar Skip to footer
Home / Bootstrap 4 / Html / Reactjs

How To Use Bootstrap With Reactjs

Post a Comment
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 o

Solution 1:

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

  1. Include bootstrap CDN in your index.html
  2. 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

classAppextendsReact.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><formonSubmit = {this.handleSubmit} ><label>
          Name:
        </label><inputtype = "text"className="form-control"value = {this.state.value}onChange = {this.handleChange}/><inputtype = "submit"value = "Submit"className="btn btn-primary"/></form></div>
    );
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));
<scriptcrossoriginsrc="https://unpkg.com/react@16/umd/react.development.js"></script><scriptcrossoriginsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"><divid='root'></div>

EDIT:- Assuming you installed React according to Official Installation

Use the following file structure

index.html

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

index.js

importReactfrom'react';
importReactDOM from'react-dom';

importAppfrom'./components/app'; //Make sure it's the path to your App.jsReactDOM.render(
    <App />
  , document.querySelector('.container'));

src/components/app.js

importReact, { Component } from'react';

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

Check this, it should work.

Post a Comment for "How To Use Bootstrap With Reactjs"