JSX not allowed in files with extension ' .js' with eslint-config-airbnb

Question

Either change your file extensions to .jsx as mentioned or disable the jsx-filename-extension rule. You can add the following to your config to allow .js extensions for JSX.

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}

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'] },

Call me a dummy if it does not work for you

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

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);