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

一.使用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）html

二.脚手架生成文件介绍

public文件夹

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

<!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: 爬虫协议文件webpack

src文件夹

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