脚手架自动创建React项目

1.什么是脚手架?

脚手架是一种能快速帮助我们生成项目结构和依赖的工具

• 每个项目完成的效果不同，但是它们的基本工程化结构是相似的。既然相似，就没有必要每次都从零开始搭建，完全可以使用一些工具，帮助我们生成基本的项目模板。那么这个帮助我们生成项目模板的工具我们就称之为’脚手架’

2.什么是create-react-app?

create-react-app就是React的脚手架工具,
它可以快速的帮我们生成一套利用webpack管理React的项目模板

3.如何安装和使用create-react-app?

3.1 安装脚手架

npm install -g create-react-app

3.2 创建项目：

create-react-app 项目名称

3.3 进入项目：

cd 项目名称

3.4 运行项目：

npm start

• 注意点: 如果我们是通过create-react-app来创建React项目
  那么在指定项目名称的时候, 项目的名称只能是英文, 并且只能是小写字母
  如果出现了多个单词, 那么我们需要通过_-来连接. myName->my_name->my-name
• 注意点: 第一次运行项目的时候大概率会出现一个错误, 会出现本地webpack的版本和项目依赖的webpack版本不同的错误
  如果遇到了这个错误, 我们就需要先通过 npm uninstall webapck 卸载掉本地的webpack
  再通过 npm install -g webpack@xx.xx.xx安装和项目相同版本的webpack即可

4.暴露webapck配置

默认情况下，创建好的项目，webpack的相关文件被隐藏，如果想查看webpack文件，就在项目目录下：

npm run eject

注意点：如果创建好项目后，删除了一些不需要的文件npm run eject执行会报错

5.创建好的React项目目录结构

5.1.通过create-react-app生成的项目结构解读

项目名称
├── README.md           // 说明文档
├── node_modules        // 依赖包
├── package.json        // 对应用程序的描述【依赖、配置、名称、版本号等】
├── .gitignore          // 不通过git管理的文件描述
├── public
    ├── favicon.ico    // 应用程序收藏图标
    ├── index.html     // 应用程序入口
    ├── logo192.png    // manifest中PWA【小程序的老祖宗。】使用的图片
    ├── logo512.png    // manifest中PWA使用的图片
    ├── manifest.json  // PWA相关配置
    └── robots.txt     // 搜索引擎爬虫权限描述文件【seo】
└── src                //网站源码
    ├── App.css         // App组件相关样式
    ├── App.js          // App组件相关代码
    ├── App.test.js     // App组件测试文件
    ├── index.css       // 全局样式
    ├── index.js        // 全局入口文件
    ├── logo.svg        // React图标
    ├── serviceWorker.js// 注册PWA相关代码
    └── setupTest.js    // 测试入口

5.2.什么是PWA?
小程序老祖宗