React开发与静态部署全攻略

### React开发与静态部署全攻略 #### 1. 在React应用中添加Bootstrap 和Angular类似，有几种方法可以将Bootstrap添加到React应用中，这里我们使用`reactstrap`项目。操作步骤如下： 1. 回到应用的基础目录下的命令行，使用NPM安装相关库。在命令行输入： ```bash npm install bootstrap --save npm install --save reactstrap react react-dom ``` 这将把Twitter Bootstrap和`reactstrap`安装到你的应用中。 2. 为了让应用能够使用Bootstrap，需要在`index.js`文件中导入它： ```javascript import 'bootstrap/dist/css/bootstrap.min.css' ``` 3. 现在可以在不改变任何JavaScript代码的情况下更新React应用的HTML部分，示例代码如下： ```javascript <div className='container-fluid'> <div className='row'> <div className='col'>Boroughs:</div> <div className='col'>States:</div> </div> <div className='row'> <div className='col'> { this.createList(this.state.boroughs)} </div>; <div className='col'> { this.createList(this.state.states)} </div>; </div> </div> ``` 重新启动应用后，屏幕显示会使用Bootstrap的样式。 #### 2. 从React应用中提交数据 我们可以从数据库中检索数据，并使用Bootstrap将结果格式化为类似表格的布局。现在，我们要通过添加一个HTML表单来改变这个布局，以便向数据库提交新数据，并添加一个单独的按钮，在添加新信息后检索所有结果。 以下是使用`reactstrap`格式化从数据库发送和接收数据的`boroughs.js`代码示例： ```javascript import React, { Component } from 'react'; import { Container, Col, Form, FormGroup, Label, Input, Button } from 'reactstrap'; import './css/boroughs.css'; export class Boroughs extends Component { constructor(props) { super(props); this.state = { boroughs: [], states: [], boroughInput: '', stateInput: '' } }; componentDidMount(){} createList = (list) => { if(list.length !== 0) { const itemList = list.map( (value, index ) => { return (<div> {value} </div>) }); return itemList; } } onSubmitForm = (e) => { e.preventDefault(); fetch( '/boroughs', {method: "POST", headers:{'Accept': 'application/json', 'Content-type': 'application/json'}, body: JSON.stringify({boroughName: this.state.boroughInput, state: this.state.stateInput}) }).then((result) => { console.log(result); }); } onBoroughsUpdate = (event) => { this.setState({boroughInput: event.target.value}); } onStatusUpdate = (event) => { this.setState({stateInput: event.target.value}); } showResults = () => { let boroughArray = []; let stateArray = []; fetch('/boroughs').then( (results) => { return results.json(); }).then( (resultJson) => { resultJson.map( (value, index ) => { boroughArray.push(value.name); stateArray.push(value.state); }); this.setState({ boroughs: this.createList(boroughArray), ```