这个项目是官方推荐create-react-app构建的,采用最新react v16+ 、react-router v4，放弃官方废弃的API，使用最新API的探索。

下面，你会快速了解到一个基于react v16.1.1的SPA是如何搭建起来的。

文件结构

创建完成后，你的项目应该如下：

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

目录

• 技术栈

  React 16.1.*
  react-router v4.2.0
  element-react v1.4.3
  axios v0.17.1

• 配置文件说明

  npm run start 启动项目
  打开package.json
  
  "scripts": {
      "start": "react-scripts start", //执行的是react-scripts
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    }
  
  我们在node_modules中找到react-scripts这个文件夹下的bin文件夹下的react-scripts.js文件
  
  switch (script) {
    case 'build':
    case 'eject':
    case 'start':
    case 'test': {
      const result = spawn.sync(
        'node',
        nodeArgs
          .concat(require.resolve('../scripts/' + script))
          .concat(args.slice(scriptIndex + 1)),
        { stdio: 'inherit' }
      );
  
  上面代码中  script 的变量值是 start
  所以执行 my-app\node_modules\react-scripts\scripts 文件夹下的  start.js 让我们打开关键的start.js,如下：
  
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;//配置port，这里就是为什么服务默认起在3000端口
const HOST = process.env.HOST || '0.0.0.0';//配置host
  
  choosePort(HOST, DEFAULT_PORT)
    .then(port => {
      if (port == null) {
        // We have not found a port.
        return;
      }
      const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';//如果环境变量中HTTPS为true则http协议改为https
      const appName = require(paths.appPackageJson).name;
      const urls = prepareUrls(protocol, HOST, port);
      // Create a webpack compiler that is configured with custom messages.
      const compiler = createCompiler(webpack, config, appName, urls, useYarn);
      // Load proxy config
      const proxySetting = require(paths.appPackageJson).proxy;
      const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
      // Serve webpack assets generated by the compiler over a web sever.
      const serverConfig = createDevServerConfig(
        proxyConfig,//这里就是为什么可以在webpack里面配置proxy来代理
        urls.lanUrlForConfig
      );
      const devServer = new WebpackDevServer(compiler, serverConfig);
      // Launch WebpackDevServer.
      devServer.listen(port, HOST, err => {
        if (err) {
          return console.log(err);
        }
        if (isInteractive) {
          clearConsole();
        }
        console.log(chalk.cyan('Starting the development server...\n'));
        openBrowser(urls.localUrlForBrowser);
      }); //这里起服务
      
      
  当然里面还有webpack打包时候的路径配置等，了解完环境配置，那我们就可以自己根据项目来配置。

• 配置环境变量

  在根目录创建.env文件
  HTTPS=true    //更改http协议为https，默认http
  HOST='0.0.0.0'   //默认情况下，开发Web服务器绑定到本地主机。你可以使用这个变量来指定一个不同的主机。
  PORT='8080'   //更改服务端口，默认3000
  
  更多配置请详细阅读create-react-app

• 选择请求工具

  这里推荐使用axios  npm install axios --save
  axios.get('url').then(function (res) {
      //do something
  }).catch(function (){
     //do something
  });
  为了解决跨域问题，只需在package.json文件加上
  "proxy": {
      "/api": {
        "target": "url",
        "ws": true
      }
    }
   
  详细参考create-react-app github

• react-route 4.x

  react-route已经更新到4.x版本，而且废除老版本API（蛋疼）
  我们需要从 react-router-dom 里面引入需要的模块，而不是 react-router,如下：
  import {
      BrowserRouter as Router,
      Route
  } from 'react-router-dom' 
  
  具体见 react-route 4
  
  Redirect：重定向
  
  <Router>
          <Switch>
              {/*必须加上exact，严格匹配路由*/}
              <Redirect exact from='/' to='/login'/>
              <Route exact path='/login' component={Login}/>
          </Switch>
  </Router>
  
  方法内跳转路由采用 this.props.history.push('url');