title: ESLint not detecting imported React Components
body: <p>I am having an issue with ESLint not detecting imported React components with a 'no-unused-vars' rule. My components are imported:</p>
  
  <pre><code>import MediaQuery from 'react-responsive';
  </code></pre>
  
  <p>and the component is used further down in the file:</p>
  
  <pre><code>render() {
    return (
      &lt;MediaQuery maxDeviceWidth={750}&gt;
        &lt;div style={styles.iconMobileContainerRight} &gt;
          &lt;i className="fa fa-chevron-right" style={styles.checkboxMobile} aria-hidden="true" &gt;&lt;/i&gt;
        &lt;/div&gt;
      &lt;/MediaQuery&gt;
    );
  }
  </code></pre>
  
  <p>My .eslintrc.js file is as follows:</p>
  
  <pre><code>module.exports = {
      "env": {
          "browser": true,
          "commonjs": true,
          "es6": true,
          "node": true
      },
      "extends": "eslint:recommended",
      "parserOptions": {
          "ecmaFeatures": {
              "experimentalObjectRestSpread": true,
              "jsx": true
          },
          "sourceType": "module"
      },
      "plugins": [
          "react"
      ],
      "rules": {
          "indent": [
              "error",
              2
          ],
          "linebreak-style": [
              "error",
              "unix"
          ],
          "quotes": [
              "error",
              "single"
          ],
          "semi": [
              "error",
              "always"
          ]
      }
  };
  </code></pre>
  
  <p>I am using the atom text editor with the linter and linter-eslint packages installed (both up to date with the latest releases). What am I missing to make the linter detect the use of the imported component?</p>