注:环境该有的配齐
1、查看react最新版本
npm info react
如果不是最新的版本,安装react最新版
@后面输入版本号 如下
npm install --save react@17.0.1
create-react-app 安装:
安装语句:cnpm install -g create-react-app
验证命令:create-react-app --version
2、查看create-react-app最新版本
npm info create-react-app
查看当前使用版本
create-react-app -V
如果是低版本就不能够使用create-react-app新建react项目
如果你的版本是小于查询到的最新版本的话。那么需要先卸载掉原先的旧版本:
npm uninstall -g create-react-app
1)运行create-react-app -V查看版本号,发现还可以拿到版本号,说明未被完全删除。
2)运行where create-react-app命令,若是有返回内容,则将返回内容全部手动删除。或者在卸载过程中如果遇到一个错误,这个错误返回并提示create-react-app,create-react-app.cmd这两个文件的路径时,那么就要在电脑上找到对应的文件并删除。
3、react,create-react-app 版本最新之后,就可以正常的使用create-react-app 新建项目了(如果以前没有装过按照最新的装就可以了)
1)create-react-app reactproject 新建并对react项目进行命名(注:项目名称不能有大写)
2)cd reactproject 通过命令进入文件夹内部,准备运行项目
3)npm start 运行项目
注:如果新建不成功提示没有权限的什么的,用管理员权限走,cd cd cd 进来搞
4、项目跑起来后,分环境打包放服务器,运行代码时,走不同的接口。
直接到package.json页面中 script 内容修改 如下:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:dev": "set REACT_APP_PROXY_URL=dev&& react-scripts build",
"build:pro": "set REACT_APP_PROXY_URL=pro&& react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
然后在打包的时候 使用 yarn build:dev 或者 yarn build:pro 打出想要的
APP.js页面添加环境区分 (临时的,项目可以按需规划)
const REACT_APP_PROXY_URL = process.env.REACT_APP_PROXY_URL;
if(REACT_APP_PROXY_URL == "pro"){//生产环境
console.log("生产环境的请求地址")
}else if(REACT_APP_PROXY_URL == "dev"){//测试环境
console.log("测试环境")
}else{//本地跑的服务
console.log("本地运行")
}
yarn start 打印 "本地运行"
yarn build:dev 打包出来放服务器之后,打印 "测试环境"
yarn build:pro 打包出来放服务器之后,打印 "生产环境的请求地址"
放服务器就是将打包好的build文件夹中的内容进行提交。同时 package.json页面中 添加 "homepage":".", 这样访问该react项目的地址就为 http://xxxx.com.cn/项目名称/index
如图:
5、路由配置
- 安装
npm i react-router-dom -S
-
使用 大概这个样子 asyncComponent 页面异步加载使用。
09ef1e4a7ac280369789dff3bd97940.png
- 注意
<Route exact path="/shopcsr/login" component={Login}/>
注:上服务器一般都是有该项目名字加页面路径的 比如:访问首页 http:.....cn/name/index 访问登陆页面 http:.....cn/name/login。这里面的 shopcsr 等于 name,访问login的域名就为:http://xxx.xx.cn/shopcsr/login,页面路由如果没有加上name,那么服务器只能访问到index页面的内容,换路由中的页面名字没用。
网友评论