踏出理解函数式编程概念的第一步是最重要的一步，有时也是最难的一步。不过也不一定，取决于你们的思考方式。柯里化如果你还记得Part 3的内容，我们在组合mult5和add的时候遇到了问题，因为mult5接收一个参数而add接收两个。只要限制所有函数都只接收一个参数，就可以轻松地解决这个问题。相信我。这没听上去那么糟。我们创建一个add函数，它接收两个参数，但是每次只接收一个参数。柯里化函数允许我们这么做。柯里化函数是一种每次只接收一个参数的函数。它允许我们在add与mult5组合前先传入它的第一个参数。JavaScript里，我们可以这样实现add函数：var add = x => y => x + y这个版本的add是一个先接收一个参数，之后再接收另一个参数的函数。具体来说，这个add接收单一参数x，然后返回一个接收单一参数y的函数，这个函数最终返回x和y的加和。现在可以用这个版本的add来构建一个可用的mult5AfterAdd10了：var compose = (f, g) => x => f(g(x)); var mult5AfterAdd10 = compose(mult5, add(10));compose函数接收两个参数，f和g。返回一个接收一个参数x的函数，x会先传入g执行后，结果再传入f。实际上我们做了什么？我们将旧的add函数转换成了柯里化 ...继续阅读 (14)

踏出理解函数式编程概念的第一步是最重要的一步，有时也是最难的一步。不过也不一定，取决于你们的思考方式。函数组合身为程序员，我们很懒。不想在写完代码后一遍又一遍地构建，测试，发布。我们总是在寻找只写一次然后在其它地方多次复用的方法。代码复用听上去很棒但实现起来很难。代码太定制化就不能重用，太通用化的代码首先就很难用。所以我们需要的是平衡两者的方法，将小的，可重用代码块像积木一样通过组合来实现更复杂的功能。在函数式编程中，函数就是我们的积木。我们可以创建它们来完成指定的任务并像乐高积木一样将它们组合在一起。这就叫函数组合。如何实现呢？通过下面的两个函数看一下：var add10 = function(value) { return value + 10; }; var mult5 = function(value) { return value * 5; };代码太冗长了，用箭头函数重写一下：var add10 = value => value + 10; var mult5 = value => value * 5;看上去好多了。现在如果还需要一个函数，接收一个参数然后先加10，然后再讲结果乘以5。可以这么写：var mult5AfterAdd10 = value => 5 * (value + 10)即使这是一个很简单的函数，我们也不想把这个函数重 ...继续阅读 (24)

本文转载自：众成翻译译者：Geoff链接：http://www.zcfy.cc/article/1762原文：https://css-tricks.com/things-ive-learned-css-grid-layout/以下是来自Oliver Williams的帖子。 Oliver已经学习了相当长时间的原生CSS网格，可以说是在CSS网格方面有一定的发言权。在这篇文章中，他将以非同寻常的思路分析自己的CSS网格布局学习之路。我比较赞同他的想法，就是学习一门新技术的时候，把它们拆分成比较小的单元块并配上实例，一步一步的学习。这比直接学习网格布局的所有东西要好太多了。浏览器原生CSS网格预计会在2017年年初得到支持。在这之前你需要在浏览器中开启这个实验性的功能(Firefox实验版默认是开启的)。Chrome Canary是当前最好的实现。 同时，火狐有一个非常好的插件叫CSS Grid Inspector， 它能显示出网格的线，它是目前唯一可以在浏览器中运行的此类工具。在 chrome的地址栏中输入chrome://flags, 找到 ‘实验性网络平台功能’ 并开启它。 IE 和 Edge 实现的是一个比较老的网格标准，现在并不受支持。网格布局不是将零散的块拼到一起相信我，很快你就能掌握它的.网格布局只能像左边那样，以矩形的单元块组合起来。并不能像右图那样，由一堆零散的多边形 ...继续阅读 (17)

前段时间有个关于CSS的话题“既然写CSS很容易，那为什么大家还是把CSS写的那么烂呢”？其实这样的话题一直都存在。不过这里我要说的不是能不能写好CSS，我想和大家一起分享几个CSS的新特性。这个也是上周在天津在线回声公司分享的一个话题。整理一下有关于PPT中的内容，希望对大家有所帮助。点击这里，可以下载PPT，不过自备天梯。聊CSS新特性现状印象中，每次聊到CSS的新特性，大家都比较会排斥，觉得这些新属性对于大家平时的工作没有任何的帮助，因为都不知道这些属性什么时候才能被浏览器支持。其实我想说的是，这是一个误区，也是自己给自己找借口的一种声音。早在2010年的时候，说到CSS3，国内类似的声音非常的多，了解和学习CSS3有卵用，一句话“然并卵”。但是不到两年时间，很多人都觉得自己没有早点学习这方面的CSS属性。为什么变化会这么快呢？技术就是如此，当有新东西出来之时，你没有一定的预知感，没有一定的好奇感，没有一定的尝试心，那么注定你将跟着人家的屁股后面追赶，而且追的好累，还不一定能追上。其实开篇不想说这么多的废话，只想告诉大家，应该不断的去学习新的东西，哪怕现在使用不上，但总有一天你的所学会被用上。开始今天的话题之前，先告诉大家，文章中提到的用例，建议您采用最新版本的Chrome浏览器浏览。要聊的CSS新特性对于前端而言，最深的体会就是“贵圈真乱”。不停的在变，而且变得很快。其实对 ...继续阅读 (14)

