在 Jquery 时代，实现轮播的基本思路是第一帧与最后一帧使用相同的元素，播放至最后一帧的时候，不使用动画效果切换到第一帧，形成轮播的效果。
但还有别外一种思路，不需要额外复制元素，更多是的通过样式控制。让我们分析下一个完整轮播所经历的过程与所处状态，如下图。
React实现轮播的一种思路
分类：工作经验
饱满的卡片列表布局
使用伪类的 content 属性实现自定义选择框
大多数情况下，浏览器默认的的 checkbox 样式都满足不了我们对外观的需求，这时候就需要在 checkbox 的基础上实现自定义样式，核心是如何使用“打勾”效果
有三种方式：
- 使用图上实现
- 使用元素，隐藏两个边框，并旋转
- 使用伪元素 content 属性中的特殊字符
这里主要说明第三种，目前很多网站使用的 WebFont 就是在 content 属性中写字体代码实现图标。其实浏览器自带很多特殊符号，其中又分 html 特殊符号与 css 特殊符号。在 css 的特殊符号中，就有“打勾”这个符号，先看效果图：
使用 Jest 对 React 进行快照测试与 DOM 测试
本文例子的 GitHub 地址：https://github.com/codelegant/react-action
React 有自己的测试工具：Jest，就像 Angular 自己的 Karama。
使用 Jest 测试 React，主要分两部分，快照测试（Snaptshot Testing）与 DOM 测试（DOM Testing）。
首先安装依赖：
|
1 |
npm i -D jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer |
然后配置package.json与.babelrc。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// package.json "dependencies": { "react": "<current-version>", "react-dom": "<current-version>" }, "devDependencies": { "babel-jest": "<current-version>", "babel-preset-es2015": "<current-version>", "babel-preset-react": "<current-version>", "jest": "<current-version>", "react-test-renderer": "<current-version>" }, "scripts": { "test": "jest" } // .babelrc { "presets": ["es2015", "react"] } |
使用 webpack 与 html-webpack-plugin 进行 react 服务器渲染并生成静态页面文件
实现 react 服务器渲染的通常思路是使用 node 服务器即时渲染组件并生成页面数据流返回给浏览器，最简单版本的 node 服务器渲染：https://github.com/codelegant/react-server-simple
但是这种实现方式有以下缺点：
- 如果原来有 node 服务器还好，否则需要额外架设服务器
- 对前端开发者并不是特别友好
- 即时渲染组件，比较耗费资源
那有没有不需要架设 node 服务器，实现方式又很前端，并且可以预渲染并生成静态文件的方式呢？答案是：有的！只需要用到两个工具：webpack 与 html-webpack-plugin。
查看全文
React+ES6写法小记
1、无状态(stateless)组件的简写
|
1 2 3 4 |
const clickHandler = e=>alert(e.type); const Button = props=>(<button type="button" onClick={clickHandler} className={props.className}>Button</button>); |
|
1 2 3 4 5 6 |
const Button = props=> { const clickHandler = e=>alert(e.type); return (<button type="button" onClick={clickHandler} className={props.className}>Button</button>); }; |
|
1 2 3 4 5 6 |
const Button = props=> { const clickHandler = e=>alert(e.type); return (<button type="button" onClick={this.clickHandler} className={props.className}>Button</button>); }; |
CSS 的后代伪类选择器用法浅析
CSS 的后代伪类选择器共五对，两种类型（我命名为：child 型与 type 型），分别是：
| child 型 | type 型 |
|---|---|
:first-child |
:first-of-type |
:last-child |
:last-of-type |
:only-child |
:only-of-type |
:nth-child(n) |
:nth-of-type(n) |
:nth-last-child(n) |
:nth-last-of-type(n) |
两种类型的主要区别在于查找元素的顺序，child 型先查找元素位置，再查找元素类型；而 type 型则刚好相反，先找类型，后找位置。
在 WebStorm 中结合 Eslint 规范代码
JavaScript 的代码检查工具有：JSLint，JSHint， JSCS， ESLint，本文着重介绍 ESLint。
ESLint 在一系列的代码质量检查工具中，是最年轻的一个，当然也是最现代化的。配置多样，支持 JavaScript， JSON 以及 YAML 格式的 .eslintrc.*文件，同时也支持在package.json用eslintConfig字段配置（Configuration File Formats）。
安装
ESLint 基于 Node 平台，所以 Nodejs 是必须安装的，然后通过 npm 安装 ESLint 包，至于全局安装还是作为开发依赖安装，取决于个人。
然后在 WebStorm 中，打开设置（File>Setting或者Alt+F7），按路径进入 ESLint 的配置界面（Languages&Frameworks>JavaScript>Code Quality Tools>ESLint）。开启 ESLint，并配置相应路径，配置文件默认使用.eslintrc。
Requirejs 中的 require.config() 全局化
在使用 Requirejs 实践中，将require.config()作为全局配置是一个好习惯
假设我们使用 requirejs 在页面中引入 main.js 脚本文件，最基本的配置可能是这样：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
require.config({ paths: { jquery : "/js/library/jquery.min", transition: "/js/bootstrap/transition", modal : "/js/bootstrap/modal" }, shim : { modal: { deps : ["jquery", "transition"], exports: "modal" } } }); require(["jquery","modal"], function ($) { "use strict"; //功能代码 }); |