React.js 小书 Lesson27 - 实战分析：评论功能（六）
2017-11-10
阅读 5 分钟
3.1kReact.js 小书 Lesson27 - 实战分析：评论功能（六） 本文作者：胡子大哈本文原文：[链接] 转载请注明出处，保留原文链接以及作者信息 在线阅读：[链接] {%raw%} 删除评论 现在发布评论，评论不会消失，评论越来越多并不是什么好事。所以我们给评论组件加上删除评论的功能，这样就可以删除不想要的评论了。修改 src/Comm...
React.js 小书 Lesson26 - 实战分析：评论功能（五）
2017-11-10
阅读 3 分钟
2.3k同样地，可以通过类似于用户名持久化的方式对评论列表内容进行持久化，让用户发布的评论在刷新页面以后依然可以存在。修改 src/CommentApp.js：
React.js 小书 Lesson25 - 实战分析：评论功能（四）
2017-11-10
阅读 4 分钟
2.3k目前为止，第二阶段知识已经基本介绍完，我们已经具备了项目上手实战必备的 React.js 知识，现在可以把这些知识应用起来。接下来是实战环节，我们会继续上一阶段的例子，把评论功能做得更加复杂一点。
React.js 小书 Lesson24 - PropTypes 和组件参数验证
2017-11-10
阅读 3 分钟
2k我们来了到了一个非常尴尬的章节，很多初学的朋友可能对这一章的知识点不屑一顾，觉得用不用对程序功能也没什么影响。但其实这一章节的知识在你构建多人协作、大型的应用程序的时候也是非常重要的，不可忽视。
React.js 小书 Lesson23 - dangerouslySetHTML 和 style 属性
2017-11-10
阅读 2 分钟
2kReact.js 小书 Lesson23 - dangerouslySetHTML 和 style 属性 本文作者：胡子大哈本文原文：[链接] 转载请注明出处，保留原文链接以及作者信息 在线阅读：[链接] {% raw %}这一节我们来补充两个之前没有提到的属性，但是在 React.js 组件开发中也非常常用，但是它们也很简单。 dangerouslySetHTML 出于安全考虑的原因（X...
React.js 小书 Lesson22 - props.children 和容器类组件
2017-11-10
阅读 3 分钟
2kReact.js 小书 Lesson22 - props.children 和容器类组件 本文作者：胡子大哈本文原文：[链接] 转载请注明出处，保留原文链接以及作者信息 在线阅读：[链接] 有一类组件，充当了容器的作用，它定义了一种外层结构形式，然后你可以往里面塞任意的内容。这种结构在实际当中非常常见，例如这种带卡片组件： 组件本身是一个不...
React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作
2017-11-10
阅读 2 分钟
2k在 React.js 当中你基本不需要和 DOM 直接打交道。React.js 提供了一些列的 on* 方法帮助我们进行事件监听，所以 React.js 当中不需要直接调用 addEventListener 的 DOM API；以前我们通过手动 DOM 操作进行页面更新（例如借助 jQuery），而在 React.js 当中可以直接通过 setState 的方式重新渲染组件，渲染的时候可以把...
React.js 小书 Lesson20 - 更新阶段的组件生命周期
2017-11-10
阅读 1 分钟
2.2k从之前的章节我们了解到，组件的挂载指的是将组件渲染并且构造 DOM 元素然后插入页面的过程。这是一个从无到有的过程，React.js 提供一些生命周期函数可以给我们在这个过程中做一些操作。
React.js 小书 Lesson19 - 挂载阶段的组件生命周期（二）
2017-11-10
阅读 3 分钟
2k这一节我们来讨论一下对于一个组件来说，constructor 、componentWillMount、componentDidMount、componentWillUnmount 这几个方法在一个组件的出生到死亡的过程里面起了什么样的作用。
React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）
2017-11-10
阅读 4 分钟
3.3kReact.js 小书 Lesson18 - 挂载阶段的组件生命周期（一） 本文作者：胡子大哈本文原文：[链接] 转载请注明出处，保留原文链接以及作者信息 在线阅读：[链接] 我们在讲解 JSX 的章节中提到，下面的代码： {代码...} 会编译成： {代码...} 其实我们把 Header 组件传给了 React.createElement 函数，又把函数返回结果传给了...
React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升
2017-11-10
阅读 3 分钟
1.9k上一个评论功能的案例中，可能会有些同学会对一个地方感到疑惑： CommentList 中显示的评论列表数据为什么要通过父组件 CommentApp 用 props 传进来？为什么不直接存放在 CommentList 的 state 当中？例如这样做也是可以的：
React.js 小书 Lesson16 - 实战分析：评论功能（三）
2017-11-10
阅读 5 分钟
2.6kReact.js 小书 Lesson16 - 实战分析：评论功能（三） 本文作者：胡子大哈本文原文：[链接] 转载请注明出处，保留原文链接以及作者信息 在线阅读：[链接] 接下来的代码比较顺理成章了。修改 CommentList 可以让它可以显示评论列表： {代码...} 这里的代码没有什么新鲜的内容，只不过是建立了一个 comments 的数组来存放一...
React.js 小书 Lesson15 - 实战分析：评论功能（二）
2017-11-10
阅读 5 分钟
1.7kReact.js 小书 Lesson15 - 实战分析：评论功能（二） 本文作者：胡子大哈本文原文：[链接] 转载请注明出处，保留原文链接以及作者信息 在线阅读：[链接] 上一节我们构建了基本的代码框架，现在开始完善其他的内容。 处理用户输入 我们从 ComponentInput 组件开始，学习 React.js 是如何处理用户输入的。首先修改 Compone...
React.js 小书 Lesson14 - 实战分析：评论功能（一）
2017-11-10
阅读 4 分钟
3.3k课程到这里大家已经掌握了 React.js 的基础知识和组件的基本写法了。现在可以把我们所学到的内容应用于实战当中。这里给大家提供一个实战的案例：一个评论功能。效果如下：
React.js 小书 Lesson13 - 渲染列表数据
2017-11-10
阅读 5 分钟
2.4kReact.js 小书 Lesson13 - 渲染列表数据 本文作者：胡子大哈本文原文：[链接] 转载请注明出处，保留原文链接以及作者信息 在线阅读：[链接] 列表数据在前端非常常见，我们经常要处理这种类型的数据，例如文章列表、评论列表、用户列表…一个前端工程师几乎每天都需要跟列表数据打交道。 React.js 当然也允许我们处理列表...
React.js 小书 Lesson12 - state vs props
2017-11-10
阅读 2 分钟
1.7kReact.js 小书 Lesson12 - state vs props 本文作者：胡子大哈本文原文：[链接] 转载请注明出处，保留原文链接以及作者信息 在线阅读：[链接] 我们来一个关于 state 和 props 的总结。 state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修...
React.js 小书 Lesson11 - 配置组件的 props
2017-11-10
阅读 5 分钟
2.2k组件是相互独立、可复用的单元，一个组件可能在不同地方被用到。但是在不同的场景下对这个组件的需求可能会根据情况有所不同，例如一个点赞按钮组件，在我这里需要它显示的文本是“点赞”和“取消”，当别的同事拿过去用的时候，却需要它显示“赞”和“已赞”。如何让组件能适应不同场景下的需求，我们就要让组件具有一定的“可配...
React.js 小书 Lesson10 - 组件的 state 和 setState
2017-11-10
阅读 4 分钟
2.3k我们前面提到过，一个组件的显示形态是可以由它数据状态和配置参数决定的。一个组件可以拥有自己的状态，就像一个点赞按钮，可以有“已点赞”和“未点赞”状态，并且可以在这两种状态之间进行切换。React.js 的 state 就是用来存储这种可变化的状态的。
React.js 小书 Lesson9 - 事件监听
2017-11-10
阅读 3 分钟
2.6k在 React.js 里面监听事件是很容易的事情，你只需要给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性，例如我们现在要给 Title 加上点击的事件监听：
React.js 小书 Lesson8 - 组件的组合、嵌套和组件树
2017-11-10
阅读 2 分钟
1.6k继续拓展前面的例子，现在我们已经有了 Header 组件了。假设我们现在构建一个新的组件叫 Title，它专门负责显示标题。你可以在 Header 里面使用 Title组件：
React.js 小书 Lesson7 - 组件的 render 方法
2017-11-10
阅读 4 分钟
2.1kReact.js 中一切皆组件，用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候，一般都需要继承 React.js 的 Component（还有别的编写组件的方式我们后续会提到）。一个组件类必须要实现一个 render 方法，这个 render 方法必须要返回一个 JSX 元素。但这里要注意的是，必须要用一个外层的 JSX 元素...
React.js 小书 Lesson6 - 使用 JSX 描述 UI 信息
2017-11-10
阅读 4 分钟
2.4kReact.js 小书 Lesson6 - 使用 JSX 描述 UI 信息 本文作者：胡子大哈本文原文：[链接] 转载请注明出处，保留原文链接以及作者信息 在线阅读：[链接] 这一节我们通过一个简单的例子讲解 React.js 描述页面 UI 的方式。把 src/index.js 中的代码改成： {代码...} 我们在文件头部从 react 的包当中引入了 React 和 React.js...
React.js 小书 Lesson5 - React.js 基本环境安装
2017-11-10
阅读 2 分钟
2.5kReact.js 单独使用基本上是不可能的事情。不要指望着类似于 jQuery 下载放到 <head /> 标签就开始使用。使用 React.js 不管在开发阶段生产阶段都需要一堆工具和库辅助，编译阶段你需要借助 Babel；需要 Redux 等第三方的状态管理工具来组织代码；如果你要写单页面应用那么你需要 React-router。这就是所谓的“React...
React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类
2017-11-10
阅读 4 分钟
2.2kReact.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类 本文作者：胡子大哈本文原文：[链接] 转载请注明出处，保留原文链接以及作者信息 在线阅读：[链接] 为了让代码更灵活，可以写更多的组件，我们把这种模式抽象出来，放到一个 Component 类当中： {代码...} 这个是一个组件父类 Component，所有的组件都可以...
React.js 小书 Lesson3 - 前端组件化（二）：优化 DOM 操作
2017-11-10
阅读 3 分钟
4k看看上一节前端组件化（一）：从一个简单的例子讲起我们的代码，仔细留意一下 changeLikeText 函数，这个函数包含了 DOM 操作，现在看起来比较简单，那是因为现在只有 isLiked 一个状态。由于数据状态改变会导致需要我们去更新页面的内容，所以假想一下，如果你的组件依赖了很多状态，那么你的组件基本全部都是 DOM 操作。
React.js 小书 Lesson1-2 - 前端组件化（一）：从一个简单的例子讲起
2017-11-10
阅读 4 分钟
4.6kReact.js 是一个帮助你构建页面 UI 的库。如果你熟悉 MVC 概念的话，那么 React 的组件就相当于 MVC 里面的 View。如果你不熟悉也没关系，你可以简单地理解为，React.js 将帮助我们将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。
如何在非 React 项目中使用 Redux
2017-06-28
阅读 7 分钟
5.7k本文作者：胡子大哈 原文链接：[链接] 转载请注明出处，保留原文链接和作者信息。 目录 1、前言 2、单纯使用 Redux 的问题 2.1、问题 1：代码冗余 2.2、问题2：不必要的渲染 3、React-redux 都干了什么 4、构建自己项目中的 “Provider” 和 “connect” 4.1、包装渲染函数 4.2、避免没有必要的渲染 5、总结 6、练习 1、前言...
ES6：spread syntax —— JavaScript 将元素应用于数组和函数的优雅方法
2017-05-12
阅读 3 分钟
4.6k编译：胡子大哈 翻译原文：[链接] 英文连接：ES6: The spread syntax — A concise way of applying elements to arrays and functions in JavaScript 转载请注明出处，保留原文链接以及作者信息 上一篇文章中，我介绍了一些关于 ES6 解构方法的新特性。 本文中我们一起来看一下另外一个 JavaScript 新增语法 —— spread s...
ES6：解构——JavaScript 从数组和对象中提取数据的优雅方法
2017-04-24
阅读 3 分钟
30k本文编译：胡子大哈 翻译原文：[链接] 英文连接：ES6: Destructuring — an elegant way of extracting data from arrays and objects in JavaScript 转载请注明出处，保留原文链接以及作者信息 ES6 有很多新特性，它很大程度上提升了 JavaScript 的编程体验，并且也告诉外界，JavaScript 依旧强势。 其中一个新特性是其...
手把手教你用 JavaScript 实现一个简单的国际象棋 AI
2017-04-21
阅读 5 分钟
15.1k本文作者： Lauri Hartikka 编译：胡子大哈 翻译原文：[链接] 英文连接：A step-by-step guide to building a simple chess AI 转载请注明出处，保留原文链接以及作者信息 首先让我们先看几个对开发简单国际象棋 AI 很有帮助的概念： 移动生成 局面评估 极大极小算法 α-β 剪枝 每一步中我们都会对经过时间检验的国际象棋...
- 1(current)
- 下一页