最近有一个关于CSS的话题“既然写CSS很容易，那为什么大家还是把CSS写的那么烂呢？”。对于这样的话题，大家或许觉得没有什么，顶多也就是各种槽点。但事实上，在天朝CSS很多时候是不被看好，相比国外的同行，很少有人在专研CSS领域。这也造成，能写好CSS的同学不多，甚至说越来越少。今天我也想借着@裕波举办的“中国CSS开发者大会（第三届）”即将来临之际说说CSS。我要说的不是如何写好CSS，或者说学习CSS。我想和大家聊聊布局的演变史，因为到时我也将在CSS开发者大会上分享一个话题——“CSS Grid Layout”。这篇文章就算是前奏吧。Web的演化路程在互联网的演化过程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。在这个阶段，网站的内容主要是文字内容和图片为主，制作方法也主要使用表格拼装为主。印象中，那时候网页三剑客非常出名，画个表格，往里填充图片，文字，就叫网页了。2005年以后，互联网进入了Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端也由此发生了翻天覆地的变化。网页也不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更多好的使用体验，这些都是基于前端技术实现。技术发展是日新月异，现在业内人员开始提出Web3.0的概念。最常见的解释是，网站内的信息可以直 ...继续阅读 (18)

起因在 echart 的 Issue 上看到有人有水球百分比可视图的需求, 并且在 pull-request 上看到有人有类似实现，但是却感觉实现的并不完美，于是想自己尝试实现。样式思路主要的核心代码还是水波动画的构建，这里我使用的是Sin()图像模拟的方法。 只要对Sin()函数进行一定的变形 （如：Sin(0.5 * (X+0.07))） 就能够模拟出类似的水波效果。如何实现动画呢？ 只要设定一个周期变量，每一帧不断平移周期 就能模拟出水波运动的效果，最后使用ctx.clip使用 绘制好的圆路径对水波进行裁切，就能得到最终的结果。数学基础这里设计到一些中学学到的知识，一起回忆一下。请允许我盗一张图：上图中展现了 从Sin(X) -> 2Sin(X + PI / 6)的情况。我们可以看到，如果对Sin(X)乘以 一个大于1的系数（2）函数的振幅会变得陡峭，反之 如果乘以一个小于1的系数 函数的振幅则会变得平坦 所以我们称 这个系数为振幅。如果对 自变量X加上 系数PI/6那么函数就会向左移，反之如果减去 某一系数 则会向又移动 ， 我们称这个系数为偏移量。如图展示了sin()和cos()的图像，可以发现 他们是有规律的 无限函数，并且以一定周期 往复循环，所以我们 将 从0到2*PI成为一个周期。模拟水波首先我们尝试一下画出一个标准的Sin()曲线：<canvas i ...继续阅读 (19)

一直以来在大家的印象中，处理图像的效果都应该是设计师的工具，甚至这些事情应该都交给PhotoShop之类的设计软件来完成。但是随着CSS的技术发展以及浏览器更新，前端人员通过CSS也可以做一些图像的处理。今天就是想跟大家聊聊如何通过CSS来处理图像效果。处理图像效果的CSS属性处理图像效果分很多种，比如说：改变图像大小：使用CSS的width和height或者使用CSS的transform中的scale改变图像形状：使用CSS的transform中的skew改变图像位置：使用CSS的position或者transform中的rotate、translate裁剪图像：使用CSS的clip（现在该属性已被clip-path取代）改变图像透明度：使用CSS的opacity上面这些是早前在Web中处理图像常看到的方式方法，但在处理图片的制作软件中，有一个图片叠加的功能。而这种功能才是处理图像效果的一种利器，我们常称之为叠加模式（其实就是图层的叠加模式）。其制作出来的图像效果，跟我们前面所说的都不一样。那么问题来了，在Web中如何使用CSS的属性来实现类似的效果呢？时至今日，CSS的发展让我们具备了一些这方面的能力，当然，接下来介绍的内容，只适合在某特定浏览器中才会有效果，所以在此建议您使用Chrome最新版本浏览下面示例效果。CSS滤镜CSS提供了一种称之为滤镜特性，这种特性能帮助我们更好 ...继续阅读 (27)

