React-Native学习笔记——Hello,World

背景

先列出一些关键字:facebook、reactjs、react-native;reactjs是facebook开发的前端框架,react-native是facebook创造的一套混合开发解决方案。react-native应用页面及业务逻辑使用reactjs开发,当然还要写一些原生代码。

所以正确的学习路线为:es6、reactjs、react-native。
es6可以先了解最基本的module语法、类的定义,reacjs和react-native的入门可以看官网教程。

开发工具

原生部分:Android自然是Android Studio,IOS自然是XCode;reactjs编辑器:WebStorm、VS Code、Atom等,看个人喜好;调试平台:可以选择Chrome调试js代码,当然有的编辑器也有提供调试的插件直接进行调试。笔者的选择是Android Studio+WebStorm+Chrome。

准备工作

对于RN工程的环境搭建和集成不了解的请看http://blog.****.net/u012455070/article/details/78926526。

使用WebStorm写reactjs,可以安装一些辅助插件,如下

React-Native学习笔记——Hello,World

还有WebStorm对于eslint规范的配置,可以参考http://m.blog.****.net/Cy_Shay/article/details/78217381

Hello,World

首先在适当的目录下新建一个helloworld.js文件,如下

React-Native学习笔记——Hello,World
修改入口文件index.js,如下

React-Native学习笔记——Hello,World


工程根目录运行react-native run-android,即看到效果,如下

React-Native学习笔记——Hello,World
好了,就是这么简单。