一、reactjs配置及部署

发表于 | 分类于


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服务器步骤：

  1. 修改node_modules–>react-scripts–>config–>paths.js文件
    1
    2
    3
    4
    5
    6
    function getServedPath(appPackageJson) {
      const publicUrl = getPublicUrl(appPackageJson);
      const servedUrl =
        envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
      return ensureSlash(servedUrl, true);
    }

getServedPath方法中： pathname : ‘/‘ 要修改为 pathname : ‘./‘ 也就是加多个.

  1. 工程根目录下执行： 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