　　在前面的章节中，我们介绍了两种在O2OA中使用React开发应用的方式，已经可以满足绝大多数的情况了。如果您考虑完全脱离O2的web服务器，自己搭建web服务器，那就请阅读本章。

　　我们还是使用React的Create React App工具，创建React应用，然后将O2OA集成到应用中，并实现以下功能：列示当前用户的前20条待办，点击标题打开待办；通过点击按钮启动流程和打开主页。

版本要求

本文适用于如下版本：

O2OA版本要求：5.1及以上版本；
React版本：本文撰写时，react版本是16.13.1。（更低的版本未经验证）

前提

开发端安装了Node.js， Node >= 8.10， npm >= 5.6
有一台O2服务器（并不需要启动webServer，但其他服务需要正常启动）
使用合适的开发工具：WebStorm、VSCode、Atom等（本例使用WebStorm）

创建React应用

您可以使用WebStorm创建一个新的React App，如下图：

或者创建一个空项目，然后使用以下命令创建React应用：

npx create-react-app my-appcd my-app

创建后目录结构如下：

添加O2平台web脚本

　　将O2服务器的webServer下的所有文件夹拷贝到public目录：

在public/index.html的head中添加O2脚本引入：

<script src="../o2_core/bundle.js"></script>

修改public/x_desktop/res/config/config.json文件：

{    "center": [    {      "port": "20030",      //O2服务器中心服务器端口      "host": "develop.o2oa.net"    //O2服务器中心服务器Host    }  ],  "applicationServer": {    "host": "develop.o2oa.net"  //O2应用服务器Host  },  "initManagerChanged": true,  "initManagerName": "",    ...}

此文件主要修改两部分内容：

1、center部分，修改为要访问的O2中心服务器地址和端口；

2、applicationServer部分，修改为要访问的O2应用服务器地址，如果没有applicationServer，就添加一个。集群环境下，可配置应用服务器负载地址；

为了方便后续引入，我们在src下创建一个o2.js，添加以下代码：

let o2 = window.o2;let layout = window.layout;export {o2, layout};

自此以后，所有的过程都和第二章基本一样了。

修改inde.js

修改src/index.js文件如下：

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';//获取O2全局对象import {o2, layout} from './o2';//在O2平台脚本载入完成后执行layout.addReady(function(){    layout.app = true;    //通过平台服务，获取当前用户的前20条待办(可通过http://your-server:20030/x_program_center/jest/list.html查询平台接口服务)    o2.Actions.load("x_processplatform_assemble_surface").TaskAction.V2ListPaging(1,20, {}, function(json){        //React渲染App组件        ReactDOM.render(            <React.StrictMode>                <App value={json.count} data={json.data}></App>            </React.StrictMode>,            document.getElementById('root')        );    });});

layout.addReady 方法会在O2载入完成后执行回调方法。

o2.Actions.load 方法可以调用平台的Restful服务。

修改App组件

先修改src/App.css样式文件，拷贝以下代码：

.App {  padding: 20px;  margin: 20px;}.App-header {  padding: 5px 10px;  background: #0f81cc;  font-size: 18px;  color: #ffffff;}.o2-tasklist {  padding: 10px;  background: #f3f3f3;  font-size: 18px;}.o2-task {  line-height: 30px;  height: 30px;  cursor: pointer;}.o2-button {  padding: 10px 20px;  text-align: center;  background: #0f81cc;  margin-top: 10px;  color: #ffffff;  font-size: 18px;  float: left;  margin-right: 20px;  cursor: pointer;}

修改src/App.js文件如下：

import React from 'react';import './App.css';//获取O2全局对象import {o2, layout} from './o2';function App(props) {    function openHomepage(){            //通过O2全局对象layout的openApplication方法打开主页"Homepage"        layout.openApplication(null,"Homepage")    }    function openTask(id){        //通过O2全局对象layout的openApplication方法打开待办        layout.openApplication(null,"process.Work", {"workId": id});    }    function startProcess(){        //通过o2.env对象启动流程        //o2.env对象即是在O2门户页面的脚本中的this指向，可以使用其方法。        //请将“application-name”和“process-name”修改为您的流程应用名称和流程名        o2.env.page.startProcess("application-name", "process-name");    }    function listTask(){        let list = [];        props.data.each(function(d){            list.push(<div className="o2-task" >

　　上述代码创建了一个React组件，列示了待办列表，并创建两个div，点击后分别启动指定的流程，打开主页。

　　App.js中，我们使用了o2.env对象，这个对象和在门户页面脚本中的this指向一致，可以调用除了与门户页面组件相关方法以外的各种方法，如：o2.env.page.openWork、o2.env.inculde、o2.env.confirm、o2.env.page.startProcess等，详细内容可以参考API文档。

编译并运行

　　我们完成了上述开发工作，就可以编译并运行我们的应用了。使用以下命令来查看结果：

npm run start

　　运行后，会启动一个web服务器，默认端口3000，并自动打开浏览器，访问http://locahost:3000，就可以看到和第二章一样的效果了。

　　如果您未登录到服务器，会出现登录页面，登录后就可以看到登录人的待办列表，并可以启动流程了。

　　登录后：

您可以接着修改代码，每次修改保存后，React会自动编译，并刷新浏览器，及时看到修改效果。

开发完成后，可使用命令：

npm run build

React会在将所有的代码编译到build目录下，你就可以将build中的内容部署到任意的web服务器了。

总结

　　O2OA和React的集成还是非常方便的，对于熟悉React的用户，可以通过更多更灵活的工具来进行集成开发，更多有关React的内容请参考React官网教程。

　　对于VUE和Angular和O2OA的集成，我们将在后面的章节为大家介绍。

ITPub博客

O2OA开源免费开发平台：在O2门户页面中使用React（三）