no-undef mark JSX elements as not defined

With

var React =require('react'),
    Router = require('react-router'),
    Route = Router.Route,
    DefaultRoute = Router.DefaultRoute;

at the top and using eslint@0.17.0 and eslint-plugin-react@1.5.0 with
"react/jsx-uses-react": 1, "react/jsx-uses-vars": 1

This works fine.

var routes = React.createClass({
  render: function() {
    return (
      <Route
        name='app'
        path='/'
        handler={ App }>

        <Route
          name='bonfires'
          path='/bonfires/?:bonfires?'
          handler={ Bonfires } />

        <DefaultRoute
          handler={ Bonfires } />
      </Route>
    );
  }
});

But this barphs all over the place

var routes = (
  <Route 
    name='app'
    path='/'
    handler={ App }>

    <Route
      name='bonfires'
      path='/bonfires/?:bonfires?'
      handler={ Bonfires } />

    <DefaultRoute
      handler={ Bonfires } />
  </Route>
);

[r01010010]

adding these rules fixed it for me:

"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1

[cookcc]

Official answer is here https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors and it says indeed to add them to globals or to disable the no-undef rule because typescript has already its own checks

overrides: [
    {
      files: ['*.ts', '*.tsx'],
      rules: {
        'no-undef': 0,
      },
    },
  ]