脚手架 - 图1

同Vue脚手架的出现原因一样，我们不可能一直在html文件中引入react库的方式来编写代码，这不符合生产环境的要求。

React脚手架

脚手架其实是一个帮我们快速的生成项目的工程化结构的工具，每个项目的结构实际上都是差不多的。

安装

  1. 通过npm或者yarn安装

    1. npm i create-react-app -g
    2. create-react-app hello-react

  2. 直接通过npx脚本安装

    1. npx create-react-app hello-react

    目录结构

    1. hello-react
    2. ├─ .gitignore               // 自动创建本地仓库
    3. ├─ package.json             // 相关配置文件
    4. ├─ public                   // 公共资源
    5. │  ├─ favicon.ico           // 浏览器顶部的icon图标
    6. │  ├─ index.html            // 应用的 index.html入口
    7. │  ├─ logo192.png           // 在 manifest 中使用的logo图
    8. │  ├─ logo512.png           // 同上
    9. │  ├─ manifest.json         // 应用加壳的配置文件
    10. │  └─ robots.txt            // 爬虫给协议文件
    11. ├─ src                      // 源码文件夹
    12. │  ├─ App.css               // App组件的样式
    13. │  ├─ App.js                // App组件
    14. │  ├─ App.test.js           // 用于给APP做测试
    15. │  ├─ index.css             // 样式
    16. │  ├─ index.js              // 入口文件
    17. │  ├─ logo.svg              // logo图
    18. │  ├─ reportWebVitals.js    // 页面性能分析文件
    19. │  └─ setupTests.js         // 组件单元测试文件
    20. └─ yarn.lock