注：采用ES6+JSX语法

1、开始一个项目

在React中使用Onsen UI 需要首先安装onsenui和react-onsenui模块。

可以使用monaca CLI工具包快速初始化一个应用：

$ npm install -g monaca # Install Monaca CLI - Onsen UI toolkit$ monaca create helloworld # Choose React template$ cd helloworld; monaca preview # Run preview, or "monaca debug" to run on your device

通过npm安装：

# The "react-onsenui" library requires the "onsenui" library.$ npm install --save-dev onsenui react-onsenui

2、在React项目中加载Onsen UI

Onsen UI for React是一个Onsen UI核心的扩展，是一个基于组件的UI框架。需要加载以下两个JS模块：

• Onsen UI Core（onsenui）
• Onsen UI for React Extension（react-onsenui）

可以使用常规<script>标签引入：

或者使用CommonJS模块的方式引入：

var React = require('react');var ReactDOM = require('react-dom');var ons = require('onsenui');var Ons = require('react-onsenui');

或者使用ES6语法引入你需要的组件：

import {Page, Toolbar, Button} from 'react-onsenui';

3、Onsen UI HelloWorld with React

作为例子，我们创建一个React+Onsen UI版本的Hello World应用。

在这个例子里，我们render了一个<Ons.Page>组件，其中包含一个<Ons.Button>组件，它在被点击后触发handleClick事件处理程序。

return (  
         
      
       Tap me!
        
     );

由本例可知，<Ons.*>组件是React组件，它们由react-onsenui引入。

4、创建一个主页面（<Page>）

使用<Page>创建一个主页面（根页面），它覆盖整个屏幕并作为其他元素的容器。

增加工具条

使用<Toolbar>或者<BottomToolbar>创建顶部或者底部工具条，以下是一个典型的工具条示例：

       
          
       
      
        
         Back
            
       
    
       
        Title
       
    
       
      
                
               
            
       
  
       }>  Static page app
     

工具条被分为3个部分（left，center，right），任一部分都可以使用<Icon>展示图标，使用<ToolbarButton>或者<BackButton>展示按钮，或者在其中插入任意HTML元素。

5、事件处理

使用React相同的方式响应事件处理。比如，使用onClick属性来响应点击事件，使用onChange属性响应文本变更事件：

class MyPage extends React.Component {  handleClick() {    ons.notification.alert('Hello, world!');  }  render() {    return() (      
              
      Click me!      
         );  }}

6、ons对象

https://onsen.io/v2/docs/guide/react/#the-ons-object

公司换UI框架了，所以不更了。。_(:з」∠)_