2 - 搭建 React 开发环境

1. script 标签引入方式

// 开发环境
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

// 生产环境
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

• react.js - React 的核心库
• react-dom.js - 提供与DOM相关的功能的库
• babel.min.js - 用来编译 JSX 语法的babel库

2. create-react-app 脚手架的方式

1. 全局安装脚手架

yarn global add create-react-app

2. 创建项目

create-react-app <projectName>

3. 运行

脚手架项目结构简介

• node_modules - 项目依赖资源包
• public - 静态资源目录
• src - 源代码目录
  • index.js - 主入口文件
  • index.css - 全局css样式
  • App.js App.css App.test.js 主组件
• .gitignore - git忽略文件
• package.json - 项目描述文件
• README.md - 读我文件

PS:
manifest.json和serviceWorker.js
PWA用到的，2016年谷歌提出的，渐进式网页应用，在页面在手机上有原生APP的体验（离线缓存、全屏展示、桌面提醒）