React

这一集去给应用添加一个简单的搜索功能，先在标签栏上添加一个搜索标签，点击可以打开搜索页面，在上面会显示一个文本框（TextInput），输入关键词并回车，会执行搜索，等待搜索结果的时候会在文本框的右边显示一个加载指示器。服务端用的是豆瓣提供的电影搜索 API ，应用得到返回来的搜索结果以后会把它们都显示出来，点击列表里的某个项目可以打开详细的页面。

主要是去熟悉 TextInput 这个组件，它就相当于是我们平时用的文本框，在上面添加一个属性可以影响文本框的功能，比如去定制键盘的类型，回车键上的文字等等。也可以在文本框上绑定一些动作，在用户输入内容，离开文本框，按一下回车键以后去做指定的事情。

订阅宁皓网，学习现有的 React 相关的课程，新课程发布以后也可以继续学习。

现在的网站单纯去展示内容已经不够了，我们需要给用户更好的交互体验，所以现在的网站更像是一个应用程序（APP）。最近一段时间，宁皓网做了一些跟 React 相关的课程，把这些课程组织到一块儿，您就可以使用 React 去创建体验更好的前端应用，甚至是可以运行在 Android 或 iOS 平台的本地应用。这套课程总时长不过 4 小时，我猜只有在宁皓网才有这样的课程，几小时就可以理解一样新东西 ：）

传统的网站是这样工作的：用户在浏览器访问一个地址，浏览器向网站服务器发出请求，服务器收到请求并处理，然后返回给浏览器需要的所有的 HTML，浏览器再把这些 HTML 解释成用户能看得懂的页面。现在我们说的网站更接近是一个前端应用，也就是大部分逻辑运算是直接在用户的浏览器上进行的，浏览器向服务器请求的只是数据部分，收到数据，把数据塞进页面需要的地方显示给用户，React 这个框架非常擅长做这样的事情。

React 的工作方式感觉很对，把应用分解成小组件，再把它们组合到一块儿用。React 的出现也影响了其它的所有的前端框架。React Native 是创建移动应用的，比如 iOS ，Android 平台上的应用，Facebook 的移动应用就是用的 React Native，我猜他们不会拿几亿用户开玩笑的。

最近录了两部关于 React Native 的课程，课程里面手写每一行代码，从头开始做一个可以运行在 iOS 平台上的电影小应用。应用的顶部有个导航栏，下面是一个电影内容的列表，可以滚动屏幕去浏览，内容数据是从服务端得到的，用的是豆瓣提供的 api ，按一下某个项目可以打开新的页面显示电影的详细内容，按一下导航栏上的返回按钮，可以返回继续浏览内容列表。应用的底部有一个标签栏，点击不同的标签可以切换显示不同的页面。

如果您有兴趣学习 React Native，提前先做个作业，学一下 React 基础，还有 Flexbox 这两个课程。开发用的语言是 JavaScript，您也可以先学一下相关的课程。

课程视频片断（无声音）：

今年三月份， Facebook 开源了 React Native 。下面是 Tom Occhino 在博客上介绍 React Native 的文章。

一切都是从 React 开始

两年前 Facebook 发布了 React ，从那以后，React 不管是在 Facebook 的内部还是外部都在高速的成长。其实没人强制我们使用 React，不过今天在 Facebook 里创建的新的 Web 项目，通常都会用到 React 去创建。在整个行业内，React 也是被广泛的使用。工程师们爱用 React，是因为它可以让工程师更多的去关注自己的产品。一段时间以后，我们才开始意识到是什么让 React 如此的强大。

React 强制我们要把应用分割成一些小的组件，每个组件都代表单独的视图，也就是应用里的某个部分的显示。这样我们就不再需要把整个系统都装到脑袋里才能修改其中的一小部分，这些小组件可以让我们更容易迭代自己的产品。而且在使用 React 开发的时候，代码变得可预测，这就让我们也更有自信的去快速迭代，应用也会更可靠。React 不仅让我们更容易去扩展应用，也更容易去扩大整个团队。

在 Web 上的快速迭代，让我们可以使用 React 创建牛 x 的产品，Facebook.com 上有很多组件也都是用 React 创建的。另外我们也在 React 之上创建了一些不错的框架，比如 Relay，它会让提取数据变得更容易一些。当然，Web 只是其中一部分，Facebook 也有大量的 Android 还有 iOS 应用，这些各种不同的平台 ，让我们很难去组织工程师团队，这也只是在开发移动应用的时候遇到的其中一个问题。

React 出生不久就被广泛的应用在各大网站上，facebook，instagram，netflix，airbnb，uber，alipay ... 下面是一些使用 React 的案例。

https://www.netflix.com

React 是 Facebook.com 内部使用的一套框架，Instagram 的网页版全部是基于这个框架做的。所以这个框架并不是做出来玩玩的，而是要真正的去解决实际的问题。React 影响了所有的其它的前端框架。如果你现在打算做一个前端应用，除了 Angular ，Ember 以外，也可以考虑一下 React 框架。

React 主要的功能是去创建要显示出来的东西，暂时你可以想成是去创建要显示在网页上的东西。很多网页上的组件并不是静态的，服务端的数据发生变化以后，你要更新这些组件的显示，传统的方法就是刷新整个页面，或者使用 Ajax 请求回数据以后，再根据这些数据去处理组件的显示。React 提供了一套更有效的方法去做这件事。

使用 React ，我们只需要去创建一些要显示的组件，在组件里设置一下什么地方要显示什么样的数据，这样组件就会按照你设计的去显示。当组件里的数据有变化的时候，React 会自动去更新需要更新的组件，从此以后，就不再需要 “找到页面上的 xx 元素，把它里面的内容设置成 yy ” 。

React 是 Facebook 在内部用的一套创建用户界面的 JavaScript 框架。他可以让我们用一种极具表达的方式去创建界面上的组件，你可以重复利用这些组件，可以把不同的组件组合在一起用。创建好组件以后，当组件里的状态（数据）发生变化以后，组件会自动更新这些变化，而且速度非常的快。