React

React.js小书:从一个简单的例子讲起

React.js 是一个帮助你构建页面 UI 的库。如果你熟悉 MVC 概念的话,那么 React 的组件就相当于 MVC 里面的 View。如果你不熟悉也没关系,你可以简单地理解为,React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的,这时候组件的显示形态就会发生相应的改变。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。React.js 不是一个框架,它只是一个库。它只提供 UI (view)层面的解决方案。在实际的项目当中,它并不能解决我们所有的问题,需要结合其它的库,例如 Redux、React-router 等来协助提供完整的解决方法。

从零学习 React 技术栈系列教程

Hello大家好,我是余博伦,在接下来的一段时间里,由我和大家从零开始共同学习React技术栈的相关知识。教程将会以连载的形式发布在我的个人博客和微信公众号上,以文字教程为主,辅以一些代码示例供同学们参考,在连载结束之后,我会将所有内容整理为电子书提供下载。连载时教程会在每日早晨由公众号推送,同时为了方便一些外链和代码示例,可以在本博客查看教程。

Webpack入门 以及 CSS模块化

这是讲CSS模块化系列文章的最后一篇,我将探索如何通过Webpack来建一个静态的React网站。这个静态网站将包含模板:一个主页和一个包含几个React组件的页面。我们来看看他们是怎么运作的。之前的文章中我们用Webpack快速搭建了一个工程来展示了所有依赖是如何被导入到一个文件的以及在打包过程中如何将一个唯一的classname同时在csshtml中生成the basics of React。在之前的演示中,我们知道通过js来渲染我们标签,但是我们不清楚如何构建我们项目。在这篇文章中我们将用一个更真实的例子演示如何通过我们新学的Webpack知识来构建我们的项目。我把之前演示的代码放到Github上了 css-modules-react ,你可以通过这个代码开始下面的例子。

React初学者教程15:设置React开发环境

概述:学习如何配置 Node、Babel 和 Webpack 来高效创建 React 应用。最后要学习的是如何设置创建 React 应用的开发环境。回顾一下我们在学习创建第一个 React 应用程序的时候,讨论这种方法时说过:这种方法的负面是性能。因为浏览器除了要加载页面以外,还得把 JSX 转换为实际的 JavaScript。这个转换过程很耗时,最好是在开发期间就转换了。如果应用程序的每个用户都要为这个性能买单,这就不好了。

React 初学者教程14:在React中访问DOM元素

有时我们需要直接访问 HTML 元素上的属性和方法。在 React 的缤纷世界里,JSX 代表纯粹的标记,那么为什么你会想要直接处理可怕的 HTML 呢?因为你会发现,很多时候直接通过 JavaScript DOM API 处理 HTML 元素,比用 React 的方式更简单。

React 初学者教程13:用 React 创建一个简单的 Todo List 应用

概述:通过学习如何创建经典的 Todo List 应用,将所有学过的 React 技巧投入到实战中。如果说创建 “Hello, World!” 示例是庆祝你开始涉足 React,那么创建一个经典的 Todo List 应用是庆祝你接近掌握 React!在本教程中,我们要把已经学习过的很多概念和技术综合在一起,创建一个如下的应用:

React 初学者教程12:在 React 中用 React Router 创建单页应用

现在我们已经熟悉了 React 的基础知识,该提升几个档次了。下面我们要用 React 创建一个单页应用程序(即 SPA)。如同我们在 React 介绍中所言,单页应用程序与传统的多页应用程序是不同的。最大的不同之处在于在单页应用程序中导航是不会进入到一个完全新的页面。单页应用程序中的页面(通常称为视图)通常是在相同页面本身内联加载。

React 初学者教程11:组件的生命周期

在开始,我们以一个很简单的视图组件以及他们要做什么开始。随着我们对 React 更多,做了更酷以及更复杂的事情,结果发现组件并非那么简单。它们帮助处理属性、状态、事件,并且经常负责其它组件的幸福。跟踪组件做的所有事情有时可能很难。

React 初学者教程10:React 中的事件

迄今为止,我们所有的示例都是只在页面加载时执行。你可能会猜到,这是不正常的。在很多应用中,特别是重 UI 类型的应用中,应用程序要做的很多事情只是对某种事情的响应。这里,某种事情可能是被鼠标点击、按键、窗口缩放、或者其它手势操作以及交互。而让所有这一切变得可能的粘合剂是事件

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

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

页面

返回顶部