O2OA提供了門戶平臺，使用可視化方式設計頁面，用於設計系統主頁、列表等系統中的各類頁面，在一定程度上降低了開發者的技能要求。但是對於有經驗的前端開發人員，或者已經習慣了使用前端開發框架的用戶，這種頁面設計模式的效率就顯得不合適了。
本系列教程，我們就來講一下如何使用主流前端框架集成O2OA進行開發。主要包括現在主流的三個框架：React、VUE和Angular。
本系列文章適用於O2OA5.1及以後的版本。
讓我們先從React開始吧！
版本要求
本文適用於如下版本：
O2OA版本要求：5.1及以上版本；
React版本：本文撰寫時，react版本是16.13.1。（更低的版本未經驗證）
在O2門戶頁面中使用React
在很多情況下，我們不需要複雜的React應用，通過僅僅幾行代碼並且無需使用構建工具，即可在O2平臺門戶頁面中使用React。
第一步：創建門戶頁面
在O2平臺創建一個門戶，並新建一個頁面。在頁面中創建一個容器，標識爲："div"。
第二步：創建React組件腳本
在門戶中創建一個腳本，命名爲：like_button。
拷貝以下代碼：
'use strict';conste=React.createElement;//創建React組件classLikeButtonextendsReact.Component{constructor(props) {super(props);this.state={liked:false}; }render() {if(this.state.liked) {return'You liked this.'; }returne('button',{onClick: ()=>this.setState({liked:true}) },'Like' ); }}//獲取組件容器（門戶頁面上的div容器）constdomContainer=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。
(轉自公衆號：浙江蘭德網絡）