一个iOSer如何一步步跟上RN的大潮（一）

前言

自从 2015 年 ReatNative 横空出世，移动开发就被刮起来一阵“ RN ”风，作为一名 iOSer 也想蹭一下热度，于是乎就开始学习 ReactNative ，想着哪天能够站在前端开发大组的制高点指点江山。然而，现实就是这么的丰满，把苗条的理想揍成了一个瘸子，每天在思考“这是啥玩意”，“为啥这么写”。幸好在我绝望的时候，一道圣光拯救了我，从去年一开始学习 React到 现在 RN 版本的项目即将上线，我也可以算是从一个 iOSer 跟上了RN 的大潮，接下来我会分享下我是如何踏上这艘巨轮的。（本文只是为 native 小白指路，大神可绕）

web基础

饭不是一口吃掉的，神功也不是一下就练成的。 —— ——鲁迅

鲁迅说的对！因为 RN 的项目预计是 2017 年 2 月份开，但是 2016 年到这段时间也不能闲着，我们的老大说“先学习 react 吧，你做下前端的项目吧”。于是，我又捡起了前端知识开始 web 项目。虽然需求简单，但是这东西都是好多年前的事了，自己跟没学差不多了。 起初，在 w3cschool 上学习，感觉简单轻快明了，后来同事跟我说学这个才是正确的姿势--https://developer.mozilla.org/zh-CN/
上面 html 、 css 十分的详尽，每天我都在饭空的时候看一点点，不断的写着小 demo ，前端的基础知识算是及格了，但是写起需求来还是有些不知所措。古人语，“三人行必有我师”，学习别人的代码是我们最快的进步方式。开始写项目我也蒙圈也不会，也不知道该怎么去找答案，我就翻整个项目去看和我整个类似的功能，看别人的代码实现来学习。

JS的学习

JS 是前端最重要的语言了，也是 RN 的根基语言，所以学好 JS 是毋庸置疑的。学习一门语言前期是很痛苦的，因为它的很多写法会对你之前的编写代码的思维方式产生冲击，但是熬过去就好了。
JavaScript 由三部分组成：
　　1. ECMAScript（核心)
　　作为核心，它规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象

image.png

　　 2.DOM（文档对象模型）
　　DOM 把整个页面映射为一个多层节点结果，开发人员可借助 DOM 提供的 API ，轻松地删除、添加、替换或修改任何节点。

image.png

　　 3. BOM （浏览器对象模型）
　　支持可以访问和操作浏览器窗口的浏览器对象模型，开发人员可以控制浏览器显示的页面以外的部分。

ES5和ES6，他们之间有什么区别？

ES5 就是作为 ECMAScript 第五个版本（第四版因为过于复杂废弃了），对应的 ES6 则是在保证向下兼容的前提下，作为 ECMAScrip t第六个版本了。如果想问 ECMAScript 跟 Javascript 有什么关系，大家就自行百度吧，这里就不再赘述。ES6 较 ES5 有较大的更新，而且 ES6 更接近 Java 等高级语言。举个栗子，ES5 中是没有类的概念的，当然大家可以自行实现，而 ES6 中就存在了 Class 关键字来定义类，所以现在 ES6 前端必备的技能了，而且我们的项目也是使用 ES6 ，本文的代码讲解也使用 ES6 。
语言是不断衍变的，我们使用新的东西当然也要知道它是因为解决什么问题而存在的，所以 ES6 、ES6 我们都要掌握。
废话太多直接上书：
　　　JavaScript权威指南(第6版)(中文版)
　　　ECMAScript 6 入门
还有一本最近在看超赞的书：
　　　你不知道的JavaScript
　　第一本当作文档查阅，夯实基础；第二本要仔细阅读，直接关乎 React 跟 ReactNative 的项目编写；第三本是从 JS 的进阶书籍，让你更好的掌握 JS 。

timg.jpeg

环境的配置

常用的NPM命令

做 iOS 的没人不知道 cocoapods 吧，同样做前端的没有人不知道 NPM 。NPM 安装项目的依赖简直不要太方便。

NPM 的全称是 Node Package Manager ，是随同 NodeJS 一起安装的包管理和分发工具，它很方便让
JavaScript 开发者下载、安装、上传以及管理已经安装的包。

下面介绍下npm常用的命令吧：

• npm install ---安装package.json里面的依赖库，类似 pod install 。
• npm install --安装最新版本的指定依赖，例：npm install react-native-code-push。
• npm install @version --安装指定版本的指定依赖，例：npm install npm install [email protected]。
• npm install --save ---功能同 instal l，save 会自动把模块和版本号添加到 dependencies 部分。
• npm install -g ---带 g 参数是全局安装，不带 g 参数是本地安装（全局安装与本地安装的区别）。
• npm uninstall --save --卸载模块，参数同上。
• npm ls --以文件树的方式展示依赖

image.png

• npm init --创建一个package.json文件，类似podfile文件。

  ok ，以上技能是成为一个前端开发者最基本最基本的技能，也是我这一路走来的学习历程希望能给大家带来收获，下一篇我们会进入 Reac t学习与实战 并且接下来的文章我会穿插一些实战的技巧。