如何在 reactjs 中使用引导程序 [英] How to use bootstrap with reactjs
问题描述
我是 React.js 的新手,自从我开始阅读文档和教程以来,我不确定 Bootstrap 如何与 React.js 一起工作.
我看到了几个 npm 包,例如 reactstrap
或 react-bootstrap
,但是,我不明白.HTML 代码来自一个返回一段 HTML 的方法(像这样):
class App 扩展 React.Component {构造函数(道具){超级(道具);this.state = {值:''};this.handleChange = this.handleChange.bind(this);this.handleSubmit = this.handleSubmit.bind(this);}句柄变化(事件){this.setState({value: event.target.value});}处理提交(事件){alert('提交了一个名字:' + this.state.value);event.preventDefault();}使成为() {返回 (<form onSubmit={this.handleSubmit}><标签>名称:<input type="text" value={this.state.value} onChange={this.handleChange}/>标签><input type="submit" value="Submit"/></表单>);}}
如果我是对的...
所以,我的问题是:
- 我应该将 Bootstrap 的
或
添加到 index.html 中,添加到正文或标题中?立>
或
- 我是否必须从我的
App.js
文件中包含 Bootstrap 并从方法中使用它?
PS:我已经开发多年了,但我从来没有做过任何 Javascript/HTML/CSS 网络,所以如果你有任何建议,提前致谢!
我需要使用Bootstrap grid的逻辑来实现HCI
感谢您的帮助
回答你的问题,你对你的问题的建议都是正确的.你可以用任何一种方式来做.
- 在您的
index.html
中包含 - 您可以使用
npm
React-Bootstrap>/yarn
并将所需的组件导入到您中App.js
bootstrap CDN
如果您首先这样做,您需要做的就是添加您的Bootstrap CDN 在 index.html
中,当您在 Javascript 中访问您的类时,它将正常工作
注意:在 React 中访问类时使用 className
而不是 class
以下是如何在 index.html
class App extends React.Component {构造函数(道具){超级(道具);this.state = {价值: ''};this.handleChange = this.handleChange.bind(this);this.handleSubmit = this.handleSubmit.bind(this);}句柄变化(事件){this.setState({值:事件.目标.值});}处理提交(事件){alert('提交了一个名字:' + this.state.value);event.preventDefault();}使成为() {返回 (<div><form onSubmit = {this.handleSubmit} ><标签>名称:标签><input type = "text" className="form-control"值 = {this.state.value}onChange = {this.handleChange}/><输入类型=提交"value = "Submit" className="btn btn-primary"/></表单>
);}}ReactDOM.render( < App/> , document.getElementById('root'));
<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>
-假设您根据 官方安装
安装了 React使用以下文件结构
index.html
<头><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><!-- 然后是你捆绑的 js -->头部><身体><div class="容器"></div><script src="/bundle.js"></script></html>
index.js
从'react'导入React;从 'react-dom' 导入 ReactDOM;从'./components/app'导入应用程序;//确保它是你的 App.js 的路径ReactDOM.render(<应用程序/>, document.querySelector('.container'));
src/components/app.js
import React, { Component } from 'react';导出默认类 App 扩展组件 {使成为() {返回 (<div><form onSubmit = {this.handleSubmit} ><标签>名称:标签><input type = "text" className="form-control"值 = {this.state.value}onChange = {this.handleChange}/><输入类型=提交"value = "Submit" className="btn btn-primary"/></表单>
);}}
检查这个,它应该可以工作.
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
To answer your question, both of your suggestions on your questions are correct. You can do it either way.
- Include
bootstrap CDN
in yourindex.html
- You can add bootstrap packages such as React-Bootstrap using
npm
/yarn
and import required components into youApp.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 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.
这篇关于如何在 reactjs 中使用引导程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!