这篇文章主要是整理了国外两场有关于CSS分享大会分享的相关主题，前面一部分是@Chris Coyier在CSS Dev Conf大会上做的相关笔记。最后在文章末尾附上了2016年CSS Conf分享的相关主题。如果你对CSS相关话题感兴趣的话，可以关注2016年12月17日在中国广州举办的第三届CSS Conf大会相关主题。特别声明：文章中附有多份Slides和Videos，而且大部分都在墙外，如果在浏览器不能看到相关数据，请君自备天梯到墙外。我连续五年都参加了CSS Dev Conf大会。虽然这个会议聚集点有点小，但说实话我一直非常喜欢这种会议。每次会议不会有什么大惊喜，主要集中在分享CSS方面的主题，对于我而言，在这里每一次都可以获取到CSS有关的最新资讯和趋势。过去在CSS Dev Conf出现的主题：预处理器、CSS架构、测试、性能...去年主要讲的是SVGCSS Dev Conf是一个多轨道(multi-track)会议，加上我错过了最好的机会在上面展示和讲述CodePen。所以下面的的内容并不是代表整个会议的。我只能说对不起，明年重新来过。Mike Riethmuller分享的响应式排版响应式排版其更确切的说是“先进的洗式排版”。他还获得最佳展示！我想，这是应得的。他从介绍calc()如何工作开始，然后引入视窗单位(viewport units)以及将这些运用到font ...继续阅读 (13)

腾讯深圳ISUX UI开发（前端开发、网站重构)toB业务，产品竞争对手 Microsoft Azure，Amazon Web Services， 阿里云。主要负责腾讯云项目 你将会与我们的交互、视觉设计师亲密合作，你将会站在用户的角度，利用自己的专业知识提供优雅的前端代码，同时保证产品在各个平台上的一致性（并非指代每一个像素一模一样）。联系方式联系QQ 858618768E-mail：rockywen@tencent.com要求：有丰富的:响应式经验 or SVG经验 orCanvas经验 or 性能经验 优先大专或以上学历3年以上前端经验深刻理解语义化、css布局、渐进增强、平稳退化，熟练使用原生js编写常见交互。精通解决跨UA不一致性的经验，比如：windows平台上的IE6/7/8、标准浏览器以及MAC平台上的Safari。熟练使用常用调试工具如果您有个人技术博客，那就更好了人要靠谱 ...继续阅读 (26)

思考许久才动笔写这篇文章。那么问题来了？为什么要写这篇文章呢？其实有一定的原因：万能的知乎上常有同学邀请我回答：今年26岁，女生，想要学Web前端开发，0基础？作为一个刚入门的前端爱好者，以后立志成为前端攻城狮的我，应该要学习哪些方面的知识？我想做Web，怎么学习？...自从录制前端视频上线之后，也有一些同学问我类似的问题，而且也有同学问，应不应该购买视频，或者说参加线下前端培训班，或者说还是自己自学等等。那么今天来聊聊这些个话题。什么是前端什么是前端？大部分指的是Web前端开发，这个词是从网页制作演变过来的，名称上有着很明显的时代特征。在互联网的演化过程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。在这个阶段，网站的内容主要是文字内容和图片为主，制作方法也主要是使用表格拼装。印象中，那时主FrontPage这样的，画个表格，往里面填真图片，文字，就叫网页了。2005年以后，互联网进入了Web2.0时代,各类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页也不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更多好的使用体验，这些都基于前端技术实现。在这个时代，给前端冠上的名称也多了，“做网站的”、“美工”、“网站设计师”、“切页面的”、“前端工程师”等等。同时 ...继续阅读 (48)

踏出理解函数式编程概念的第一步是最重要的一步，有时也是最难的一步。不过也不一定，取决于你们的思考方式。友情提示请仔细通读示例代码。确保自己的确看懂了。每一节都是在上一节的基础上进行的。如果你心急跳过了，对后面部分的理解就可能会出现偏差。重构花一分钟时间考虑一下如何重构下面的JavaScript代码：function validateSsn(ssn) { if (/^\d{3}-\d{2}-\d{4}$/.exec(ssn)) console.log('Valid SSN'); else console.log('Invalid SSN'); } function validatePhone(phone) { if (/^\(\d{3}\)\d{3}-\d{4}$/.exec(phone)) console.log('Valid Phone Number'); else console.log('Invalid Phone Number'); }我们之前总是在写这样的代码，而且可以发现这两个函数只有一点细微的不同。避免复制validateSsn，粘贴后改成validatePhone这样的写法，我们应该创建一个单一函数，将粘复制贴后需要修改的部分参数化。这个例子中，我们将参数化被验证值，正则 ...继续阅读 (18)

