发表于 | 分类于 | 阅读次数

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

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

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

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

让我们开始吧！

阅读全文 »

发表于 | 分类于 | 阅读次数

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

HOST

按钮的开发需要注意它的形状、颜色、空间、排版和前景，这些都很重要。前四个主要是依赖于网页的主题，而最后一个则是取决于你需要达成的目标。例如，你可以在用户点击后，等待的时间里在按钮上加入转轮点亮的动画；又或是，加入一些更吸引眼球的动画效果。如此一来，添加动画效果可以使按钮产生的效果最大化。那么，接下来为你介绍这 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），因此零碎的迁移会导致页面重量的增加，直到旧版本的库被移除才会减少。

阅读全文 »

发表于 | 分类于 | 阅读次数

当提到为某个应用或网站构建 UI 时，ReactJS 往往是首先列出的最好的 JavaScript 库。首先它是开源的，并且已经在 Instagram 和 Facebook 上得到实践。还有一些著名的网站也使用 ReactJS 去构建他们的 UI，例如 Airbnb，Khan Academy，BBC，Netflix 等等。

如果你仍然在学习 ReactJS 的路上，并用它构建动态的用户界面，这里有一些教程能帮助你加速学习进程。

下面列出的是一些开发者和作者所写的一部分教程，他们能帮你从新手提升到专家。

ReactJs.net 的教程

这是众多版本的 React 教程之一。这个专门为设计师和开发者去“入门” React 和探索其功能而写的。本教程涵盖了利用 ReactJS 库去创建一个全新的 asp.net MVC 网站的完整流程，并且保证了学习的深入浅出。开始一个新项目的基本流程是，安装 React，构建 component，优化等等。

Ken Wheeler - 学习 ReactJS

这是 Ken Wheeler 在 Scotch.io 上发表的一篇很棒的教程。在去年发表的时候至今，已经有超过 200 条的分享，当然这些也只有在开发者社区圈里才会对此感兴趣。可以说这是目前找到的 ReactJS 最好的教程之一。此教程主要分为五个部分，从基础开始，涵盖了什么是 React，虚拟 DOM 是如何工作的，如何构建页面，生命周期的说明和 state 等。

阅读全文 »