前言
前面我们对微信小程序进行了研究：【微信小程序项目实践总结】30分钟从陌生到熟悉
并且用小程序翻写了之前一个demo：【组件化开发】前端进阶篇之如何编写可维护可升级的代码
之前一直在跟业务方打交道后面研究了下后端，期间还做了一些运营、管理相关工作，哈哈，最近一年工作经历十分丰富啊，生命在于不断的尝试嘛。
当然，不可避免的在前端技术一块也稍微有点落后，对React&Vue没有进行过深入一点的研究，这里得空我们便来一起研究一番（回想起来写代码的日子才是最快乐的😆），因为我们现在也慢慢在切React、想尝试下React Native，但是我这边对于到底React还是Vue还是比较疑惑，所以我这里研究下，顺便看看能不能解决小程序一套代码的问题
我们现在就来尝试，是否可以用React或者Vue让一套代码能在三端同时运行
我们这里依旧使用这个我觉得还算复杂的例子，做一个首页一个列表页，后面尝试将这套代码翻译成React Native以及微信小程序，于是便开始我们这次的学习吧
PS：我这里对React&Vue熟悉度一般，文中就是demo研究，有不妥的地方请各位指正
React的开发方式
工欲善其事必先利其器，我们这里依旧先做UI组件，首先我们做一个弹出层提示组件alert，这里我们尽量尝试与小程序开发模式保持一致点
我们这里先来创建一个组件：
1 class UIAlert extends React.Component { 2 propType() { 3 //name必须有，并且必须是字符串 4 name: React.PropTypes.string.isRequired 5 } 6 render() { 7 return ( 8 <view>我是{this.props.name}</view> 9 ); 10 } 11 }; 12 13 React.render( 14 <UIAlert name="alert"/>,15 document.getElementById('main') 16 );
//输出我是alert
生成的HTML结构为：
1 <view data-reactid=".0">2 <span data-reactid=".0.0">我是</span><span data-reactid=".0.1">alert</span>3 </view>
这里view显然不会被识别，我们简单做下处理（这里顺便升级下我们React的版本）：
1
