早就聽說(shuō)React-native大名，一直未去嘗試。近期由于項(xiàng)目調(diào)研需要，想拿原生和react-native app進(jìn)行比較。正好最近想實(shí)現(xiàn)一個(gè)leetcode題庫(kù) app，但用iOS做意義不大，正值5.1假期，便試上一試。

剛開始接觸，最好看官網(wǎng)文檔，更新實(shí)在太快，ES6和ES5語(yǔ)法不同，版本更迭坑又多。了解一些基本的html和js語(yǔ)法即可，但React采用JSX語(yǔ)法，可當(dāng)做新語(yǔ)言學(xué)，但也有它的套路。大多數(shù)坑都是從官方issue和文檔、Stack Overflow上填的。

安裝

直接看官網(wǎng)文檔，不過npm和其它很多組件需要更新，以O(shè)S-X系統(tǒng)為例，使用brew更新需要的軟件,最好設(shè)置代理shadosocks或者h(yuǎn)ttp代理.
安裝過程只要這些前提工作準(zhǔn)備好，安裝官網(wǎng)指令非?？斓模饕獏⒖家韵陆坛?。
mac更新node
brew update 慢 解決辦法 鏡像更新源

官網(wǎng)安裝指令如下:

brew install watchman
npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios```

安裝啟動(dòng)后

![React-Native項(xiàng)目一般目錄結(jié)構(gòu)](http://upload-images.jianshu.io/upload_images/764980-a9385fac29c5c8e6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
其中比較重要的是package.json
這里面包括了所有的依賴

![package,json](http://upload-images.jianshu.io/upload_images/764980-d8952d8561ffa8ac.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
我這個(gè)項(xiàng)目比較老，依賴沒有參考性，有的依賴升級(jí)后，變動(dòng)很大了，比如說(shuō)react和react-native兩個(gè)庫(kù)中的組件更替。

###IDE和調(diào)試
####IDE
IDE推薦WebStorm(2017.1月版網(wǎng)上已有[激活碼](http://www.itdecent.cn/p/4a2875961dd0),和IDEA同根同源，使用習(xí)慣和界面風(fēng)格類似)
[WebStorm里面配置運(yùn)行React Native的方案](http://www.cnblogs.com/shaoting/p/6110202.html)
這一方案可實(shí)時(shí)根據(jù)JSX代碼查看界面，非常方便，直接運(yùn)行，不用打開xcode占用內(nèi)存了。
注意運(yùn)行React-Native在iOS Simulator中，兩個(gè)快捷鍵經(jīng)常用到。<pre>command+D</pre>可以打開設(shè)置選項(xiàng)，可以允許chrome遠(yuǎn)程調(diào)試和實(shí)時(shí)更新操作；而
<pre>command+R</pre>是重新load JS的操作。

也有采用atom或者其它IDE的，atom的優(yōu)點(diǎn)在于插件豐富，功能強(qiáng)大。
####調(diào)試
前端調(diào)試當(dāng)然是用chrome,這方面我經(jīng)驗(yàn)不是很多，就不多說(shuō)了。

###語(yǔ)法
####JSX語(yǔ)法
阮一峰有一系列教程可以參考
[ECMAScript6](http://es6.ruanyifeng.com/#docs/intro)
[ReactNative學(xué)習(xí)筆記--JS基礎(chǔ)使用語(yǔ)法](http://www.imooc.com/article/14400)
[深入淺出ES6（二）：迭代器和for-of循環(huán)](http://www.infoq.com/cn/articles/es6-in-depth-iterators-and-the-for-of-loop)

####Flex布局
[Flex布局教程-阮一峰](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

###開源項(xiàng)目和資源
[如何學(xué)習(xí)React native，有哪些建議或資源？](https://www.zhihu.com/question/56628437)
[美食項(xiàng)目-親測(cè)可運(yùn)行，做的還不錯(cuò)](https://github.com/ljunb/react-native-iShiWuPai)
[分享 50 個(gè)完整的 React Native 項(xiàng)目](https://juejin.im/post/58f37cb361ff4b0058f9824a?utm_source=tuicool&utm_medium=referral)
[React-native開發(fā)過程中常見錯(cuò)誤](http://www.itdecent.cn/p/98c8f2a970eb)

###基于LeetCode的小Demo
實(shí)現(xiàn)一個(gè)展示題目清單和題目詳情的頁(yè)面。
用到組件
- ListView
- View
- Text
- React Navigation(stacknavigator)
- css一些styles，利用flex布局



由于我的數(shù)據(jù)是array中嵌入json，所以用下面這種處理方法。
[ReactNative中實(shí)現(xiàn)實(shí)現(xiàn)ListView的數(shù)據(jù)源是多維數(shù)組](http://www.tuicool.com/articles/RVVfui3)
#####TODO
- Leetcode數(shù)據(jù)爬蟲去爬取||直接本地處理他人題庫(kù)存入數(shù)據(jù)庫(kù)
   - 有一些開源的如python和nodejs處理的，或者jsoup解析html。
- 代碼格式化處理呈現(xiàn)在React-Native中
  - markdown處理代碼風(fēng)格是怎么做到的？
- 之后的關(guān)注點(diǎn)
  - state和props特性學(xué)習(xí)
  - tabbar和navigation組件
  - react中的多線程技術(shù)-如何異步
  - 上拉下拉數(shù)據(jù)刷新
  - 圖標(biāo)展現(xiàn)(i-test)