标签React下的文章

dz 发布于 07月08, 2017

为什么我们需要中间件来处理redux的异步流

原文地址: StackOverFlow - Why do we need middleware for async flow in Redux?

官方文档说:如果不用中间件middleware,Redux store只支持同步数据流。 我不太明白为什么,为什么不能在组件中直接调用异步API,然后dispatch action?

例如:一个只有一个输入框和按钮的UI,用户点击按钮,然后从远程抓取数据填充到该输入框。

阅读全文 »

网络埋伏纪事 发布于 05月05, 2017

【译】React 初学者教程 6 :传递属性

原文:http://www.zcfy.cc/article/1535

处理属性有令人沮丧的一面,在前一个教程中我们已经看到了一点。在只处理一层组件时,将属性从一个组件传递到另一个很简单。但是如果你想将一个属性在多层组件之间传递,事情就开始变得复杂了。

事情变得复杂从来不是一件好事情,所以在本教程中,我们来看看我们怎么做才能让在多层组件之间传递属性变得容易。

阅读全文 »

网络埋伏纪事 发布于 05月05, 2017

【译】 React 初学者教程 5 :创建复杂的组件

原文:http://www.zcfy.cc/article/1533

简介:通过学习如何识别和创建依赖于其它组件的组件,从而轻松创建复杂 UI。即根据组件可组合性,来创建复杂的组件。

在前一教程中,我们学习了组件以及组件可以做的很棒的一些事情。我们知道组件是主要的方式,React 允许我们的界面元素像可重用的砖块一样,组件包含自己要运行所需要的所有 HTML、JavaScript 和样式。除了可重用性外,组件还带来另一个主要的优点:允许可组合性。我们可以组合组件来创建更复杂的组件。

在本教程中,我们会具体看看这些到底是个什么意思。更具体地说,我们会看看两件事情:

  1. 你需要知道的无聊的技术上的事情
  2. 当看到一大块界面元素时如何识别组件这种你需要知道的无聊的事情

OK,我们将要学习的内容实际上并非那么无聊。我是先把你的期望值降低 :P

前进!

阅读全文 »

网络埋伏纪事 发布于 05月03, 2017

【译】React 初学者教程 4: 在 React 中设置样式

原文:http://www.zcfy.cc/article/1527

长期以来,我们都是用 CSS 格式化 HTML 内容。用 CSS,可以很好地分离内容和表现形式。CSS 的选择器语法给我们很大的灵活性,来选择哪个要格式化,哪个会略过。你甚至找不到太多的问题来憎恨 CSS 的层叠。

好了,不要告诉 React 这些。React不会积极地憎恨 CSS,但是它格式化内容时,有一个不同的视角。正如迄今为止我们所看到的,React 的核心思想之一是让应用程序的界面部分可以自包含和重用。这就是为什么组成界面的 HTML 元素和 JavaScript 装到同一个称为组件的桶中的原因。在上一个教程中我们已经品尝过组件。

如何格式化 HTML 元素?样式应该放在哪里?你可能猜到我们会在哪里处理这点。如果把样式放在另一个地方,我们就没法有一个自包含的 UI 块。这就是为什么 React 鼓励我们把样式与 HTML 和 JavaScript 放在一起的原因。在本教程中,我们将学习这种神秘的,可能是骇人听闻的格式化内容的方法。当然,我们还会看看如何使用 CSS。React 为两种方式都提供了空间,即使 React 可能有点点不这样认为 :P

阅读全文 »

网络埋伏纪事 发布于 05月02, 2017

React 初学者教程 3:React 中的组件

原文地址:https://www.kirupa.com/react/components.htm

组件是让 React 变得美好的事情之一,它是定义人们在使用应用程序时所看到的视觉和交互的主要方式之一。假如我们要完成的 app 是下面这个样子:

这是完成了的界面。在开发期间,从 React 项目的角度看,就不那么动人了。这个应用的视觉的几乎每一个部分都被封装在在一个称为组件的自包含模块内。这里为了突出 “几乎每一个” 的含义,我们来看看如下的图:

每个虚线代表一个独立的组件,该组件负责视觉界面以及交互。不要让这吓到你。虽然它看起来很复杂,但是很快你会看到,一旦我们有机会用组件的方式开发,一切就会开始变得很有意义。

阅读全文 »

网络埋伏纪事 发布于 05月02, 2017

React 初学者教程 2: 创建第一个 React 应用

> 原文地址:https://www.kirupa.com/react/building_your_first_react_app.htm

通过前面一章的学习,我们已经了解了有关 React 的基本信息,以及它是如何帮助我们轻松创建即使是最复杂的用户界面。但是对于 React 提供的所有精彩来说,刚开始学习它可不是最简单的事情。React 的学习曲线相当陡峭,里面大大小小的障碍不少。

本章会从创建一个简单的 React 应用开始。在学习中,会直接遇到一些障碍,有些障碍我们现在姑且略过。在本教程末尾,我们不仅可以创建一些可以骄傲地展示给朋友和家人看的东西,还可以为后面的教程中 深入 React 打下良好的基础。

阅读全文 »

网络埋伏纪事 发布于 05月02, 2017

React 初学者教程 1:React 简介

原文链接:https://www.kirupa.com/react/introducing_react.htm

今天的 Web 应用程序除了外观比过去更好看以外,应用程序的架构和创建方式已经和过去有很大的不同。为突出这点,我们来看看如下的应用:

这是一个简单的商品目录浏览应用程序,它和这种类型的其它应用程序一样,通常包含一个主页、一个搜索结果页、一个详情页等等。

阅读全文 »