12小時包你學會基於ReactMix框架的ReactNativeApp開發（一）Hello World!

本文轉載自查看原文 2016-01-13 22:03 6587 react-native

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