Menu
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:
<link/> or <script/> of Bootstrap into index.html, either into body or into header?or
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
626
To answer your question, both of your suggestions on your questions are correct. You can do it either way.
bootstrap CDN in your index.htmlnpm/yarn and import required components into you App.jsIf 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
classNameand notclass
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.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With