布局一般都是遵循按行和列等线性原则，Web网站的布局到今天为止很大程度上受到这些原则的影响。虽然CSS Grid的出现让布局变得更好，更灵活，但相对于印刷媒体而言，Web布局总体上还是受到很好的限制，特别是内容流上。杂志和报纸一直有很好的办法来安排内容。比如文本绕着非矩形排列。直到目前为止，Web上的布局都局限于规则矩形排列，无法让内容流实现非矩形布局。接下来让我们一起探讨如何使用CSS Shapes模块让Web布局能像杂志和报纸一样让文本内容实现不规则矩形排列。CSS Shapes简介CSS Shapes使网页设计师能更好的实现自己的创意，除了简单的长方形和正方形，还可以实现任何几何图形布局。改规范提供了两个新的CSS属性：shape-outside和shape-margin。浏览器支持这些规范是有一定道理的，尽管这些属性目前仅可以在Chrome、Opera和Safari看到效果，而且还需要带上浏览器的私有属性-webkit,因此使用的是-webkit-shape-outside和-webkit-shape-margin。shape-outside属性将使用内容能绕着不规则几何图形排列，不在是中规中距的矩形。最初也可以让内容在一个元素内呈现，比如几何图形是一个圆形，那么文本在这个圆形内呈现，文本也将呈现成一个圆圈形状。然而这效果已经推迟到CSS Shapes Level 2中实现 ...继续阅读 (22)

