react-脚手架项目搭建

环境搭建（官方脚手架）

可以使用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

webpack手动搭建