测试是开发周期中的一个重要组成部分。没有测试的代码被称为：遗留代码。对于我而言，第一次学习 React 和 JavaScript 的时候，感到很有压力。如果你也是刚开始学习 JS/React，并加入他们的社区，那么也可能会有相同的感觉。想到的会是：

• 我应该用哪一个构建工具？
• 哪一个测试框架比较好？
• 我应该学习哪种流模式？
• 我需要用到流吗？

为了解决这些烦恼，我决定写这篇文章。经过几个小时的博客文章阅读，查阅 JS 开发者的源码，还有参加 Florida 的 JSConf，终于让我找到了自己的测试“槽”。开始让我觉得没有经过测试的 React 程序代码是如此的不标准和凌乱。我想活在一个没有这种感觉的世界，但后来想想，这是不对的。

本教程所有的代码都可以在我的 github 仓库中找到。

让我们开始吧！

你能想象网页中没有按钮吗？我打赌你不会。在网页中，拥有按钮并不奇怪，这些看似很小、主要以矩形表现（如导航栏，版权信息）的东西，其实是网页 UI 中基础之一。它们不仅使链接看起来更有分量、吸引人和鲜明，而且他们还能提高跳转率和用户体验，使之更方便和直观。这些 CTA （Call-to-action：行为召唤）能帮你获得更多的潜在客户和促进业务的扩展。

按钮的开发需要注意它的形状、颜色、空间、排版和前景，这些都很重要。前四个主要是依赖于网页的主题，而最后一个则是取决于你需要达成的目标。例如，你可以在用户点击后，等待的时间里在按钮上加入转轮点亮的动画；又或是，加入一些更吸引眼球的动画效果。如此一来，添加动画效果可以使按钮产生的效果最大化。那么，接下来为你介绍这 20 个很棒的按钮代码，它们能使按钮更加丰富，且用户体验超好。

波浪形按钮

作者：Nikolay Talanov

无论你信不信，JavaScript 和 CSS 已经开始重叠，并为 CSS 增加了更多的功能。当我在写 CSS 与 JavaScript 交互中你可能不知道的 5 种方式的时候，读者对于 CSS 与 JavaScript 已经重叠的事感到很惊讶。那么今天，我会着重为你介绍 7 个可以通过 CSS 完成的任务 —— 不使用 JavaScript 或图像处理！

CSS @supports

每个优秀的前端工程师都会在使用某个特性前测试一下，确保是否在浏览器中可以使用。而这类测试通常是由 JavaScript 完成的，当然，也有很多人用 Modernizr（拥有很多很好功能的测试工具）来测试特性。那么现在有一个 CSS 新的 API 可以让你去做特性测试：@supports，下面的例子将简单地教你如何使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* basic usage */
@supports(prop:value) {
  /* more styles */
}

/* real usage */
@supports (display: flex) {
  div { display: flex; }
}

/* testing prefixes too */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      float: none;
    }
}

前言

React 已经在开发者圈越来越流行了，并且有很多说明其技术优势的资源。然而，迁移（或是选择）一个新的框架最终归结为向所有人推销 —— 包括非开发者。这里会有一小部分工程经理或项目经理会因为它的新颖，而选择使用它来重构，更糟的是，很多团队被 JavaScript 的高生产工具搞得焦头烂额了，可悲的是向后移动项目是向前移动 web 的一部分。这篇文章并不是试图教你关于 React 的新东西，只是试着去总结以下，起点是为了向所有人说明 React 的疑惑，不仅是开发者。

总结：React 是一个为创建可组合的用户界面的库。同比其他类似的库如 Angular、Backbone、Knockout 和 Ember，React 的出现是为了解决业务问题而非技术的。接下来会为你解释 React 的重要性和对开发团队的益处。

降低风险

稳定性 —— Facebook 花了很大的精力在 React 上（Newsfeed，Instagram，Messenger，Ads Marketplace 等），并且拥有专职的技术团队来维护这个项目。它的 dog-food 测试和投资都不是现有的任何一个项目能比的。除了 Facebook 内部的工程师，还有一大批 React 的爱好者。随着版本的更迭，目前在 github 上拥有 571 个贡献者（截止到 2015 年 12 月）。

正在使用 React：AirBnB，Asana，Atlassian，BBC，Chegg，CloudFlare，CNN.com，Codecademy，Coursera，Craftsy，Dailymotion，Dropbox，Expedia，Facebook，Feedly，Flipboard，HipChat，IMDb，Imgur，Instagram，Khan Academy，KISSmetrics，Mattermark，Minerva Project，Netflix，OkCupid，Rackspace，Rally Software，Ralph Lauren，Reddit，Redfin，Salesforce，Squarespace，The New York Times，Trunk Club，Twitter，Uber，University of Cincinnati，Venmo，WhatsApp，Wired，Wix，WordPress，Yahoo，Zendesk

开发效率

强大的路径迁移 —— React 允许开发者可以根据自己的需求将其放到任何一个已经存在的页面上。值得注意的是，React 是需要加载一个运行时的库（React 0.14.0 的大小是 39.4 kb），因此零碎的迁移会导致页面重量的增加，直到旧版本的库被移除才会减少。