Environment construction (official scaffolding)
可以使用npm，建议使用yarn
1. Install yarn and restart (do not restart, other drive letters may not be used)
Open cmd (small black box) and execute the following command
//查询当前镜像
yarn config get registry
//设置为淘宝镜像
yarn config set registry https://registry.npm.taobao.org/
//设置为官方镜像
//yarn config set registry https://registry.yarnpkg.com
2. Install create-react-app
//官方 不在支持 把CRA4.0安装到全局了,需要安装最新版CRA到全局
yarn global add create-react-app
或
npm install create-react-app -g //非安装包安装的yarn 推荐
//测试是否成功
create-react-app -V
3. Create a react project
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商店-搜索
Environmental analysis
- react: the core package, parsing component demo
- react-dom: the compiler -> Browser demo
- react-scrpts: react project environment configuration
- When manifest.json generates a desktop shortcut for a web page, the content in this file will be used as the display content of the icon and text
- RegisterServiceWorker.js supports offline access, so the experience of using it is very close to that of the native app. RegisterServiceWorker.js will only be effective when the online version of the react project is packaged and generated. The server must use the https protocol
- Support for Internet Explorer 9, 10 and 11 requires a 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)
Third-party scaffolding
yomen / umi