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