[Solved]-JSX not allowed in files with extension ' .js' with eslint-config-airbnb-Reactjs

For future readers who want to write jsx in .js files:

0. Install npm i react react-dom even if you think you're not writing react.
1. Install npm i -D @babel/preset-react
2. In babel config: plugins: ['@babel/plugin-transform-react-jsx']
3. you should setup module.rules for /\.jsx?$/ files with babel-loader (so you will need to install npm i -D babel-loader too)

To expound on Martin's answer, it seems that it is not possible, currently, to use JSX in React Native. A PR was created but reverted due to concerns about fragmentation and unknown consequences of having things like index.ios.jsx. I'm not sure how AirBnb works around this or if they do, but I have used basically the same rules block as Martin.

Following React documentation:

Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children).

Following Airbnb's style guide:

Do not use React.createElement unless you’re initializing the app from a file that is not JSX.

You could do this:

    //index.js
    const app = React.createElement(App);
    ReactDOM.render(app, document.getElementById('root'));

If you don't want to change your file extension, you can export a function that returns jsx, and then import and call that function in your js file.

// greeter.jsx

import React from 'react';

export default name => (
  <div>
    {`Hello, ${name}!`}
  </div>
);

and then

// index.js

import ReactDOM from 'react-dom';
import greeter from './components/greeter';

const main = document.getElementsByTagName('main')[0];

ReactDOM.render(greeter('World'), main);

Call me a dummy if it does not work for you

    "rules": {
        "react/jsx-filename-extension": [0],
        "import/extensions": "off"
    }

It's work for me. hope to help you.

1. disable jsx-filename-extension in .eslintrc:

   "rules": { "react/jsx-filename-extension": [0] }

2. in webpack.config.js:

   resolve: { extensions: ['.js', '.jsx'] },