1.有两种方式创建reactjs工程。第一种使用脚手架: create-react-app 该方式适用于新开工程情况。如果是在已有工程上使用reactjs就不合适了。得要手动使用npm来安装各种插件,来从头到尾自己搭建环境。
这里重点介绍 脚手架: create-react-app:1
2
3
4
5
6
7
8
9
10
11安装脚手架:
npm install -g create-react-app
使用脚手架新建工程 reactjs1:
create-react-app reactjs1
cd到工程目录:reactjs1,执行如下命令
npm start
会在开发环境下启动一个服务器,监听在3000端口,它会主动给你打开浏览器的,可以立刻就看到这个app的效果。url地址为: http://localhost:3000/
让手机可以访问PC,假定PC的地址为:192.168.3.177 那么在手机的浏览器访问:192.168.3.177:3000 也可以看到app效果。
编辑代码并保存,会发现手机上浏览器网页会同步变化。这样在开发阶段非常方便了:更改代码,手机上立即可以看到效果,不向android开发那么痛苦,既要编译又要安装apk
代码开发完毕,要发布到tomcat服务器步骤:
- 修改node_modules–>react-scripts–>config–>paths.js文件
1
2
3
4
5
6function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
return ensureSlash(servedUrl, true);
}
getServedPath方法中: pathname : ‘/‘ 要修改为 pathname : ‘./‘ 也就是加多个.
- 工程根目录下执行: npm run build
会在工程根目录的build目录下生成经过webpack处理过的文件。将这些文件拷贝到 tomcat安装根目录–>webapps–>工程目录比如MyPrj下,
就可以:ip:port/MyPrj 访问了。
如果没有修改paths.js,请求tomcat地址会发现网页没有显示。
yarn start
yarn build
yarn test
yarn eject
npm install react-router-dom
react-router-dom 官网: https://reacttraining.com/react-router/web/guides/quick-start