React-native初窥(关于leetcode试题想法)

早就听说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```

安装启动后

![React-Native项目一般目录结构](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)
我这个项目比较老，依赖没有参考性，有的依赖升级后，变动很大了，比如说react和react-native两个库中的组件更替。

###IDE和调试
####IDE
IDE推荐WebStorm(2017.1月版网上已有[激活码](http://www.jianshu.com/p/4a2875961dd0),和IDEA同根同源，使用习惯和界面风格类似)
[WebStorm里面配置运行React Native的方案](http://www.cnblogs.com/shaoting/p/6110202.html)
这一方案可实时根据JSX代码查看界面，非常方便，直接运行，不用打开xcode占用内存了。
注意运行React-Native在iOS Simulator中，两个快捷键经常用到。
command+D
可以打开设置选项，可以允许chrome远程调试和实时更新操作；而
command+R
是重新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.jianshu.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)