react入门指南(二)react环境搭建
1.react环境搭建
由于react基于Nodejs,所以安装前需要安装Node.js、npm、cnpm
当我们在官网下载并安装Node时,npm也自动安装好了,一路next后即可。安装好后键入node -v 以及npm -v 来测试是否安装成功(不需要自己手动配置系统环境变量)
因为国内使用npm很慢,我们可以使用淘宝的cnpm,同时设置镜像地址
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装成功后,可以键入cnpm -v检查是否安装成功
2.生成一个react基础项目
生成基础react项目可以借助官方脚手架
官方脚手架安装create-react-app
yarn global add create-react-app | npm install create-react-app -g
创建 react项目
方法一 create-react-app 目录
方法二(使用npx搭建) npx create-react-app 目录
方法三(使用npm搭建) npm init react-app 目录
解构出所有的配置文件
yarn eject
运行react项目
方法一(使用yarn) yarn start
方法二(使用npm) npm start
打包react
方法一(使用yarn) yarn build
方法二(使用npm) npm run build
调试项目的推荐给浏览器装一个插件react-dev-tools,方便调试
3.环境解析
- react: 核心包,解析组件,识别jsx 演示
- react-dom: 编译 -> 浏览器 演示
- react-scrpts: react的项目环境配置
- manifest.json 生成一个网页的桌面快捷方式时,会以这个文件中的内容作为图标和文字的显示内容
- registerServiceWorker.js支持离线访问,所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时,registerServiceWorker.js才会有效。服务器必须采用https协议
- 对Internet Explorer 9,10和11的支持需要polyfill。
4.环境配置
使用指令 npm run eject
或者 yarn eject
解析出config与scripts配置的文件夹,便于修改
报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规则
{
//关于eslint警告的代码
test: /\.(js|mjs|jsx|ts|tsx)$/,
enforce: 'pre',
use: [
{
options: {
cache: true,
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
}
5.资源限制
-
本地资源导入(import) 不可以导入src之外的包
-
相对 指向src,绝对路径 指向了 public目录
-
前景图片, 相对 和 绝对路径 都指向了 public目录
6.第三方脚手架
yeomen/dva/umi(想要了解的自行百度)