title: Typescript - "Cannot find name" errors in React components
body: <p>I am migrating my existing React code over to TypeScript and I am hitting a lot of issues, one of them being a lot of "Cannot find name" errors when I make my <code>.js</code> files <code>.ts</code> files.</p>
  
  <p>Here is the code in question:</p>
  
  <pre><code>import React from 'react';
  
  const Footer = ({ children, inModal }) =&gt; (
      &lt;footer className={'tableBottomPanel' + (inModal ? " in-modal" : "") }&gt;
          &lt;div&gt;
              {children}
          &lt;/div&gt;
      &lt;/footer&gt;
  );
  
  export default Footer;
  </code></pre>
  
  <p>The five lines from <code>&lt;footer&gt;</code> to <code>&lt;/footer&gt;</code> are underlined in red and give me various errors, depending where I hover my mouse, such as:</p>
  
  <ul>
  <li>Cannot find name 'footer'.</li>
  <li>'>' expected</li>
  <li>Cannot find name 'div'</li>
  <li>Unterminated regular expression literal</li>
  <li>Operator '&lt;' cannot be applied to types 'boolean' and 'RegExp'</li>
  </ul>
  
  <p>Here is my <code>tsconfig.json</code> file:</p>
  
  <pre><code>{
      "compilerOptions": {
          "outDir": "./dist/", // path to output directory
          "sourceMap": true, // allow sourcemap support
          "strictNullChecks": true, // enable strict null checks as a best practice
          "module": "es6", // specify module code generation
          "jsx": "react", // use typescript to transpile jsx to js
          "target": "es5", // specify ECMAScript target version
          "allowJs": true, // allow a partial TypeScript and JavaScript codebase
          "moduleResolution": "node",
          "allowSyntheticDefaultImports": true,
          "lib": [
              "es6",
              "dom"
          ],
          "types": [
              "node"
          ]
      },
      "include": [
          "./src/"
      ]
  }
  </code></pre>
  
  <p>I am incredibly confused and would greatly appreciate some help!</p>