在大多的Web页面或Web应用程序中，构建UI仅仅是其中小小的一部分，其中有些UI是纯静态的，但有些UI是会随着用户的操作带来相应变化的。比如，用户通过鼠标点击，键盘按下，视窗大小调整或一系列其他的手势和交互来触发。而这些我们往往称之为事件。在Web中处理事件都是交给JavaScript来完成，同样的，在React中也有相应的事件。在这一节开始，我们就来学习React中的事件。你可能在DOM的世界中对事件的使用有一定的了解。如果没有，也不用担心，我们在开启探讨React的事件之前会对JavaScript中的事件做一个初步的了解。

自从React Hooks的出来，社区讨论Hooks的越来越多。这并不是说React Hooks就优于类组件，但是使用Hooks来构建组件时有一个巨大的可用性提升，特别是因为这些函数组件可以通过React Hooks中的钩子函数来访问状态和生命周期。今天我们就来一起聊聊如何将React的类组件转换为函数组件，用React Hooks中的钩子函数替换类组件中的setState和生命周期方法，比如componentWillMount、componentWillReceiveProps等。因此，让我们首先使用状态和生命周期方法构建一个基于类的React组件。也是大家最为熟悉的ToDoList组件。

学习React也有一段时间了，虽然天天都在围绕着组件打转转，但在React中怎么构建组件呢并没有去深入的了解。事实上呢？在React中的组件还是有些复杂的，从概念上来说就不简单。比如说，类组件，函数组件，无状态组件和高阶组件等。另外创建组件的方式也有所不同，比如最早使用React.createClass来创建组件，有了ES6之后使用extends React.Component（借助ES6的class特性）创建组件，而今天又流行使用函数（Hooks）方式来创建组件。那么他们之间如何创建组件，又有何区别呢？在这篇文章中我们就先来学习和探讨在React中如何创建组件。

前两天在Codepen看到了@Kyle Wetton写的一个示例，使用CSS混合模式和SVG来改变沙发的颜色。非常有意思的一案例。这让我想起了在实际的一些业务场景中的运用，比如说一些美妆的应用中，就有类似的场景。不知道大家是否想深入的了解如何实现这样的效果？如果是，那么请继续往下阅读。

在这一章节中我和大家将一起来探讨CSS中的另一个知识重点，即CSS的定位（position）和层叠控制（z-index）。这两个属性都隶属于**CSS Positioned Layout Module Level 3**模块。当人们在接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来易于掌握。使用定位来布局，表面上你确切的指定了一个元素所处的位置，它坐落在那里。可事实上，定位要比你看到要稍微复杂一点。对于很多CSS的新手，CSS定位和层叠控制还是有些东西会被绊倒，所以在它们成为你惯用技巧前你需要先掌握它们。

前段时间在《深入了解JSX》一文中整理了JSX相关的知识和细节。作为一名Web开发者，不管写纯HTML模板代码还是现在在JSX中写JavaScript和HTML混合的代码，我们都应该有追求，那就是怎么写出更优雅、更具可读性和更易于维护的代码。那么在这篇文章中我们就来一起聊聊如何写出更优雅的JSX代码。

React是众多主流JavaScript框架之一，如果想要较好的掌握React，那么对于JavaScript方面的知识还是非常重要的。但在很多开发者眼里反而顾此失彼，觉得掌握了JavaScript框架就可以无敌，事实上并非如此，至少Web发展至今，HTML、CSS和JavaScript还是Web三大基石。只有更好的掌握这些基础，在平时的工作中才能游刃有余。在接下来的内容中，我们就来一起探讨一下，在学习React的时候，应该具备哪些JavaScript相关的知识，这样才能更有助于我们更好的掌握React。

上周又断档一期了，这周不能再断了。这两天翻阅了@hj_chen在新家坡组织的Talk.css沙龙中的一些PPT，有些内容还是蛮有意思了。国外氛围真不错，其实国内也有不少同学在搞沙龙。前面社区活动也不少，这周参加了腾讯Live前端大会。下个月@裕波在成都举办第五届FEDay。

这几天一直在折腾CSS自定义属性，在《图解CSS：CSS自定义属性》和《CSS 自定义属性在Web组件中的应用》都在聊CSS自定义属性。但这个CSS自定义属性和今天要聊和CSS的自定义属性还是有所不同的。他们隶属于两个不同的规范，前者是CSS Custom Properties for Cascading Variables Module Level 1，后者是CSS Properties and Values API Level 1。虽然都是W3C规范中的内容，但还是有较大差异的。而今天要和大家聊的是后者，即CSS Houdini中的CSS自定义属性。

众所周之，CSS的维护一直是件不易的事情，特别是在构建大型Web站点或Web应用程序时，如果是多人协作的话难度更大。另外，由于CSS语言是一种声明式语言，而且不像其他语言有变量、条件和逻辑等特性，一直生存在程序语言鄙视链的最底层。也因为这个原因，社区中有了各种CSS处理器语言，比如Sass、LESS和Stylus等。这些处理器语言引入了一些类似其他程序语言的特性，比如变量、运算符和逻辑运算等。虽然CSS处理器给编写和维护CSS带来了一些便利，但还是需要额外的编译。不过处理器中的变量着实为我们带来很大的优势，也正因为如此，社区开始将CSS处理器中的变量引入到原生CSS中，经过多年的推进和演变才有了今天的CSS自定义属性。