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

Question

I\'ve installed eslint-config-airbnb that is supposed to pre configure ESLINT for React:

Our default export contains all of our ESLint rules, includin

Answer 1

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 => (
  

    {`Hello, ${name}!`}
  
);

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