JSX ist in Dateien mit der Erweiterung '.js' mit eslint-config-airbnb nicht zulässig

Ich habe eslint-config-airbnb installiert, das ESLINT for React vorkonfigurieren soll:

Unser Standardexport enthält alle unsere ESLint-Regeln, einschließlich ECMAScript 6+ und React. Es erfordert eslint, eslint-plugin-import, eslint-plugin-react und eslint-plugin-jsx-a11y.

Meine .eslintrcErweiterung seiner Konfiguration:

{ "extends": "eslint-config-airbnb",
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }],
    "react/no-multi-comp": 0,
    "import/default": 0,
    "import/no-duplicates": 0,
    "import/named": 0,
    "import/namespace": 0,
    "import/no-unresolved": 0,
    "import/no-named-as-default": 2,
    "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
    "indent": [2, 2, {"SwitchCase": 1}],
    "no-console": 0,
    "no-alert": 0,
    "linebreak-style": 0
  },
  "plugins": [
    "react", "import"
  ],
  "settings": {
    "import/parser": "babel-eslint",
    "import/resolve": {
      "moduleDirectory": ["node_modules", "src"]
    }
  },
  "globals": {
    "__DEVELOPMENT__": true,
    "__CLIENT__": true,
    "__SERVER__": true,
    "__DISABLE_SSR__": true,
    "__DEVTOOLS__": true,
    "socket": true,
    "webpackIsomorphicTools": true
  }
}

Leider wird beim Flusen einer .js-Datei mit darin enthaltenem React JSX-Code der folgende Fehler angezeigt:

 error  JSX not allowed in files with extension '.js'              react/jsx-filename-extension

Wurde eslint-config-airbnb nicht wie angegeben bereits auf die Unterstützung von JSX reagiert?

Was ist zu tun, um diesen Fehler zu beheben?

Ändern Sie entweder Ihre Dateierweiterungen in .jsxwie erwähnt oder deaktivieren Sie die Regel jsx-Dateiname-Erweiterung . Sie können Ihrer Konfiguration Folgendes hinzufügen, um .jsErweiterungen für JSX zuzulassen .

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

Es ist Arbeit für mich. hoffe dir zu helfen.

1. Deaktivieren Sie die jsx-Dateinamenerweiterung in .eslintrc:

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

2. in webpack.config.js:

   Auflösung: {Erweiterungen: ['.js', '.jsx']},

Nennen Sie mich einen Dummy, wenn es bei Ihnen nicht funktioniert

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

Wenn Sie Ihre Dateierweiterung nicht ändern möchten, können Sie eine Funktion exportieren, die jsx zurückgibt, und diese Funktion dann in Ihre js-Datei importieren und aufrufen.

// greeter.jsx

import React from 'react';

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

und dann

// index.js

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

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

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

Um auf Martins Antwort einzugehen, scheint es derzeit nicht möglich zu sein, JSXin React Native zu verwenden. Eine PR wurde erstellt, aber aufgrund von Bedenken hinsichtlich der Fragmentierung und unbekannter Konsequenzen von Dingen wie zurückgesetzt index.ios.jsx. Ich bin mir nicht sicher, wie AirBnb damit umgeht oder ob sie es tun, aber ich habe im Grunde den gleichen rulesBlock wie Martin verwendet.

Folgende React-Dokumentation :

Jedes JSX-Element ist nur syntaktischer Zucker zum Aufrufen von React.createElement (Komponente, Requisiten, ... Kinder).

Nach Airbnb des Style Guide :

Verwenden Sie React.createElement nur, wenn Sie die App aus einer Datei initialisieren, die nicht JSX ist .

Sie könnten dies tun:

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