SFCでのeslintの'React' is defined but never used

SFC(stateless functional component) ではReactが未使用の変数としてeslintに検知された。

import React from 'react' // <- 'React' is defined but never used  no-unused-vars

const Header = props => {
  return (
    <header>
      <h1>{ props.title }</h1>
    </header>
  )
}

export default Header

JSXが変換された結果React.createElementでコンポーネントが作られるので明示的にReactをimportする必要があり、その結果no-unused-varsでひっかかるようなことになる。

jsx-uses-react

この問題は、eslint-plugin-reactのjsx-uses-reactを.eslintrcに追加することで解決できた。

    "react/jsx-uses-react": [1]

JSX expands to a call to React.createElement, a file which includes React but only uses JSX should consider the React variable as used.

ReactをimportするだけじゃなくてJSXも使用している場合はReactを使用されている変数とみなしてくれる。

github.com