学习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自定义属性。

今天我们不聊什么是CSS自定义属性，而把重点放在CSS自定义属性在组件中怎么使用，她又会给我们设计组件带来什么样的变化和相应的优势。在这篇文章中，我们主要会探讨CSS自定义属性为Web组件服务，以及怎么利用CSS自定义属性来维护组件。

上个周末因为自己要写PPT而没来得急整理，所以又错过了一期。在这一期中，大部分内容将围绕着@Bill Mei的《Top 10 most deadly CSS mistakes made by new and experienced developers》文章中提到观点来展开。这里面的一些观点虽然不完全对，但还是有相应的参考价值，取舍由大家自己来决定。如果你在这方面也有相关的经验，也欢迎在下面的评论中分享。另外在后面会简单的整理几个最近觉得有意思的新东西。感兴趣的同学，请继续往下阅读。