一.使用create-react-app创建应用

react脚手架

用于快速创建一个基于React库的模板项目
- 包含了所有需要的配置（语法检查、jsx编译、devServer等）
- 下载好所有相关依赖
- 可以直接运行简单的效果
React提供了一个用于创建React项目的脚手架库：create-react-app
项目整体技术架构为：React + webpack + eslint + es6
使用脚手架开发的特点：组件化、模块化、工程化

创建项目并启动

第一步 全局安装：npm install -g create-react-app
第二步 切换到想要创建项目的目录创建项目：create-react-app hello-react
第三步 进入项目文件夹：cd hello-react
第四步 启动项目：npm start
（推荐使用yarn）

二.脚手架生成文件介绍

public文件夹

favicon.icon: 网站页签图标
index.html: 主页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- %PUBLIC_URL%代表public文件夹的路径 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 开启理想视口，用于移动端网页适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 用于配置浏览器页签+地址栏的颜色（仅支持安卓手机浏览器） -->
    <meta name="theme-color" content="#000000" />
    <!-- 描述网站信息 -->
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- 用于指定网页添加到手机主屏幕后的图标 -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- 应用加壳时的配置文件 -->
    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
    
    <title>React App</title>
  </head>
  <body>
    <!-- 若浏览器不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    
  </body>
</html>

manifest.json: 应用加壳的配置文件
robots.txt: 爬虫协议文件

src文件夹

App.js: App组件
index.js: 入口文件
reportWebVitals.js: 页面性能分析文件（需要web-vitals库的支持）
setUpTest.js: 组件单元测试的文件（需要jest-dom库的支持）

018.使用React脚手架创建React应用