在这个系列教程中的《列和间距》一文中了解到了在CSS Grid布局中如何实现流体网格列和列间距。也了解到了没有必要指定网格项目具体的值就可以实现网格项目的排列位置。如果显式声明网格属性，网格项目根据自动排列算法，会使网格排列变得更糟糕。在这篇文章中我们将看看这个算法是如何影响网格项目的位置排列。配置如果你的浏览器不支持CSS Grid，那么你可以先阅读系列中第一篇文章《快速入门》。开始制作一个网格这个案例是制作一个网格。它需要一个容器，并且使用display:grid;将其声明为一个网格容器；另外这个容器有18个子元素。希望这个网格是具有五个列，每个列的宽度相同，并且具有相同数量的行，网格之间的间距为2px。grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); grid-gap: 2px;到目为止，看到的网格很好，它有18个网格子，一行一行的向下排列，看上去就像是使用float得到的排列效果。注：看到的效果是从左到右排列，如果你想得到一个从右到左的排列，可以使用direction:rtl。稍作调整上面的效果看上去整洁漂亮。但如果我们改变第七个网格.item-7，让这个网格变得更大，占据两行两列，那么网格会变成什么样：.item-7 { background: #e03f3f; g ...继续阅读 (17)

本文转载自：众成翻译译者：网络埋伏纪事链接：http://www.zcfy.cc/article/1556原文：https://www.kirupa.com/react/setting_up_react_environment.htm概述：学习如何配置 Node、Babel 和 Webpack 来高效创建 React 应用。最后要学习的是如何设置创建 React 应用的开发环境。迄今为止，我们都是通过包含几个 JS 文件来创建 React 应用的：<script src="https://fb.me/react-15.1.0.js"></script> <script src="https://fb.me/react-dom-15.1.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>头两个脚本文件用于加载 React 库，最后一个脚本文件用于加载 Babel， 帮助浏览器将 JSX 转换为 JavaScript：回顾一下我们在学习创建第一个 React 应用程序的时候，讨论这种方法时说过：这种方法的负面是性能。因为浏览器除了要加载页面以外， ...继续阅读 (15)

本文转载自：众成翻译译者：网络埋伏纪事链接：http://www.zcfy.cc/article/1558原文：https://www.kirupa.com/react/accessing_dom_elements.htm有时我们需要直接访问 HTML 元素上的属性和方法。在 React 的缤纷世界里，JSX 代表纯粹的标记，那么为什么你会想要直接处理可怕的 HTML 呢？因为你会发现，很多时候直接通过 JavaScript DOM API 处理 HTML 元素，比用 React 的方式更简单。为强调这些情况中的一个，看看 colorizer 示例：(view in separate window):Colorizer会用你提供的颜色给当前白色正方形上色。要看到它起作用，请在文本框中输入颜色值，点击Go按钮。如果不知道要输入什么颜色，就填yellow好了。一旦你提供了一个颜色，并提交了，白色正方形就会变成你提供的颜色：这种正方形的颜色改变为你提供的有效颜色值是很棒的，但它并非是我想让你关注的。我要你关注的是，在你提交一个值后的文本框和按钮。注意按钮获得了焦点，你刚提交过的颜色值依然显示在表单内。如果你要输入另一个颜色值，需要显式让焦点回到文本框，清除当前存在的值。这看起来是不必要的，从可用性的角度看，我们能做得更好！现在，如果在提交了颜色后，能立即清除已有的颜色，并且将焦点返回到文 ...继续阅读 (16)

本文转载自：众成翻译译者：网络埋伏纪事链接：http://www.zcfy.cc/article/1554原文：https://www.kirupa.com/react/simple_todo_app_react.htm概述：通过学习如何创建经典的 Todo List 应用，将所有学过的 React 技巧投入到实战中。如果说创建 “Hello, World!” 示例是庆祝你开始涉足 React，那么创建一个经典的 Todo List 应用是庆祝你接近掌握 React！在本教程中，我们要把已经学习过的很多概念和技术综合在一起，创建一个如下的应用：这个 Todo List 应用的工作方式很简单。在文本框中键入任务，按下 Add（或者回车）。在提交了任务之后，你会看到它作为一个条目出现。你可以继续添加任务到附加条目，并让它们都显示出来：很简单，对吧？在如下的小节中，我们将从头开始创建这个应用，详细学习在此过程中一切是如何发生的。开始首先创建一个新 HTML 文档。在其中添加如下内容：<!DOCTYPE html> <html> <head> <title>React! React! React!</title> <script src="https://fb.me/react-15.1.0.js">< ...继续阅读 (32)

本文转载自：众成翻译译者：网络埋伏纪事链接：http://www.zcfy.cc/article/1547原文：https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm概述：通过学习如何使用 React Router 来创建一个单页应用，来提升 React 技能。现在我们已经熟悉了 React 的基础知识，该提升几个档次了。下面我们要用 React 创建一个单页应用程序（即 SPA）。如同我们在 React 介绍中所言，单页应用程序与传统的多页应用程序是不同的。最大的不同之处在于在单页应用程序中导航是不会进入到一个完全新的页面。单页应用程序中的页面（通常称为视图）通常是在相同页面本身内联加载。当内联加载内容时，要稍微复杂一些。最难的部分不是加载内容本身，加载内容本身相对较为容易。最难的部分是确保单页应用的行为与用户习惯的方式一致。当用户在应用程序中导航时，他们期望：显示在地址栏的URL总是反映用户正在浏览的事情。用户可以成功地使用浏览器的后退和向前按钮。用户可以使用合适的URL直接导航到特定的视图（即深度链接，deep link）。在多页应用中，这三件事情是自然而然的，不需要为这些事情费神。而在单页应用中，因为不能导航到一个全新的页面，我们就必须为处理这三件用户期望的事情做一 ...继续阅读 (20)

本文转载自：众成翻译译者：网络埋伏纪事链接：http://www.zcfy.cc/article/1545原文：https://www.kirupa.com/react/component_lifecycle.htm概述：学习生命周期方法，从而更好地理解组件能做和不能做什么。在开始，我们以一个很简单的视图组件以及他们要做什么开始。随着我们对 React 更多，做了更酷以及更复杂的事情，结果发现组件并非那么简单。它们帮助处理属性、状态、事件，并且经常负责其它组件的幸福。跟踪组件做的所有事情有时可能很难。为帮助做这些事情，React 给我们提供了一些生命周期方法。生命周期方法是组件正常运转时自动调用的特殊方法。它们告知我们组件生命中重要的里程碑，我们可以用这些通知来只是注意，或者改变组件要做的事情。本教程中，我们将要看看这些生命周期方法，并学习我们能用它们做什么。初识生命周期方法生命周期方法不是很复杂。我们可以把它们当作是在组件生命中的不同的点被调用的美化的事件处理器，并且就像事件处理器一样，我们可以在这些不同的点编写代码做一些事情。在深入之前，我们先来快速了解一下生命周期方法。它们是componentWillMount,componentDidMount,componentWillUnmount,componentWillUpdate,componentDidUpdate,shoul ...继续阅读 (25)

本文转载自：众成翻译译者：网络埋伏纪事链接：http://www.zcfy.cc/article/1543原文：https://www.kirupa.com/react/events_in_react.htm概述：通过学习如何处理事件，学习如何将无趣的 React 应用变为有趣而具互动性的应用。迄今为止，我们所有的示例都是只在页面加载时执行。你可能会猜到，这是不正常的。在很多应用中，特别是重 UI 类型的应用中，应用程序要做的很多事情只是对某种事情的响应。这里，某种事情可能是被鼠标点击、按键、窗口缩放、或者其它手势操作以及交互。而让所有这一切变得可能的粘合剂是事件。现在，你可能从 DOM世界中使用事件的体验中已经熟悉了事件。（如果没有的话，那么我推荐你先快速复习一下）。React 处理事件的方式有点不同，如果没有密切关注的话，这些不同之处会以不同的方式让你吃惊。不要担心。这就是为什么要有本教程的原因。我们先从几个简单的示例开始，然后逐步看看更多古怪的、复杂的、烦人的事情。监听和响应事件学习 React 事件最简单的方式就是用它。这里我们先做一个简单的示例，每次点击按钮后，计数器增一：每次点击+按钮，计数器就增加1。点击几次按钮后，就是这样子的：在幕后，本例的工作方式很简单。每次点击按钮，就触发一个事件。我们监听该事件，当事件被监听到时，做各种 React 干的事情，让计数器更新。起 ...继续阅读 (19)

本文转载自：众成翻译译者：网络埋伏纪事链接：http://www.zcfy.cc/article/1539原文：https://www.kirupa.com/react/from_data_to_ui_in_react.htm简介：利用 JSX 的灵活性，将烦人的数据转化为甜蜜的 UI 元素。在创建应用时，术语props、state、组件、JSX 标记、render 方法以及其它 React 主义也许是你脑袋中最后考虑的事情。大部分时间，你是处理 JSON 对象、数组以及其它数据结构形式的数据，这些数据与 React 或者界面无关。跨越数据和最终看到的结果之间的鸿沟可能是令人沮丧的！但是不要担心。本文会通过将你将会遇到的一些常见场景都过一遍，来帮助减少这些令人沮丧的时刻。示例为帮助弄清楚你将要看到的所有事情，我们需要一个示例。这也没什么复杂的，所以继续，创建一个新的 HTML 文档，写入如下代码：<!DOCTYPE html> <html> <head> <title>React! React! React!</title> <script src="https://fb.me/react-15.0.0-rc.2.js"></script> <script src="https: ...继续阅读 (20)

本文转载自：众成翻译译者：网络埋伏纪事链接：http://www.zcfy.cc/article/1539原文：https://www.kirupa.com/react/dealing_with_state.htm到目前为止，我们已经创建的组件都是无状态的（stateless）。它们有从它们的父组件传递进来的属性（亦称props），但是一旦组件活跃起来，就没有什么能改变它们。一旦属性被设置了，就被当作是不可修变的（immutable）。对于很多交互场景来说，你肯定不想这样子。在一些用户交互发生，或者一些数据从服务器或者其它地方返回过来时，你想能改变组件的外观。我们所要的是另一种超越属性的在组件上存储数据的方式，即存储可以修改的数据。我们所需要的是称为状态（state）的东西。在本教程中我们打算学习有关状态的一切，以及如何使用状态来创建有状态的组件。使用状态如果你知道如何处理属性，就基本上也知道了如何处理状态。虽有二者之间有些不同，但是很不明显，现在就先不用马上啰嗦，我们直接在一个小例子中使用状态。我们要创建一个简单的雷击计数示例：这个示例所做的没啥特殊的。地球表面的雷击大约是一秒100次。我们有一个计数器增加你看到的数字。起点本例的主要焦点是看看如何处理状态。前面我们已经做过很多个示例，这里我们就不打算从头开始创建了。只需要修改以前的 HTML 文档，修改为以下代码即可：<! ...继续阅读 (26)

本文转载自：众成翻译译者：网络埋伏纪事链接：http://www.zcfy.cc/article/1537原文：https://www.kirupa.com/react/meet_jsx_again.htm你可能已经注意到，在前面的教程中我们用到很多 JSX。但是我们确实还没有认真看看 JSX 到底是什么。它实际上是如何工作的呢？为什么我们不就把它叫 HTML 呢？它到底有哪些怪癖？在本教程中，我们将回答所有这些问题。我们将做一些严肃的回溯（以及一些前溯），来深入看看为了探险，我们需要知道有关的 JSX 的什么。一、JSX 背后发生了什么？我们已经掩盖的最大的事情之一，是试图推断在编写完 JSX 后，JSX 发生了什么。它是如何最后在浏览器中变成 HTML 的？看看如下示例，在这里我们定义了一个Card组件：var Card = React.createClass({ render: function() { var cardStyle = { height: 200, width: 150, padding: 0, backgroundColor: "#FFF", WebkitFilter: "drop-shadow(0px 0px 5px #666)", filter ...继续阅读 (17)

本文转载自：众成翻译译者：网络埋伏纪事链接：http://www.zcfy.cc/article/1535原文：https://www.kirupa.com/react/transferring_properties.htm处理属性有令人沮丧的一面，在前一个教程中我们已经看到了一点。在只处理一层组件时，将属性从一个组件传递到另一个很简单。但是如果你想将一个属性在多层组件之间传递，事情就开始变得复杂了。事情变得复杂从来不是一件好事情，所以在本教程中，我们来看看我们怎么做才能让在多层组件之间传递属性变得容易。问题概述假如你有一个深度嵌套的组件，并且它的层级看起来像这样子（用很棒的彩色圆建模）：你想做的是，将一个属性，从红色圆一路下来传递到紫色圆。我们做不到的是这种很明显又直观的事情：你不能直接把一个属性传递到目标组件上。原因与 React 的工作机制有关。React 强制一个命令链，在链中，属性必须从父组件向下流动到直接的子组件。也就是说，在传递一个属性时，你不能跳过子层。这还意味着你的子组件不能把一个属性传回到父组件。所有的通讯是从父到子单向的。在这些指导方针下，将一个属性从红色圆传到紫色圆看起来有点像这样：在目标路径上的每个组件不得不从其父组件上接收这个属性，然后重新发送该属性给它的子组件。这个过程会一直重复，直到属性到达最终目标。问题就在这个接收和重新发送的步骤上。如果你必须将一 ...继续阅读 (16)

今天要聊的网格系统不是CSS Grid Layout，而要聊的是类似960gs。到止前为止类似于960gs的网格系统成熟的系统有很多套了。SusyGridlexGumby GridBootstrap GridFoundation GridFlexbox GridFLUIDABLEGetskeleton GridUnsemanticMaterialize Grid其他Grid系统实现Grid系统的方案如果忽略CSS Grid Layout特性，所讲的Grid系统都是源自于960gs。而实现这种网格系统所用的方案至今天而言主要实现方式有：固定网格系统流式网格系统固定网格系统：固定网格系统所说的就是网格的列宽、列数、列间距都是固定的值，比如使用的是px值。流式网格系统：流式（也称之为自适应网格系统），也就是网格的列宽，列间距都是使用的百分比，而列数是固定的值，最常见的和固定网格一样，是12列。但一般情况，流式网格系统都会给网格容器设置一个最大宽度(max-width)。而实现网格系统的方法目前为之最为常见的是使用float或者flexbox两种。其中先进的一点的是采用CSS处理器来实现。计算Grid系统的公式这里所说的网格系统，共实现具有一定的数学公式：scw = (100 – (m * (mc – 1))) / mc其对应描述如下：scw：指的是单列宽度m：指的是列间距mc：最大列数（ ...继续阅读 (14)

我本来觉得应该从介绍CSS中引入变量的用途开始讲起，但事实上，很多流行的CSS预处理/后处理程序已经做了很好的诠释。一些常见的例子：为风格统一而使用颜色变量一致的组件属性（布局，定位等）避免代码冗余当然，手动地去搜索或者查找/替换依然能满足你的需求，但这就像是不在JS中使用变量一样--很痛苦。事实上，CSS变量的动态性和作用域能够为你的实践和应用提供更加强大的能力--你可以非常高效的读取、设置和更新这些变量！同时，就像Webkit的小伙伴们在审查工具中做的那样，你也可以避免在你的代码中出现重复的代码片段（冗余）。最后，你可以更方便的从CSS向JS传递数据（例如媒体断点）以下几点是未来CSS属性的简短说明：动态性，可以在运行时更改可以方便的从JS中读/写可继承，可组合，同时具有作用域所以，下面就来一起深入了解一下这个CSS属性，同时学习怎么使用它。名称一开始我们使用“CSS变量”的称呼，但后来经过扩展和重构，我们开始叫它“CSS自定义属性”。很显然，更为精确的CSS属性名称更容易呈现其自身特征/语法。现在，我们为“混合”提供了相关的CSS@apply规则。目前名称为CSS 自定义属性级联变量:当前，CSS变量有两种表述：变量，是标识符和可以用任何常规值替代值之间的关联，使用var()函数表示法：var(- example-variable)返回--example-variable的值 ...继续阅读 (20)

昨天我在An Event Apart上看了@Rachel Andrew分享的CSS Grid Layout。Grid是CSS一个强大的特性，而且离到来的一天越来越近，它将是一个强大的Web布局模式。当然，那一天还没到，到目前没有稳定的浏览器支持Grid规范。不过有一个好消息，就在前几天，W3C官方组织已经确定Grid规范已非常稳定了，并且已经进入了“候选推荐”的状态。因为所有浏览器都开启了对Grid规范的支持，而且浏览器对Grid的支持不需要添加私有前缀。坏消息是可能浏览器不支持子网格(subgrid)，这一点@Rachel Andrew在她的分享中特意提到。下面是一些典型的页面布局：<body> <header class="site-header"></header> <main class="main-content"></main> <aside class="sidebar"></aside> <footer class="site-footer"></footer> </body>上面代码中四个元素都是<body>的子元素，因此<body>是网格以及这四个元素在这个网格中布局。下图是@Rachel写的一个网格示例 ...继续阅读 (29)

最近，我不得不在一个网站大量使用倾斜角度作为其设计指南的一部分。倾斜角，是指一个区域它的顶部或底部边缘不是完全水平而是倾斜的。实现这种效果有很多种方法。例如可以将base64编码的图片应用为背景，但这会使得它很难自定义（颜色，角度等）。另一种方法是倾斜或旋转绝对定位的伪元素，然而倾斜变换是我最不愿意处理的一件事。使用Sass时，可以使用动态编码生成SVG的Angled Edges库。它能很好的工作，但它需要一个以像素表示的固定宽度和高度，这使我感到有点困扰。我也真的想知道自己是否能实现和如何实现倾斜角效果。最终我得到了一个自己为之自豪的解决方法，哪怕它可能为简单场景有点过度设计。是什么样的方法呢？我的想法是对绝对定位的伪元素使用半透明，一半实心的渐变。渐变的角度定义了倾斜的角度。background-image: linear-gradient($angle, $color 50%, transparent 50%);代码被封装在一个mixin里面，它将背景颜色应用到容器中，并基于给定角度生成一个具有正确渐变的伪元素。很简单，可以这样使用：.container { @include tilted($angle: 3deg, $color: rgb(255, 255, 255)); }我面临的主要问题是计算伪元素的高度。起初，我把它作为mixin的参数，为了计算伪元素的最佳高 ...继续阅读 (21)

“Card”这样的UI组件在现在的Web中经常可见，但我们制作这方面的UI组件方式仍然受到一定的限制。直到现在，通过CSS Grid和Flexbox的组合，可以使卡整齐对齐，响应性更好，并适应其中的内容。接下来看看我们是如何制作的。我们将要做的我们将要做的一个Card UI组件（点击这里可以全屏查看效果，这样你会看得更清楚）。上面的效果，在各种断点下（缩小浏览器屏幕），Card的布局将会像下面那样进行改变：CSS Grid vs FlexboxFlexbox在CSS中出现，可以说让全世界的Web开发者欢呼起来，终于有一个布局模块来解决CSS 浮动布局给我们带来的种种麻烦与拙折。但事实并非如此。Flexbox最适合是沿单个轴分布元素，要么沿水平方向或者沿垂直方向排列元素。也就是说要使用Flexbox来构建真正的流体网格布局还是非常困难的。然而，CSS Grid旨在跨越两个轴（或维度）排列元素，也就是说水平和垂直方向都可以排列元素。在这篇文章中，通过使用CSS Grid来实现文章开头展示的Card布局效果，这也是这篇文章的真正的目的。让我得到一个真正的解决流体网格布局的解决方案。灵感的来源最近bbc.co.uk推出（测试版本）最新的版本，整个布局干净、宽敞以及他们的Card UI更是实现的完美无缺。咱们先忽略标题部分，这样看起来会更棒。顶部Card排列和布局采用的是Flexbox，但我 ...继续阅读 (17)

组织文件是每个项目的重要一步，特别是如果你半年重新打开这个项目的时候，你会发现，文件组织得好，对于你理解项目会有很大的帮助。如果你从未接触过Sass，你可以先阅读一下Sass指南或者点击这里阅读Sass相关的教程。Sass到目前为止有两种语法书写格式。第一种称之为SCSS（Sassy CSS），并且在整个规范中都使用这种语法格式，也是CSS语法的一种扩展。这意味着每个有效的CSS文件也是有效的SCSS文件。另外，SCSS能理解大多数CSS的Hack和浏览器特定的前缀语法。例如老版本IE过滤器语法。使用此语法的文件扩展名是.scss。另一种称之为Sass，是Sass的最初书写模式，其格式和Ruby类似。创建多个文件为了更好的组织项目文件，我们将代码分割在几个文件夹和文件中。通过会在asset文件夹中创建一个css文件夹，并且在asset中还包括了icons、images和js文件夹。接着让我们创建第一个也是主要的文件：app.scss。这个文件将导入所有组件和其他的.scss文件。不过现在是空白的。完成了？并没有，接下来创建我们需要的其他文件夹：helperscomponentslayoutspagesHelpershelpers文件夹将包含项目需要的functions、mixins和variables。例如：── helpers ├── _functions.scss ...继续阅读 (20)

踏出理解函数式编程概念的第一步是最重要的一步，有时也是最难的一步。不过也不一定，取决于你们的思考方式。学习开车我们第一次学车的时候，是很痛苦的。看别人在学的时候真的很简单。但一到我们自己做的时候就变得比想象得要难得多。我们曾在父母的车上练习，但是能在家周围的街道上熟练地驾驶之前都不敢去高速公路上冒险。但经过反复练习和一些可能都已经忘记了的痛苦经历之后，我们也学会了开车并且最终拿到了驾照。驾照到手后，我们可以开车去任何想去的地方。每次旅途让我们的车技越来越好，也对自己的车技越来越自信。直到有一天，要开别人的车，或者自己的车报废了又买了一辆新的。第一次开一辆不同的车是一种什么感觉？和我们第一次开车时相同吗？差远了。第一次开车时，我们完全是个外行。之前我们也坐过车，但只是乘客位。这次是坐在驾驶座位上，控制车上的一切。但在开第二辆车时，我们只需要知道一些非常简单的问题就可以了，钥匙在哪，灯光在哪，如何打转向灯，如何调整后视镜。之后的一切则相当顺利。但与第一次开车相比，这次为什么这么容易呢？因为新车和之前的旧车很像。他们都有一辆车所需要的基本结构，而且每处结构也非常像。结构上可能有点小出入或者可能有一些新特性，不过前几次开车我们可以先不用新特性。最后，我们也能学会所有的新特性，至少包括我们常用的那些。学编程语言和学车有点像。第一门是最难的。但一旦掌握了一门语言，其他的学起来都会更容易。当开始 ...继续阅读 (23)