title: ESLint with React gives `no-unused-vars` errors
body: <p>I've setup <code>eslint</code> &amp; <code>eslint-plugin-react</code>. </p>
  
  <p>When I run ESLint, the linter returns <code>no-unused-vars</code> errors for each React component.</p>
  
  <p>I'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas?</p>
  
  <p>Example: </p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import Header from './header.js';
  
  export default class App extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Header /&gt;
          {this.props.children}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Linter Errors:</strong></p>
  
  <pre><code>/my_project/src/components/app.js
    1:8  error  'React' is defined but never used   no-unused-vars
    2:8  error  'Header' is defined but never used  no-unused-vars
  </code></pre>
  
  <p><strong>Here is my <code>.eslintrc.json</code> file:</strong></p>
  
  <pre><code>{
      "env": {
          "browser": true,
          "es6": true
      },
      "extends": "eslint:recommended",
      "parserOptions": {
          "ecmaFeatures": {
              "experimentalObjectRestSpread": true,
              "jsx": true
          },
          "sourceType": "module"
      },
      "plugins": [
          "react"
      ],
      "rules": {
          "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
          "indent": [
              "error",
              2
          ],
          "linebreak-style": [
              "error",
              "unix"
          ],
          "quotes": [
              "error",
              "single"
          ],
          "semi": [
              "error",
              "always"
          ]
      }
  }
  </code></pre>