RCT005 React Scaffold

React脚手架

使用React开发一个单独的前端项目，也就是前后端分离后的前端部分。

create-react-app

create-react-app是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。

安装

利用npm来进行全局安装。

npm install -g create-react-app

创建项目

create-react-app xxx

创建的项目会是一个nodejs的项目，并且已经自动配好了react的环境。

运行项目

通过查看生成的package.json文件，可以知道通过npm run start来运行项目，输入指令后，会自动以端口号3000运行，并打开浏览器。

项目结构

项目内除了node_modules文件夹用来存储包，还有：

• src文件夹存储页面（js文件）和css文件，包括入口文件index.js
• public文件夹存储静态资源，包括整个项目的基础index.html

create-react-app 的 Hello World

将之前的To do List 迁移到脚手架里，我们需要替换App.js和App.css里面的内容，其他都不需要改变。

App.js

import React from 'react';
import './App.css';

class App extends React.Component {

  state = {
    value: '',
    list: []
  }

  handleAdd = () => {
    const val = this.state.value;
    const list = this.state.list;
    //或 es6结构语法
    // const{val,list} = this.state;
    list.push(val);
    this.setState({
      list: list
      //es6中 当list和value相等时，可以省略key
      //由list:list 简写为 list
    })
  }

  handleInput = (event) => {
    this.setState({
      value: event.target.value
    })
  }

  handelRemove = (event) => {
    var kk = event.target.dataset.bid
    console.log(kk)
    var arr = this.state.list;
    arr.splice(kk, 1)  // delete the item with index kk
    this.setState({
      list: arr
    })
  }

  render() {
    const val = this.state.value;
    const arr = this.state.list;
    const listItem = []
    for (var i = 0; i < arr.length; i++) {
      listItem.push(
        <li key={i}>
          {arr[i]}
          <button data-bid={i} onClick={this.handelRemove}>remove</button>
        </li>
      )
    }

    return (
      <div className="container">
        <p>欢迎学习react</p>
        <h1>Hello World</h1>
        <div>
          <input type="text" value={val} onChange={this.handleInput} placeholder="To do" />
          <button onClick={this.handleAdd}>Add Item</button>
        </div>
        <ul>
          {listItem}
        </ul>
      </div>)
  }
}

export default App;

App.css

.container {
  text-align: center;
  margin: 20px auto;
}
.container p {
  font-size: 10px;
}
.container h1 {
  font-size: 20px;
  color: #02043d;
}

实际上，这个脚手架做的事情是：

1. App.js里面写了一个<App />标签
2. index.js里面将 <div> <App /> </div>渲染到了index.html中

也就是说，我们是一个单页面应用，我们开发时只需要修改App等相关文件就可以了。我们项目中看上去是页面跳转，实际上是<App>标签发生了改变，react重新渲染了它。