React

一起来学一下基于 React 框架开发前端应用。

2017.02.22 更新：创建 React Native 项目

最近更新了一下在 React Native 课程里做的一个小项目，支持新版本的 React 与 React Native。我录了一个视频，没有过多剪辑，基本上就是一个完整的在 macOS 上运行 React Native 的 iOS 应用的全过程，你可以边看边操作。

项目更新

安装新版的 react-native-cli  工具，然后用这个新的工具去创建一个全新的 React Native 项目，我又把自己写的项目代码复制到这个新的项目里面，这样再次运行 React Native 就不会有什么问题了。

项目代码更新

我们在 React Native 课程里做的小项目用了豆瓣提供的 API：

• Top250：豆瓣评价最好的 250 个电影。
• 北美票房榜
• 电影搜索：搜索关键词返回相关的电影。
• OAuth 2.0：登录认证。

这篇文章的目的是让你理解创建一个 React 项目的最小配置过程。React 官方为你提供了创建 React 项目的工具（create-react-app），用它可以很简单创建 React 项目，基本不需要做任何的配置，直接就可以进入到开发过程。但这个过程太过神奇，我认为还是要理解一下，创建一个 React 项目，至少要做的一些配置。

创建 React 项目（2017）

打算创建一个 React 应用，你得先准备一大堆工具，你还得配置一下，让它们可以混合在一起工作。比如你需要编译 JavaScript 用的 Babel，打包用的 webpack，一个在本地运行的服务器等等。

React 现在提供了一个 create-react-app 小工具，使用它可以非常方便的创建 React 项目，它会为你准备好一个简单的 React 项目，并且安装配置好 React 应用需要的所有的工具。

安装工具

确定电脑上已经安装好了 node 与 npm。然后去安装 create-react-app：

npm install -g create-react-app

创建 React 项目

使用 create-react-app 创建一个简单的 React 应用，ninghao-react 是我的 React 项目的名字：

新版本的 WordPress 在核心里已经集成了 REST API，插件或主题的开发者可以利用它去创建自己的 REST 接口。不过你想直接使用它的话，还需要安装一个 WP REST API 插件，它里面定义了一些接口，可以输入与输出在 WordPress 上的内容资源，比如文章，用户，媒体文件等等。

我们需要先学一下怎么样使用 WP REST API 提供的这些接口，怎么在应用里发出请求，请求回来的数据是什么样子的，怎么把数据提交给 WordPress 去存储。接着我们会把在 《React 本地应用》系列课程里创建的一个小项目的后端服务替换成 WordPress。

这里还要知道怎么把内容里的新的字段放到 REST 接口的响应里，比如文章的特色图像，文章的自定义字段，这些东西默认在响应里找不到，我们会使用自定义插件与安装第三方插件这两种方法，把新的字段放到 REST 接口的响应用里。

我们先会介绍一下 Drupal 8 新的 REST API ， 了解怎么样获取到 Drupal 上的数据，获取到的数据是什么样的，怎么把数据提交给 Drupal 去存储。然后再学一下怎么样利用 Drupal 的 REST API 创建应用， 我们会使用在 《React 本地应用》系列课程里创建的一个小项目，把这个移动应用的后端服务替换成 Drupal 。

在下面这个视频的演示里，你会看到，我们使用 Drupal 的视图创建了一个可以输出电影列表的 REST 接口，你可以在视图里控制每页输出的项目的数量。

我们的自己的应用里，使用其它平台的帐号登录，这就是 oAuth 提供的功能。很多平台都支持 oAuth，比如 QQ，微博，微信，你可以让用户使用他们在这些平台上的帐户登录。用户在这些平台提供的登录页面上，完成授权验证以后，在我们的应用里就可以使用他们的一些相关的资源了，比如得到他们的个人用户信息。这部分功能我分成了几个部分，首先您要看一下 oAuth 2.0 身份验证。

我们需要在真正的设备上去调试自己开发的应用，这样才能得到用户的真正的使用体验。使用 React Native 创建的项目，您可以在 Android 或 iOS 真正的设备上去调试。下面介绍一下在 iOS 设备上运行 React Native 项目的方法。

准备

• 一台 Mac 电脑。想开发 iOS 平台的应用，您必须有一台安装了 OSX 系统的电脑，这样才能安装它的开发者工具 Xcode 。
• 一台 iOS 设备。iPhone，iPad 都可以。
• 一张支持国际货币的信用卡。用来支付苹果开发者计算的会员费。
• 加入苹果开发者计划。在苹果的开发者网站可以去申请，每年需要交六百多块人民币的会员费用。

实施

获取到自己电脑的 IP

在真正的 iOS 设备上运行应用，我们仍然可以使用本地电脑上的开发服务器，不过需要修改项目的一个地方，您要先确定你的 Mac 与 iOS 设备在同一 WIFI 环境下，然后查看一下自己电脑的 IP 地址，Mac 用户可以打开终端，运行 ifconfig 命令查看自己电脑的 IP 地址，比如我知道自己的 WIFI 环境下，设备的 IP 地址是以 192 开头的，所以可以这样：

Mac 查看 IP 地址：

→ ifconfig | grep 192
 inet 192.168.1.140 netmask 0xffffff00 broadcast 192.168.1.255

打开电影列表页面，一开始只会显示前二十个电影，向下滚动页面，到底儿以后，应用会去请求新的内容，再把新的电影内容放到当前的页面上显示出来，在等待服务端返回结果期间，会在页脚显示一个加载指示，这就是无限加载功能。

在应用的搜索页面上请求搜索，把这些搜索记录存储到应用的 AsyncStorage 里，在搜索页面上可以获取到这些搜索历史记录，把它们显示出来。搜索记录里不会包含重复的内容，点击搜索历史里的某个项目，会用这个项目重新进行搜索，每条搜索记录的前面有一个删除按钮，按下去可以删除掉当前这条搜索记录。