From 299233f5e7c328a22d44f6b70943b8383c0bb3e5 Mon Sep 17 00:00:00 2001 From: jason Date: Tue, 24 May 2016 14:28:19 +0800 Subject: [PATCH 01/30] Update react readme to chinese --- react/README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/react/README.md b/react/README.md index e0794aaadf..8bbc057fda 100644 --- a/react/README.md +++ b/react/README.md @@ -1,11 +1,11 @@ -# Airbnb React/JSX Style Guide +# Airbnb React/JSX 编码规范 -*A mostly reasonable approach to React and JSX* +*一个最合理的React/JSX编发规范* -## Table of Contents +## 内容目录 - 1. [Basic Rules](#basic-rules) - 1. [Class vs `React.createClass` vs stateless](#class-vs-reactcreateclass-vs-stateless) + 1. [基本规范](#basic-rules) + 1. [使用类Class, `React.createClass`, 和无状态方法](#class-vs-reactcreateclass-vs-stateless) 1. [Naming](#naming) 1. [Declaration](#declaration) 1. [Alignment](#alignment) @@ -20,14 +20,14 @@ ## Basic Rules - - Only include one React component per file. - - However, multiple [Stateless, or Pure, Components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) are allowed per file. eslint: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless). - - Always use JSX syntax. - - Do not use `React.createElement` unless you're initializing the app from a file that is not JSX. + - 每个文件只写一个模块Only include one React component per file. + - 但是多个[无状态模块](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions)可以放在单个文件中. eslint: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless). + - 推荐使用JSX语法. + - 不要使用 `React.createElement`，除非从一个非JSX的文件中初始化你的app. ## Class vs `React.createClass` vs stateless - - If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass` unless you have a very good reason to use mixins. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md) + - 如果你的模块有内部状态或者是`refs`, 推荐使用 `class extends React.Component` 而不是 `React.createClass` ,除非你有充足的理由来使用这些方法. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md) ```jsx // bad @@ -47,7 +47,7 @@ } ``` - And if you don't have state or refs, prefer normal functions (not arrow functions) over classes: + 如果你的模块没有状态或是没有引用`refs`， 推荐使用普通函数（不是箭头函数）而不是类: ```jsx // bad From ad8d0c50bcb676752a374842a0d596ee80f26111 Mon Sep 17 00:00:00 2001 From: Jason Date: Wed, 25 May 2016 16:25:27 +0800 Subject: [PATCH 02/30] translate the rest React style to chinese --- react/README.md | 184 ++++++++++++++++++++++++------------------------ 1 file changed, 93 insertions(+), 91 deletions(-) diff --git a/react/README.md b/react/README.md index 8bbc057fda..d089fec7b8 100644 --- a/react/README.md +++ b/react/README.md @@ -1,33 +1,35 @@ # Airbnb React/JSX 编码规范 -*一个最合理的React/JSX编发规范* +*算是最合理的React/JSX编发规范之一了* ## 内容目录 - 1. [基本规范](#basic-rules) - 1. [使用类Class, `React.createClass`, 和无状态方法](#class-vs-reactcreateclass-vs-stateless) - 1. [Naming](#naming) - 1. [Declaration](#declaration) - 1. [Alignment](#alignment) - 1. [Quotes](#quotes) - 1. [Spacing](#spacing) - 1. [Props](#props) - 1. [Parentheses](#parentheses) - 1. [Tags](#tags) - 1. [Methods](#methods) - 1. [Ordering](#ordering) - 1. [`isMounted`](#ismounted) - -## Basic Rules - - - 每个文件只写一个模块Only include one React component per file. + 1. [基本规范](#basic-rules-基本规范) + 1. [Class vs React.createClass vs stateless](#创建模块) + 1. [命名](#naming-命名) + 1. [声明模块](#declaration-声明模块) + 1. [代码对齐](#alignment-代码对齐) + 1. [单引号还是双引号](#quotes-单引号还是双引号) + 1. [空格](#spacing-空格) + 1. [属性](#props-属性) + 1. [括号](#parentheses-括号) + 1. [标签](#tags-标签) + 1. [函数/方法](#methods-函数) + 1. [模块生命周期](#ordering-react-模块生命周期) + 1. [isMounted](#ismounted) + +## Basic Rules 基本规范 + + - 每个文件只写一个模块. - 但是多个[无状态模块](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions)可以放在单个文件中. eslint: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless). - 推荐使用JSX语法. - 不要使用 `React.createElement`，除非从一个非JSX的文件中初始化你的app. -## Class vs `React.createClass` vs stateless +## 创建模块 + Class vs React.createClass vs stateless - - 如果你的模块有内部状态或者是`refs`, 推荐使用 `class extends React.Component` 而不是 `React.createClass` ,除非你有充足的理由来使用这些方法. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md) + - 如果你的模块有内部状态或者是`refs`, 推荐使用 `class extends React.Component` 而不是 `React.createClass` ,除非你有充足的理由来使用这些方法. + eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md) ```jsx // bad @@ -47,7 +49,7 @@ } ``` - 如果你的模块没有状态或是没有引用`refs`， 推荐使用普通函数（不是箭头函数）而不是类: + 如果你的模块没有状态或是没有引用`refs`， 推荐使用普通函数（非箭头函数）而不是类: ```jsx // bad @@ -68,11 +70,11 @@ } ``` -## Naming +## Naming 命名 - - **Extensions**: Use `.jsx` extension for React components. - - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`. - - **Reference Naming**: Use PascalCase for React components and camelCase for their instances. eslint: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) + - **扩展名**: React模块使用 `.jsx` 扩展名. + - **文件名**: 文件名使用驼峰式. 如, `ReservationCard.jsx`. + - **引用命名**: React模块名使用驼峰式命名，实例使用骆驼式命名. eslint: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) ```jsx // bad @@ -88,7 +90,7 @@ const reservationItem = ; ``` - - **Component Naming**: Use the filename as the component name. For example, `ReservationCard.jsx` should have a reference name of `ReservationCard`. However, for root components of a directory, use `index.jsx` as the filename and use the directory name as the component name: + - **模块命名**: 模块使用当前文件名一样的名称. 比如 `ReservationCard.jsx` 应该包含名为 `ReservationCard`的模块. 但是，如果整个文件夹是一个模块，使用 `index.js`作为入口文件，然后直接使用 `index.js` 或者文件夹名作为模块的名称: ```jsx // bad @@ -101,9 +103,9 @@ import Footer from './Footer'; ``` -## Declaration +## Declaration 声明模块 - - Do not use `displayName` for naming components. Instead, name the component by reference. + - 不要使用 `displayName` 来命名React模块，而是使用引用来命名模块， 如 class 名称. ```jsx // bad @@ -117,25 +119,25 @@ } ``` -## Alignment +## Alignment 代码对齐 - - Follow these alignment styles for JSX syntax. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) + - 遵循以下的JSX语法缩进/格式. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) ```jsx // bad - // good + // good, 有多行属性的话, 新建一行关闭标签 - // if props fit in one line then keep it on the same line + // 若能在一行中显示, 直接写成一行 - // children get indented normally + // 子元素按照常规方式缩进 ``` -## Quotes +## Quotes 单引号还是双引号 - - Always use double quotes (`"`) for JSX attributes, but single quotes for all other JS. eslint: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes) + - 对于JSX属性值总是使用双引号(`"`), 其他均使用单引号. eslint: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes) - > Why? JSX attributes [can't contain escaped quotes](http://eslint.org/docs/rules/jsx-quotes), so double quotes make conjunctions like `"don't"` easier to type. - > Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention. + > 为什么? JSX属性 [不能包括转译的引号](http://eslint.org/docs/rules/jsx-quotes), 因此在双引号里包括像 `"don't"` 的属性值更容易输入. + > HTML属性也是用双引号，所以JSX属性也遵循同样的语法. ```jsx // bad @@ -165,9 +167,9 @@ ``` -## Spacing +## Spacing 空格 - - Always include a single space in your self-closing tag. + - 总是在自动关闭的标签前加一个空格，正常情况下也不需要换行. ```jsx // bad @@ -184,7 +186,7 @@ ``` - - Do not pad JSX curly braces with spaces. eslint: [`react/jsx-curly-spacing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md) + - 不要在JSX `{}` 引用括号里两边加空格. eslint: [`react/jsx-curly-spacing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md) ```jsx // bad @@ -194,9 +196,9 @@ ``` -## Props +## Props 属性 - - Always use camelCase for prop names. + - JSX属性名使用骆驼式风格`camelCase`. ```jsx // bad @@ -212,7 +214,7 @@ /> ``` - - Omit the value of the prop when it is explicitly `true`. eslint: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md) + - 如果属性值为 `true`, 可以直接省略. eslint: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md) ```jsx // bad @@ -226,7 +228,7 @@ /> ``` - - Always include an `alt` prop on `` tags. If the image is presentational, `alt` can be an empty string or the `` must have `role="presentation"`. eslint: [`jsx-a11y/img-has-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-has-alt.md) + - `` 标签总是添加 `alt` 属性. 如果图片以presentation(感觉是以类似PPT方式显示?)方式显示，`alt` 可为空, 或者`` 要包含`role="presentation"`. eslint: [`jsx-a11y/img-has-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-has-alt.md) ```jsx // bad @@ -242,9 +244,9 @@ ``` - - Do not use words like "image", "photo", or "picture" in `` `alt` props. eslint: [`jsx-a11y/img-redundant-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md) + - 不要在 `alt` 值里使用如 "image", "photo", or "picture"包括图片含义这样的词， 中文也一样. eslint: [`jsx-a11y/img-redundant-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md) - > Why? Screenreaders already announce `img` elements as images, so there is no need to include this information in the alt text. + > 为什么? 屏幕助读器已经把 `img` 标签标注为图片了, 所以没有必要再在 `alt` 里说明了. ```jsx // bad @@ -254,7 +256,7 @@ Me waving hello ``` - - Use only valid, non-abstract [ARIA roles](https://www.w3.org/TR/wai-aria/roles#role_definitions). eslint: [`jsx-a11y/aria-role`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md) + - 使用有效正确的 aria `role`属性值 [ARIA roles](https://www.w3.org/TR/wai-aria/roles#role_definitions). eslint: [`jsx-a11y/aria-role`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md) ```jsx // bad - not an ARIA role @@ -267,9 +269,9 @@
``` - - Do not use `accessKey` on elements. eslint: [`jsx-a11y/no-access-key`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md) + - 不要在标签上使用 `accessKey` 属性. eslint: [`jsx-a11y/no-access-key`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md) - > Why? Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility. + > 为什么? 屏幕助读器在键盘快捷键与键盘命令时造成的不统一性会导致阅读性更加复杂. ```jsx // bad @@ -279,9 +281,9 @@
``` -## Parentheses +## Parentheses 括号 - - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) + - 将多行的JSX标签写在 `()`里. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) ```jsx // bad @@ -300,16 +302,16 @@ ); } - // good, when single line + // good, 单行可以不需要 render() { const body =
hello
; return {body}; } ``` -## Tags +## Tags 标签 - - Always self-close tags that have no children. eslint: [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md) + - 对于没有子元素的标签来说总是自己关闭标签. eslint: [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md) ```jsx // bad @@ -319,7 +321,7 @@ ``` - - If your component has multi-line properties, close its tag on a new line. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) + - 如果模块有多行的属性， 关闭标签时新建一行. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) ```jsx // bad @@ -334,9 +336,9 @@ /> ``` -## Methods +## Methods 函数 - - Use arrow functions to close over local variables. + - 使用箭头函数来获取本地变量. ```jsx function ItemList(props) { @@ -353,9 +355,9 @@ } ``` - - Bind event handlers for the render method in the constructor. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md) + - 当在 `render()` 里使用事件处理方法时，提前在构造函数里把 `this` 绑定上去. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md) - > Why? A bind call in the render path creates a brand new function on every single render. + > 为什么? 在每次 `render` 过程中， 再调用 `bind` 都会新建一个新的函数，浪费资源. ```jsx // bad @@ -387,7 +389,7 @@ } ``` - - Do not use underscore prefix for internal methods of a React component. + - 在React模块中，不要给所谓的私有函数添加 `_` 前缀，本质上它并不是私有的. ```jsx // bad @@ -409,7 +411,7 @@ } ``` - - Be sure to return a value in your `render` methods. eslint: [`require-render-return`](https://github.com/yannickcr/eslint-plugin-react/pull/502) + - 在 `render` 方法中总是确保 `return` 返回值. eslint: [`require-render-return`](https://github.com/yannickcr/eslint-plugin-react/pull/502) ```jsx // bad @@ -423,26 +425,26 @@ } ``` -## Ordering +## Ordering React 模块生命周期 - - Ordering for `class extends React.Component`: + - `class extends React.Component` 的生命周期函数: - 1. optional `static` methods - 1. `constructor` - 1. `getChildContext` - 1. `componentWillMount` - 1. `componentDidMount` - 1. `componentWillReceiveProps` - 1. `shouldComponentUpdate` - 1. `componentWillUpdate` - 1. `componentDidUpdate` - 1. `componentWillUnmount` - 1. *clickHandlers or eventHandlers* like `onClickSubmit()` or `onChangeDescription()` - 1. *getter methods for `render`* like `getSelectReason()` or `getFooterContent()` - 1. *Optional render methods* like `renderNavigation()` or `renderProfilePicture()` - 1. `render` + 1. 可选的 `static` 方法 + 1. `constructor` 构造函数 + 1. `getChildContext` 获取子元素内容 + 1. `componentWillMount` 模块渲染前 + 1. `componentDidMount` 模块渲染后 + 1. `componentWillReceiveProps` 模块将接受新的数据 + 1. `shouldComponentUpdate` 判断模块需不需要重新渲染 + 1. `componentWillUpdate` 上面的方法返回 `true`， 模块将重新渲染 + 1. `componentDidUpdate` 模块渲染结束 + 1. `componentWillUnmount` 模块将从DOM中清除, 做一些清理任务 + 1. *点击回调或者事件处理器* 如 `onClickSubmit()` 或 `onChangeDescription()` + 1. *`render` 里的 getter 方法* 如 `getSelectReason()` 或 `getFooterContent()` + 1. *可选的 render 方法* 如 `renderNavigation()` 或 `renderProfilePicture()` + 1. `render` render() 方法 - - How to define `propTypes`, `defaultProps`, `contextTypes`, etc... + - 如何定义 `propTypes`, `defaultProps`, `contextTypes`, 等等其他属性... ```jsx import React, { PropTypes } from 'react'; @@ -473,17 +475,17 @@ export default Link; ``` - - Ordering for `React.createClass`: eslint: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md) + - `React.createClass` 的生命周期函数，与使用class稍有不同: eslint: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md) - 1. `displayName` - 1. `propTypes` - 1. `contextTypes` - 1. `childContextTypes` - 1. `mixins` + 1. `displayName` 设定模块名称 + 1. `propTypes` 设置属性的类型 + 1. `contextTypes` 设置上下文类型 + 1. `childContextTypes` 设置子元素上下文类型 + 1. `mixins` 添加一些mixins 1. `statics` - 1. `defaultProps` - 1. `getDefaultProps` - 1. `getInitialState` + 1. `defaultProps` 设置默认的属性值 + 1. `getDefaultProps` 获取默认属性值 + 1. `getInitialState` 或者初始状态 1. `getChildContext` 1. `componentWillMount` 1. `componentDidMount` @@ -497,12 +499,12 @@ 1. *Optional render methods* like `renderNavigation()` or `renderProfilePicture()` 1. `render` -## `isMounted` +## isMounted - - Do not use `isMounted`. eslint: [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md) + - 不要再使用 `isMounted`. eslint: [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md) - > Why? [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and is on its way to being officially deprecated. + > 为什么? [`isMounted` 反人类设计模式:()][anti-pattern], 在 ES6 classes 中无法使用， 官方将在未来的版本里删除此方法. [anti-pattern]: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html -**[⬆ back to top](#table-of-contents)** +**[⬆ 回到顶部](#table-of-contents)** From 526f5f57fa2dfab7119839d3393484f02badadeb Mon Sep 17 00:00:00 2001 From: Jason Date: Wed, 25 May 2016 16:26:17 +0800 Subject: [PATCH 03/30] type --- react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/README.md b/react/README.md index d089fec7b8..90a4fd3f90 100644 --- a/react/README.md +++ b/react/README.md @@ -1,6 +1,6 @@ # Airbnb React/JSX 编码规范 -*算是最合理的React/JSX编发规范之一了* +*算是最合理的React/JSX编码规范之一了* ## 内容目录 From 3b1c9dce84eb84356eb72a55176b5b1d904a3506 Mon Sep 17 00:00:00 2001 From: Jason Date: Wed, 25 May 2016 16:36:55 +0800 Subject: [PATCH 04/30] missing back-to-top hash --- react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/README.md b/react/README.md index 90a4fd3f90..a092911bb3 100644 --- a/react/README.md +++ b/react/README.md @@ -507,4 +507,4 @@ [anti-pattern]: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html -**[⬆ 回到顶部](#table-of-contents)** +**[⬆ 回到顶部](#内容目录)** From e30a9d0811158fe42f1e14a5fc30fdb5b4be7872 Mon Sep 17 00:00:00 2001 From: Jason Date: Thu, 23 Jun 2016 13:51:19 +0800 Subject: [PATCH 05/30] sync react readme with upstream --- react/README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/react/README.md b/react/README.md index a092911bb3..7fc54324f8 100644 --- a/react/README.md +++ b/react/README.md @@ -280,6 +280,25 @@ // good
``` + - 避免使用数组的index来作为属性`key`的值，推荐使用唯一ID. ([为什么?](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318)) + + ```jsx + // bad + {todos.map((todo, index) => + + )} + + // good + {todos.map(todo => ( + + ))} + ``` ## Parentheses 括号 From 89ae0012cb7ad63d57f1653f482ff61567d21042 Mon Sep 17 00:00:00 2001 From: Jason Date: Thu, 4 Aug 2016 12:37:46 +0800 Subject: [PATCH 06/30] update react style, sync with upstream --- react/README.md | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/react/README.md b/react/README.md index 7fc54324f8..4703108769 100644 --- a/react/README.md +++ b/react/README.md @@ -12,6 +12,7 @@ 1. [单引号还是双引号](#quotes-单引号还是双引号) 1. [空格](#spacing-空格) 1. [属性](#props-属性) + 1. [Refs引用](#refs) 1. [括号](#parentheses-括号) 1. [标签](#tags-标签) 1. [函数/方法](#methods-函数) @@ -102,7 +103,32 @@ // good import Footer from './Footer'; ``` + - **高阶模块命名**: 对于生成一个新的模块，其中的模块名 `displayName` 应该为高阶模块名和传入模块名的组合. 例如, 高阶模块 `withFoo()`, 当传入一个 `Bar` 模块的时候， 生成的模块名 `displayName` 应该为 `withFoo(Bar)`. + > 为什么？一个模块的 `displayName` 可能会在开发者工具或者错误信息中使用到，因此有一个能清楚的表达这层关系的值能帮助我们更好的理解模块发生了什么，更好的Debug. + + ```jsx + // bad + export default function withFoo(WrappedComponent) { + return function WithFoo(props) { + return ; + } + } + + // good + export default function withFoo(WrappedComponent) { + function WithFoo(props) { + return ; + } + + const wrappedComponentName = WrappedComponent.displayName + || WrappedComponent.name + || 'Component'; + + WithFoo.displayName = `withFoo(${wrappedComponentName})`; + return WithFoo; + } + ``` ## Declaration 声明模块 - 不要使用 `displayName` 来命名React模块，而是使用引用来命名模块， 如 class 名称. @@ -300,6 +326,23 @@ ))} ``` +## Refs + + - 总是在Refs里使用回调函数. eslint: [`react/no-string-refs`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md) + + ```jsx + // bad + + + // good + { this.myRef = ref; }} + /> + ``` + + ## Parentheses 括号 - 将多行的JSX标签写在 `()`里. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) From 37d0efed2d4f672607ba070fdef33fc7885c7dac Mon Sep 17 00:00:00 2001 From: jason Date: Mon, 8 Aug 2016 15:03:41 +0800 Subject: [PATCH 07/30] Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index fb43bc9e25..a31eeba1b6 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,9 @@ [![Downloads](https://img.shields.io/npm/dm/eslint-config-airbnb-base.svg)](https://www.npmjs.com/package/eslint-config-airbnb-base) [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) +##此REPO只用于[React/JSX编码规范中文版](react/) + +-------------------- Other Style Guides - [ES5](es5/) - [React](react/) From 59f5b8e156ae5cd9a378e1537e6960d933cf3cea Mon Sep 17 00:00:00 2001 From: Jason Date: Mon, 31 Oct 2016 10:39:08 +0800 Subject: [PATCH 08/30] sync with upstream to Oct.31 --- react/README.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/react/README.md b/react/README.md index 4703108769..7f5c2eafd5 100644 --- a/react/README.md +++ b/react/README.md @@ -129,6 +129,19 @@ return WithFoo; } ``` + + - **属性命名**: 避免使用DOM相关的属性来用作其他的用途。 + + > 为什么？对于`style` 和 `className`这样的属性名，我们都会默认它们代表一些特殊的含义，如元素的样式，CSS class的名称。在你的应用中使用这些属性来表示其他的含义会使你的代码更难阅读，更难维护，并且可能会引起bug。 + + ```jsx + // bad + + + // good + + ``` + ## Declaration 声明模块 - 不要使用 `displayName` 来命名React模块，而是使用引用来命名模块， 如 class 名称. @@ -195,7 +208,7 @@ ## Spacing 空格 - - 总是在自动关闭的标签前加一个空格，正常情况下也不需要换行. + - 总是在自动关闭的标签前加一个空格，正常情况下也不需要换行. eslint: [`no-multi-spaces`](http://eslint.org/docs/rules/no-multi-spaces), [`react/jsx-space-before-closing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-space-before-closing.md) ```jsx // bad @@ -452,6 +465,7 @@ ``` - 在React模块中，不要给所谓的私有函数添加 `_` 前缀，本质上它并不是私有的. + > 为什么？`_` 下划线前缀在某些语言中通常被用来表示私有变量或者函数。但是不像其他的一些语言，在JS中没有原生支持所谓的私有变量，所有的变量函数都是共有的。尽管你的意图是使它私有化，在之前加上下划线并不会使这些变量私有化，并且所有的属性（包括有下划线前缀及没有前缀的）都应该被视为是共有的。了解更多详情请查看Issue [#1024](https://github.com/airbnb/javascript/issues/1024), 和 [#490](https://github.com/airbnb/javascript/issues/490) 。 ```jsx // bad @@ -473,7 +487,7 @@ } ``` - - 在 `render` 方法中总是确保 `return` 返回值. eslint: [`require-render-return`](https://github.com/yannickcr/eslint-plugin-react/pull/502) + - Be sure to return a value in your `render` methods. eslint: [`react/require-render-return`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-render-return.md) ```jsx // bad From a68c2f3f5961bb938e63d99824cf046b88360b16 Mon Sep 17 00:00:00 2001 From: Jason Date: Mon, 31 Oct 2016 10:44:48 +0800 Subject: [PATCH 09/30] missing one translate section --- react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/README.md b/react/README.md index 7f5c2eafd5..6ab8c8b94c 100644 --- a/react/README.md +++ b/react/README.md @@ -487,7 +487,7 @@ } ``` - - Be sure to return a value in your `render` methods. eslint: [`react/require-render-return`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-render-return.md) + - 在 `render` 方法中总是确保 `return` 返回值. eslint: [`react/require-render-return`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-render-return.md) ```jsx // bad From 1ae80fe212a55c77af077d3346dc952a74b6f158 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=BF=B7=E6=B8=A1?= Date: Wed, 14 Dec 2016 16:16:38 +0800 Subject: [PATCH 10/30] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=87=A0=E5=A4=84?= =?UTF-8?q?=E5=85=B3=E4=BA=8E=20PascalCase=20=E5=92=8C=20camelCase=20?= =?UTF-8?q?=E7=9A=84=E6=96=87=E5=AD=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/README.md b/react/README.md index 6ab8c8b94c..b9f6c7ca96 100644 --- a/react/README.md +++ b/react/README.md @@ -74,8 +74,8 @@ ## Naming 命名 - **扩展名**: React模块使用 `.jsx` 扩展名. - - **文件名**: 文件名使用驼峰式. 如, `ReservationCard.jsx`. - - **引用命名**: React模块名使用驼峰式命名，实例使用骆驼式命名. eslint: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) +  - **文件名**: 文件名使用帕斯卡命名. 如, `ReservationCard.jsx`. +  - **引用命名**: React模块名使用帕斯卡命名，实例使用骆驼式命名. eslint: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) ```jsx // bad From 3e5e150c3232a1efe309ffd8b97ae2b3082c30cd Mon Sep 17 00:00:00 2001 From: Jason Date: Fri, 6 Jan 2017 15:52:27 +0800 Subject: [PATCH 11/30] sync with upstream to 2017.01.05 --- react/README.md | 36 ++++++++++++++++++++++++++++++++---- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/react/README.md b/react/README.md index b9f6c7ca96..19445b1969 100644 --- a/react/README.md +++ b/react/README.md @@ -187,10 +187,9 @@ ## Quotes 单引号还是双引号 - - 对于JSX属性值总是使用双引号(`"`), 其他均使用单引号. eslint: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes) + - 对于JSX属性值总是使用双引号(`"`), 其他均使用单引号(`'`). eslint: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes) - > 为什么? JSX属性 [不能包括转译的引号](http://eslint.org/docs/rules/jsx-quotes), 因此在双引号里包括像 `"don't"` 的属性值更容易输入. - > HTML属性也是用双引号，所以JSX属性也遵循同样的语法. + > 为什么? HTML属性也是用双引号, 因此JSX的属性也遵循此约定. ```jsx // bad @@ -338,6 +337,35 @@ /> ))} ``` + + - 对于所有非必须的属性，总是手动去定义`defaultProps`属性. + + > 为什么? propTypes 可以作为模块的文档说明, 并且声明 defaultProps 的话意味着阅读代码的人不需要去假设一些默认值。更重要的是, 显示的声明默认属性可以让你的模块跳过属性类型的检查. + + ```jsx + // bad + function SFC({ foo, bar, children }) { + return
{foo}{bar}{children}
; + } + SFC.propTypes = { + foo: PropTypes.number.isRequired, + bar: PropTypes.string, + children: PropTypes.node, + }; + + // good + function SFC({ foo, bar }) { + return
{foo}{bar}
; + } + SFC.propTypes = { + foo: PropTypes.number.isRequired, + bar: PropTypes.string, + }; + SFC.defaultProps = { + bar: '', + children: null, + }; + ``` ## Refs @@ -351,7 +379,7 @@ // good { this.myRef = ref; }} + ref={(ref) => { this.myRef = ref; }} /> ``` From ee5eb1a6a58e34d36e82b6a76c4f054ab9ee4c47 Mon Sep 17 00:00:00 2001 From: Jason Date: Tue, 14 Mar 2017 14:21:26 +0800 Subject: [PATCH 12/30] sync upstream to 2017.03.14, add mixins guide --- react/README.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/react/README.md b/react/README.md index 19445b1969..80f708db8a 100644 --- a/react/README.md +++ b/react/README.md @@ -6,6 +6,7 @@ 1. [基本规范](#basic-rules-基本规范) 1. [Class vs React.createClass vs stateless](#创建模块) + 1. [Mixins](#mixins) 1. [命名](#naming-命名) 1. [声明模块](#declaration-声明模块) 1. [代码对齐](#alignment-代码对齐) @@ -29,7 +30,7 @@ ## 创建模块 Class vs React.createClass vs stateless - - 如果你的模块有内部状态或者是`refs`, 推荐使用 `class extends React.Component` 而不是 `React.createClass` ,除非你有充足的理由来使用这些方法. + - 如果你的模块有内部状态或者是`refs`, 推荐使用 `class extends React.Component` 而不是 `React.createClass`. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md) ```jsx @@ -71,6 +72,12 @@ } ``` +## Mixins + + - [不要使用 mixins](https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html). + + > 为什么? Mixins 会增加隐式的依赖，导致命名冲突，并且会以雪球式增加复杂度。在大多数情况下Mixins可以被更好的方法替代，如：组件化，高阶组件，工具模块等。 + ## Naming 命名 - **扩展名**: React模块使用 `.jsx` 扩展名. @@ -360,6 +367,7 @@ SFC.propTypes = { foo: PropTypes.number.isRequired, bar: PropTypes.string, + children: PropTypes.node, }; SFC.defaultProps = { bar: '', @@ -386,7 +394,7 @@ ## Parentheses 括号 - - 将多行的JSX标签写在 `()`里. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) + - 将多行的JSX标签写在 `()`里. eslint: [`react/jsx-wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md) ```jsx // bad From ca23e6a7b6394281643cd5180a7b9afb759cd060 Mon Sep 17 00:00:00 2001 From: Jason Date: Mon, 27 Mar 2017 17:14:17 +0800 Subject: [PATCH 13/30] readme fix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a31eeba1b6..e3a548a5b9 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ [![Downloads](https://img.shields.io/npm/dm/eslint-config-airbnb-base.svg)](https://www.npmjs.com/package/eslint-config-airbnb-base) [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) -##此REPO只用于[React/JSX编码规范中文版](react/) +## 此REPO只用于[React/JSX编码规范中文版](react/) -------------------- Other Style Guides From 034c0467a3645e5e145c030952e6e65fe3a036bd Mon Sep 17 00:00:00 2001 From: Jason Date: Mon, 15 May 2017 14:07:50 +0800 Subject: [PATCH 14/30] sync with upstream to 2017.5.15 --- react/README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/react/README.md b/react/README.md index 80f708db8a..bf9549746d 100644 --- a/react/README.md +++ b/react/README.md @@ -112,7 +112,7 @@ ``` - **高阶模块命名**: 对于生成一个新的模块，其中的模块名 `displayName` 应该为高阶模块名和传入模块名的组合. 例如, 高阶模块 `withFoo()`, 当传入一个 `Bar` 模块的时候， 生成的模块名 `displayName` 应该为 `withFoo(Bar)`. - > 为什么？一个模块的 `displayName` 可能会在开发者工具或者错误信息中使用到，因此有一个能清楚的表达这层关系的值能帮助我们更好的理解模块发生了什么，更好的Debug. + > 为什么？一个模块的 `displayName` 可能会在开发者工具或者错误信息中使用到，因此有一个能清楚的表达这层关系的值能帮助我们更好的理解模块发生了什么，更好的Debug. ```jsx // bad @@ -214,7 +214,7 @@ ## Spacing 空格 - - 总是在自动关闭的标签前加一个空格，正常情况下也不需要换行. eslint: [`no-multi-spaces`](http://eslint.org/docs/rules/no-multi-spaces), [`react/jsx-space-before-closing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-space-before-closing.md) + - 总是在自动关闭的标签前加一个空格，正常情况下也不需要换行. eslint: [`no-multi-spaces`](http://eslint.org/docs/rules/no-multi-spaces), [`react/jsx-tag-spacing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md) ```jsx // bad @@ -273,7 +273,7 @@ /> ``` - - `` 标签总是添加 `alt` 属性. 如果图片以presentation(感觉是以类似PPT方式显示?)方式显示，`alt` 可为空, 或者`` 要包含`role="presentation"`. eslint: [`jsx-a11y/img-has-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-has-alt.md) + - `` 标签总是添加 `alt` 属性. 如果图片以presentation(感觉是以类似PPT方式显示?)方式显示，`alt` 可为空, 或者`` 要包含`role="presentation"`. eslint: [`jsx-a11y/alt-text`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md) ```jsx // bad @@ -344,7 +344,7 @@ /> ))} ``` - + - 对于所有非必须的属性，总是手动去定义`defaultProps`属性. > 为什么? propTypes 可以作为模块的文档说明, 并且声明 defaultProps 的话意味着阅读代码的人不需要去假设一些默认值。更重要的是, 显示的声明默认属性可以让你的模块跳过属性类型的检查. @@ -361,8 +361,8 @@ }; // good - function SFC({ foo, bar }) { - return
{foo}{bar}
; + function SFC({ foo, bar, children }) { + return
{foo}{bar}{children}
; } SFC.propTypes = { foo: PropTypes.number.isRequired, @@ -478,7 +478,7 @@ } render() { - return
+ return
; } } @@ -495,7 +495,7 @@ } render() { - return
+ return
; } } ``` @@ -577,7 +577,7 @@ } render() { - return {this.props.text} + return {this.props.text}; } } From 1789b152e4903ecffed0b6052ab70d7f66d10bd2 Mon Sep 17 00:00:00 2001 From: Jason Date: Mon, 18 Sep 2017 13:06:40 +0800 Subject: [PATCH 15/30] sync react readme.md with upstream to 2017.9.18 --- react/README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/react/README.md b/react/README.md index bf9549746d..98c4c3c4d5 100644 --- a/react/README.md +++ b/react/README.md @@ -167,7 +167,7 @@ ## Alignment 代码对齐 - - 遵循以下的JSX语法缩进/格式. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) + - 遵循以下的JSX语法缩进/格式. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) [`react/jsx-closing-tag-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md) ```jsx // bad @@ -271,6 +271,9 @@