早就聽說React-native大名，一直未去嘗試。近期由于項目調研需要，想拿原生和react-native app進行比較。正好最近想實現一個leetcode題庫 app，但用iOS做意義不大，正值5.1假期，便試上一試。
剛開始接觸，最好看官網文檔，更新實在太快，ES6和ES5語法不同，版本更迭坑又多。了解一些基本的html和js語法即可，但React采用JSX語法，可當做新語言學，但也有它的套路。大多數坑都是從官方issue和文檔、Stack Overflow上填的。
安裝
直接看官網文檔，不過npm和其它很多組件需要更新，以OS-X系統為例，使用brew更新需要的軟件,最好設置代理shadosocks或者http代理.
安裝過程只要這些前提工作準備好，安裝官網指令非常快的，主要參考以下教程。
mac更新node
brew update 慢 解決辦法 鏡像更新源
官網安裝指令如下:
brew install watchman
npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios```
安裝啟動后
其中比較重要的是package.json
這里面包括了所有的依賴
我這個項目比較老，依賴沒有參考性，有的依賴升級后，變動很大了，比如說react和react-native兩個庫中的組件更替。
###IDE和調試
####IDE
IDE推薦WebStorm(2017.1月版網上已有[激活碼](http://www.lxweimin.com/p/4a2875961dd0),和IDEA同根同源，使用習慣和界面風格類似)
[WebStorm里面配置運行React Native的方案](http://www.cnblogs.com/shaoting/p/6110202.html)
這一方案可實時根據JSX代碼查看界面，非常方便，直接運行，不用打開xcode占用內存了。
注意運行React-Native在iOS Simulator中，兩個快捷鍵經常用到。<pre>command+D</pre>可以打開設置選項，可以允許chrome遠程調試和實時更新操作；而
<pre>command+R</pre>是重新load JS的操作。
也有采用atom或者其它IDE的，atom的優點在于插件豐富，功能強大。
####調試
前端調試當然是用chrome,這方面我經驗不是很多，就不多說了。
###語法
####JSX語法
阮一峰有一系列教程可以參考
[ECMAScript6](http://es6.ruanyifeng.com/#docs/intro)
[ReactNative學習筆記--JS基礎使用語法](http://www.imooc.com/article/14400)
[深入淺出ES6（二）：迭代器和for-of循環](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)
###開源項目和資源
[如何學習React native，有哪些建議或資源？](https://www.zhihu.com/question/56628437)
[美食項目-親測可運行，做的還不錯](https://github.com/ljunb/react-native-iShiWuPai)
[分享 50 個完整的 React Native 項目](https://juejin.im/post/58f37cb361ff4b0058f9824a?utm_source=tuicool&utm_medium=referral)
[React-native開發過程中常見錯誤](http://www.lxweimin.com/p/98c8f2a970eb)
###基于LeetCode的小Demo
實現一個展示題目清單和題目詳情的頁面。
用到組件
- ListView
- View
- Text
- React Navigation(stacknavigator)
- css一些styles，利用flex布局
由于我的數據是array中嵌入json，所以用下面這種處理方法。
[ReactNative中實現實現ListView的數據源是多維數組](http://www.tuicool.com/articles/RVVfui3)
#####TODO
- Leetcode數據爬蟲去爬取||直接本地處理他人題庫存入數據庫
- 有一些開源的如python和nodejs處理的，或者jsoup解析html。
- 代碼格式化處理呈現在React-Native中
- markdown處理代碼風格是怎么做到的？
- 之后的關注點
- state和props特性學習
- tabbar和navigation組件
- react中的多線程技術-如何異步
- 上拉下拉數據刷新
- 圖標展現(i-test)
