一、React的脚手架：create-react-app

1、全局安装：npm install -g create-react-app

2、创建项目

（1）create-react-app 项目名称

（2）npx create-react-app 项目名称

3、启动项目

（1）第一步：进入项目所在的目录        cd  项目名称

（2）第二步：运行项目        npm start

4、示例：在React中使用bootstrap库

（1）安装bootstrap

npm install bootstrap@3.3.7 --save

（2）安装react-bootstrap

npm install react-bootstrap@0.33.0 --save

（3）安装css-loader style-loader url-loader

（4）在App.css文件中引入bootstrap.css

@import "~bootstrrap/dist/css/bootstrap.css";

（5）示例

//建立apiconfig.js
export const HOST = 'http://localhost';
export const PORT = 8089

//创建home.jsx
import React,{ Component } from 'react'
import { Table,Button,Glyphicon } from "react-bootstrap";
import './home.css'
import { HOST,PORT } from "../config/apiconfig";class UserTable extends Component{constructor(props) {  //构造方法super(props);this.state = {    //设置状态data: [     //状态属性，是一个数组{id: 1001,username: '小森',birthday: '2005-12-15',address: '杭州'},{id: 1002,username: '小沈',birthday: '2025-12-15',address: '浙江'},{id: 1003,username: '小顾',birthday: '3085-12-15',address: '西湖'}]}}componentDidMount() {        //组件加载}render() {const { data } = this.state  //从state中将data读出来，解构出来return (<div><Table bordered striped hover>   //带边框，隔行变色，鼠标悬停效果<thead><tr><th width={100}>编号</th><th width={100}>姓名</th><th width={200}>生日</th><th width={100}>年龄</th><th width={200} colSpan={2}>操作</th></tr></thead><tbody>{data.map((user)=>{   //利用map状态机，把数据读入user中return (<tr key={user.id}><td>{ user.id }</td><td>{ user.username }</td><td>{ user.birthday}</td><td>{ user.address}</td><td><Button bsStyle='link' bsSize='small'>  //按钮样式，按钮大小<Glyphicon glyph='edit'/>    //图标编辑</Button></td><td><Button bsStyle='link' bsSize='small'><Glyphicon glyph='remove'/>删除</Button></td></tr>)})}</tbody></Table></div>)}
}
//导出组件
export default UserTable;

//home.css样式文件
tr>th{text-align: center;color: black;font-size: 20px;
}
td{color: red;font-size: 15px;
}

//App.js
import logo from './logo.svg';
import './App.css';
import UserTable from "./components/home";
function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><UserTable /></header></div>);
}export default App;