最近、会社のフロントエンドのウェブショッピングモール(React)と前期アプリ(React Native)のメンテナンスを研究し始め、同僚間のコードスタイルの差が大きすぎることを発見し、後でコードをよりよく読むために、ReactとJSXのいくつかのコード規範を整理した。

1.基本規範

2.命名規範

3.属性

3.1属性名

3.2属性の設定

3.3属性の配置

3.4行内反復

return (
  

    {this.props.data.map(function(data, i) {
      return ()
    })}
    
);

4.コメント

var content = (
  
);

5.引用符の使用

// bad

// good

// bad

// good

// JavaScript Expression
const person = ;
// HTML/JSX
const myDivElement = 
;
const app = 

6.条件HTML

• 简短的输出在行内直接三元运算符；

{this.state.show && 'This is Shown'}
{this.state.on ? 'On' : 'Off'}

var dinosaurHtml = '';if (this.state.showDinosaurs) { dinosaurHtml = ( 
   
 );}return ( 
 ... {dinosaurHtml} ... 
);
[
](https://github.com/minwe/style-guide/blob/master/React.js.md#- )

7.()使用

// bad
return (
);
// good
var multilineJsx = (  
  

    
    
);
// good
return (
  

    
    
  
);

var singleLineJsx = 
Simple JSX
;  
// good, when single line
render() {
  const body = 
hello
;
  return {body};
}

8.自閉ラベル

// bad


// very bad

// bad

// good

9.コンポーネント内部コード組織

// bad
React.createClass({
  _onClickSubmit() {
    // do stuff
  }
  // other stuff
});
// good
React.createClass({
  onClickSubmit() {
    // do stuff
  }
  // other stuff
});

// React  
React.createClass({  
  displayName: '',
  mixins: [],
  statics: {},
  propTypes: {},
  getDefaultProps() {
    // ...
  },
  getInitialState() {
    // do something
  },
  componentWillMount() {
    // do something
  },
  componentDidMount() {
    // do something: add DOM event listener, etc.
  },
  componentWillReceiveProps() {
  },
  shouldComponentUpdate() {},
  componentWillUpdate() {},
  componentDidUpdate() {},
  componentWillUnmount() {
    // do something: remove DOM event listener. etc.
  },
  // clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
  handleClick() {
    // ...
  },
  // getter methods for render like getSelectReason() or getFooterContent()
  // Optional render methods like renderNavigation() or renderProfilePicture()
  render() {
    // ...
  }
});