スニペット（react）¶

VSCode Snippets

ReactComponent定義(StatelessFunctionalComponent Type1 ※シンプル)¶

import React from 'react';

const ${TM_FILENAME_BASE} = (props) => (
  <div>{JSON.stringify(props)}</div>
)
export default ${TM_FILENAME_BASE};

vscodeの設定例

    "StatelessFunctionalComponent": {
        "prefix": "react-sfc",
        "body": [
            "import React from 'react';",
            "const ${TM_FILENAME_BASE} = (props) => (",
            "  <div>{JSON.stringify(props)}</div>",
            ")",
            "export default ${TM_FILENAME_BASE};"
        ],
        "description": "StatelessFunctionalComponent"
    }

ReactComponent定義(StatelessFunctionalComponent Type2 ※変数や分岐を使う)¶

import React from 'react';

const ${TM_FILENAME_BASE} = (props) => {
  if (false) return null;
  return (
    <div>{JSON.stringify(props)}</div>
  );
};
export default ${TM_FILENAME_BASE};

ReactComponent定義(classベース)¶

import React, { Component } from 'react';

class ${TM_FILENAME_BASE} extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount = () => {
    // todo
  }

  render() {
    return (
      <div>todo</div>
    );
  }
}
export default ${TM_FILENAME_BASE};

ReactComponent定義(Redux-Container)¶

import React, { Component } from 'react';
import { connect } from 'react-redux';

class ${TM_FILENAME_BASE} extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount = () => {
    // todo
  }

  render() {
    return (
      <div>todo</div>
    );
  }
}

const mapStateToProps = (store) => ({
});

const mapDispatchToProps = {
};

export default connect(mapStateToProps, mapDispatchToProps)(${TM_FILENAME_BASE});

Etc Tips¶

子コンポーネントに自分のpropsを丸ごと渡す場合の書き方¶

// Fuctional Componentの場合
<ChildComponent {...props} />

// ClassBase Componentの場合
<ChildComponent {...this.props} />