现代 CSS

转载

React 初学者教程9:从数据到 UI

在创建应用时,术语 propsstate、组件、JSX 标记、render 方法以及其它 React 主义也许是你脑袋中最后考虑的事情。大部分时间,你是处理 JSON 对象、数组以及其它数据结构形式的数据,这些数据与 React 或者界面无关。跨越数据和最终看到的结果之间的鸿沟可能是令人沮丧的!但是不要担心。本文会通过将你将会遇到的一些常见场景都过一遍,来帮助减少这些令人沮丧的时刻。

React 初学者教程8:处理状态

到目前为止,我们已经创建的组件都是无状态的(stateless)。它们有从它们的父组件传递进来的属性(亦称 props),但是一旦组件活跃起来,就没有什么能改变它们。一旦属性被设置了,就被当作是不可修变的(immutable)。对于很多交互场景来说,你肯定不想这样子。在一些用户交互发生,或者一些数据从服务器或者其它地方返回过来时,你想能改变组件的外观。

React 初学者教程7:深入 JSX

你可能已经注意到,在前面的教程中我们用到很多 JSX。但是我们确实还没有认真看看 JSX 到底是什么。它实际上是如何工作的呢?为什么我们不就把它叫 HTML 呢?它到底有哪些怪癖?在本教程中,我们将回答所有这些问题。我们将做一些严肃的回溯(以及一些前溯),来深入看看为了探险,我们需要知道有关的 JSX 的什么。

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

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

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

简介:通过学习如何识别和创建依赖于其它组件的组件,从而轻松创建复杂 UI。即根据组件可组合性,来创建复杂的组件。在前一教程中,我们学习了组件以及组件可以做的很棒的一些事情。我们知道组件是主要的方式,React 允许我们的界面元素像可重用的砖块一样,组件包含自己要运行所需要的所有 HTML、JavaScript 和样式。除了可重用性外,组件还带来另一个主要的优点:允许可组合性。我们可以组合组件来创建更复杂的组件。

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

长期以来,我们都是用 CSS 格式化 HTML 内容。用 CSS,可以很好地分离内容和表现形式。CSS 的选择器语法给我们很大的灵活性,来选择哪个要格式化,哪个会略过。你甚至找不到太多的问题来憎恨 CSS 的层叠。好了,不要告诉 React 这些。React不会积极地憎恨 CSS,但是它格式化内容时,有一个不同的视角。正如迄今为止我们所看到的,React 的核心思想之一是让应用程序的界面部分可以自包含和重用。这就是为什么组成界面的 HTML 元素和 JavaScript 装到同一个称为组件的桶中的原因。在上一个教程中我们已经品尝过组件。

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

组件是让 React 变得美好的事情之一,它是定义人们在使用应用程序时所看到的视觉和交互的主要方式之一。在开发期间,从 React 项目的角度看,就不那么动人了。这个应用的视觉的几乎每一个部分都被封装在在一个称为组件的自包含模块内

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

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

React 初学者教程 1:React 简介

今天的 Web 应用程序除了外观比过去更好看以外,应用程序的架构和创建方式已经和过去有很大的不同。这是一个简单的商品目录浏览应用程序,它和这种类型的其它应用程序一样,通常包含一个主页、一个搜索结果页、一个详情页等等。

CSS Modules 详解及 React 中实践

CSS 是前端领域中进化最慢的一块。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展,CSS 被远远甩在了后面,逐渐成为大型项目工程化的痛点。也变成了前端走向彻底模块化前必须解决的难题。

页面

返回顶部