初探create-react-app

我们需要在命令行中安装 create-react-app 工具，你可能还需要安装 yarn。

$ npm install -g create-react-app yarn

然后新建一个项目。

$ create-react-app antd-demo

之后运行

$ npm run eject

然后我们就会看到暴露出了配置信息的create-react-app 脚手架

现在我们来看看展开后的目录结构

|   .gitignore     // git 筛选文件，用来配置不希望提交到git的文件或者文件夹
|   package.json  // 项目的配置文件，位于根目录
|   README.md // 项目的说明文件
|   yarn.lock  // yarn 的lock 文件，快速定位依赖模块的地址
|
+---config  // 配置文件，主要是proxy、process 、webpack的配置
|   |   env.js // 主要是 NODE_ENV 相关的配置
|   |   paths.js  // 项目文件路径的配置，主要是脚手架的文件
|   |   webpack.config.js  // webpack 的配置文件
|   |   webpackDevServer.config.js  // proxy 代理的配置文件
|   |
|   \---jest  // config 的测试脚本 
|           cssTransform.js  
|           fileTransform.js
|
+---public  // 公用的静态文件夹
|       favicon.ico   // 浏览器标签栏上的图标
|       index.html  // 单页面的首页
|       manifest.json  //项目资源关系的配置 详见 https://www.jianshu.com/p/69f78498e628
|
+---scripts  // 项目脚本
|       build.js  // 项目构建脚本
|       start.js // 开发环境启动
|       test.js // 启动测试脚本
|
\---src
        App.css // app主组件对应的css 文件
        App.js  // app 主组件
        App.test.js // app主组件的测试脚本
        index.css // 主入口对应的主css文件
        index.js  // SPA 的主入口
        logo.svg // 静态资源图片
        serviceWorker.js    //热加载脚本

(tips: windows mac linux 都有一个命令 tree 用来生成这种目录结构，不了解的可以搜一下)