react环境搭建

官方脚手架
安装 create-react-app

• 我们可以通过yarn来进行安装

yarn global add create-react-app

• 也可以通过npm来进行安装

npm install create-react-app -g

创建react项目

我们可以通过三种方法来进行安装

1. create-react-app 目录
2. npx create-react-app 目录
3. npm init react-app 目录

yarn eject 解构出所有的配置文件 可选
yarn start | npm start 开发
yarn build | npm run build 打包

浏览器调试

需要安装给chrome浏览器一个插件 react-dev-tools

环境解析

1. react: 核心包，解析组件,识别jsx 演示
2. react-dom: 编译 -> 浏览器 演示
3. react-scrpts: react的项目环境配置
4. manifest.json 生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字的显示内容
5. registerServiceWorker.js支持离线访问，所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。服务器必须采用https协议
6. 对Internet Explorer 9,10和11的支持需要polyfill。

环境配置

这里也提供两种方式

1. npm run eject
2. yarn eject

报git错误时：
git add . -> git commit -m ‘init’ -> yarn eject
报缺少babel 包: 安装一下

//修改端口
//修改script/start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001;

//去除eslint 警告
//config/webpack.config.js
//注释关于eslint的导入和rules规则

资源限制

• 本地资源导入(import) 不可以导入src之外的包
• 相对 指向src，绝对路径 指向了 public目录
• 前景图片, 相对 和 绝对路径 都指向了 public目录