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小時~^_^

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