提示：

此文中介绍的方法已过时，建议查看文档：o2oa开发平台前端源码级二次开发

O2OA进行前端的二次开发，介绍了创建O2OA component的方式，基于React和Vue的模式

O2OA提供了门户平台，使用可视化方式设计页面，用于设计系统主页、列表等系统中的各类页面，在一定程度上降低了开发者的技能要求。但是对于有经验的前端开发人员，或者已经习惯了使用前端开发框架的用户，这种页面设计模式的效率就显得不合适了。

　　本系列教程，我们就来讲一下如何使用主流前端框架集成O2OA进行开发。主要包括现在主流的三个框架：React、VUE和Angular。

　　本系列文章适用于O2OA5.1及以后的版本。

　　让我们先从React开始吧！

版本要求

本文适用于如下版本：

• O2OA版本要求：5.1及以上版本；

• React版本：本文撰写时，react版本是16.13.1。（更低的版本未经验证）

在O2门户页面中使用React

　　在很多情况下，我们不需要复杂的React应用，通过仅仅几行代码并且无需使用构建工具，即可在O2平台门户页面中使用React。本章实现的例子和React官网的《在网站中添加 React》效果一致，可参考：

https://zh-hans.reactjs.org/docs/add-react-to-a-website.html

第一步：创建门户页面

在O2平台创建一个门户，并新建一个页面。在页面中创建一个容器，标识为："div"。

第二步：创建React组件脚本

在门户中创建一个脚本，命名为：like_button。

拷贝以下代码：

'use strict';
const e = React.createElement;
//创建React组件
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }
  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }
    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

//获取组件容器（门户页面上的div容器）
const domContainer = this.page.get("div").node;
//在容器中渲染React组件
ReactDOM.render(e(LikeButton), domContainer);

第三步：页面中加载React

在刚刚新建的页面的afterload事件中，添加以下代码：

//引入React脚本
o2.load([
    "https://unpkg.com/react@16/umd/react.development.js",
    "https://unpkg.com/react-dom@16/umd/react-dom.development.js"
], function(){
    //引入like_button组件
    this.include("like_button");
}.bind(this));

（如果是生产环境，请将React脚本的路径中development替换为production。当然你也可以下载js文件，放到O2服务器的webServer目录下，建议放到o2_lib目录，然后用正确的路径加载它。）

第四步：完成

没有第四步了。你刚刚已经将第一个 React 组件添加到你的O2门户页面中了，现在您可以预览它，看到实现的效果了。

经过以上四步，您已经用最简单的方式，将React集成到O2OA中。如果您希望使用更大的Javascript工具链，我们将在下面的章节中介绍两种方式使用Create React App脚手架集成O2OA。