ためのHCI
感謝を実現するために、ブートストラップグリッドのロジックを使用する必要があります。どちらにしてもかまいません。
- はで
bootstrap CDNを含め、あなたのindex.html あなたはあなたに
npm/
yarnとインポートに必要なコンポーネントを使用して、このような
React-Bootstrapとしてブートストラップパッケージを追加することができます
App.js
あなたはそれが最初の方法あなたがする必要があるすべてを行う場合Bootstrap CDNをindex.htmlに追加してください.JavaScriptでクラスにアクセスすると、正常に動作します。
注：でクラスにアクセスしながらclassNameを使用して反応していない。ここ
classがあなたの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/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/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>
にCDNを追加する方法の例があります
EDIT： - インストールしたと仮定がOfficial Installation
に応じ
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 /コンポーネント/
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>
);
}
}
をapp.jsこれをチェックし、それが動作するはずです。
あなたが必要とするのは、ブートストラップを反応に追加することだけです。もしそうなら、あなたは 'index.html'にcss cdnを追加する必要があります –
しかし、私はindex.htmlからjs側からどのように使用するのですか？ – Emixam23