Reactのコーディング規約で、特に気を付けたいと思ったこと!

[翻訳] Airbnb React/JSX Style Guideを読んで、特に気をつけたいと思ったことを、自分のためのメモです。

1ファイル = 1コンポーネント

ただし以下のような、ステートレスなコンポーネントは複数はOK

function Hello(props) {
  return <div>Hello {props.name}</div>;
}
class HelloJohn extends React.Component {
  render() {
    return <Hello name="John" />;
  }
}
module.exports = HelloJohn;

クラス vs React.createClass vs ステートレス

stateやrefsを使う場合

// good
class Listing extends React.Component {
  // ...
  render() {
    return <div>{this.state.hello}</div>;
  }
}

stateやrefsを使わない場合

// good
function Listing({ hello }) {
  return <div>{hello}</div>;
}

参考サイト

以下、参考にさせて頂きました。 ありがとうございます。

comments powered by Disqus