环境搭建（官方脚手架）
可以使用npm，建议使用yarn
1.安装 yarn，重启（不重启，别的盘符有可能用不了）
打开cmd（小黑框）执行以下命令
//查询当前镜像
yarn config get registry
//设置为淘宝镜像
yarn config set registry https://registry.npm.taobao.org/
//设置为官方镜像
//yarn config set registry https://registry.yarnpkg.com
2.安装 create-react-app
//官方 不在支持 把CRA4.0安装到全局了,需要安装最新版CRA到全局
yarn global add create-react-app
或
npm install create-react-app -g //非安装包安装的yarn 推荐
//测试是否成功
create-react-app -V
3.创建 react项目
create-react-app 目录 | npx create-react-app 目录 | npm init react-app 目录
yarn eject 解构出所有的配置文件 可选
yarn start | npm start 开发
yarn build | npm run build 打包
//调试 需要安装给chrome浏览器一个插件 react-dev-tools 谷歌助手->chrome商店-搜索
环境解析
- react: 核心包，解析组件 演示
- react-dom: 编译 -> 浏览器 演示
- react-scrpts: react的项目环境配置
- manifest.json 生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字的显示内容
- registerServiceWorker.js支持离线访问，所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。服务器必须采用https协议
- 对Internet Explorer 9,10和11的支持需要polyfill
可能会遇到的错误
运行yarn 提示“不是内部或外部命令，”
装完重启
create-react-app 提示“不是内部或外部命令，” //yarn无法全局安装包
npm i create-react-app -g 用npm重装
create-react-app 能用安装到一半报错(error)
node 全量安装 ,一路下一步安装过程中有个复选框选中,时长30分钟
yarn eject
报git错误时:
git init -> git add . -> git commit -m 'init' -> yarn eject
报缺少babel 包: 安装一下（yarn add xxx -S)
配置
修改端口
//修改script/start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001;
去除eslint 警告(建议不要去除）
//config/webpack.config.js
//注释关于eslint的导入和rules规则 (react16.x)
//注释关于new ESLintPlugin (react17.x)
第三方脚手架
yomen/umi