12小时包你学会基于ReactMix框架的ReactNativeApp开发（一）Hello World!

ReactMixhttps://github.com/xueduany/react-mix自从昨天发布起来，获得了很多小伙伴的热捧，很高兴帮助你们解决了憋在心中好久的问题“若是我只会HTML,Css,Jquery”，我能够不用学习就会什么MVVM啦？会ReactNative啦?答案天然是没问题，在这里，只要你经过咱们的ReactMix框架，你均可以在12小时内上手一个App开发工做。就让咱们来试试吧。

首先申明，ReactMix的根基是在ReactNative的基础上实现了一层语法糖，帮助你们轻松方便的实现一行代码通吃H5,Pc,iOS,安卓，winphone的梦想，那么以你们接触最多的H5开发举例，首先咱们要知道咱们是基于什么绘制页面的？

对，基于HTML，那么在HTML里面最多见的元素有哪些？

答案：盒模型

分为块元素，行内元素，快元素好理解，就是div咯，行内元素，通常就是文本节点元素，好比span

还有表单元素，如输入框input，select下拉框，button按钮元素

基本有了以上这些，咱们就能够撑起来一个页面的html来了，对吧。

在ReactMix中，咱们也提供这些元素，惟一的区别是首字母是大写的，好比Div,Span,Input,Select,Button，为何首字母要大写呢？由于首先在ReactNative里面是没有HTML这些元素的，这些元素是咱们封装的近似的自定义组件，在ReactJs的规范里面，对于非系统提供的组件，必须首字母大写，实现区分，可是用法和属性和咱们在HTML里面使用的这些元素是同样同样滴

Ok，那么第二个学习的点来了，ReactNative是基于JSX语法来实现模板的，什么叫作JSX呢？相信用过ReactJs的同窗应该有所耳闻

相似这种，这就是JSX的语法，很想HTML的写法，就是属性的值，等于号后面若是是一个对象的话，基于{}大括号抱起来，能够写js代码

同窗们看到图片中语法都是ES6+的语法，有不少新的js特性的语法糖，不少人可能会问了，若是这么写，那么老版本的浏览器支持吗？答案是确定的，由于咱们的ReactMix有一个同步翻译机制，能够把这些新语法风格的代码原封不动的翻译成ES5的代码，保证能够在老版本的浏览器正常的跑起来。同时也支持对于新语法的动态调试，就像这样

基于WebPack和sourceMap，咱们依然能够很轻松直接调试es6语法的js代码

Ok，首先咱们须要从github上checkout代码https://github.com/xueduany/react-mix，(最好是Mac系统，目前全部的bash脚本都是基于Mac系统写的)

而后执行执行install.sh，主要功能就是在ReactMix项目根目录执行npm install，和在ReactMix/reactnative子目录里面执行npm install

这里为何会有一个独立的ReactNative子目录呢？

是这样的，由于ReactNative项目默认是不支持css格式的样式文件的，因此咱们把Css目录放在了ReactNative目录外层，经过自动化编译工具React.css.build.js，来实现对于Css的同步翻译到ReactNative目录中

另外对于H5的代码也是同理，这部分代码在ReactMix/Web目录中，由于UI Component这块是为了节约带包脚本，就没有经过if else的逻辑区分，而是直接拆分红为了同名的两个不一样实现的文件，分别放在了ReactNative目录和Web目录中，便于区分是H5使用仍是App使用，可是接口保持一致

Ok，npm install完毕以后，咱们打开ReactMix/reactnative/ios/native.xcodeproj，打开Xcode界面，点击run

你就能够直接在模拟器看到咱们美丽的何穗姐姐了

下面咱们来写第一个Hello World的页面

咱们打开ReactMix/reactnative/index.js

清空所有代码，输入如下ReactJs代码

首先定义个继承与基类App的静态类叫作HelloWorld

class HelloWord extends App{

}

而后写一个render方法，返回一段JSX的文字HelloWord，而且加上样式

最后咱们执行这个类的静态方法run()，看到效果

Done!Congratulation!

而后咱们执行一下ReactMix根目录的WebPack同步编译一下，webpack –w –d

在浏览器打开ReactMix/web/index.html，就能够同步看到对应代码的H5同步翻译过来的版本，怎么样，是否是很神奇？第一个HelloWorld已经完成，总共用时不超过1小时~^_^