Eslint-config-airbnb ile ".js" uzantılı dosyalarda JSX'e izin verilmez

Question 1

Ben yükledim eslint-config-airbnb Tepki için yapılandırmak ESLINT öncesi gerekiyordu:

Varsayılan dışa aktarmamız, ECMAScript 6+ ve React dahil tüm ESLint kurallarımızı içerir. Eslint, eslint-plugin-import, eslint-plugin-react ve eslint-plugin-jsx-a11y gerektirir.

Benim .eslintrcyapılandırmasını uzanan:

{ "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
  }
}

Maalesef, içinde React JSX kodu bulunan bir .js dosyası linting yaparken aşağıdaki hatayı alıyorum:

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

Eslint-config-airbnb, belirtildiği gibi JSX'i destekleyecek şekilde yapılandırılmamış mıydı?

Bu hatayı gidermek için ne yapılmalı?

Question 2

Dosya uzantılarınızı .jsxbelirtildiği gibi değiştirin veya jsx-dosya adı-uzantı kuralını devre dışı bırakın . .jsJSX uzantılarına izin vermek için yapılandırmanıza aşağıdakileri ekleyebilirsiniz .

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

Question 3

Benim için çalışıyor. sana yardım etmeyi umuyorum.

jsx-dosya-adı uzantısını şu konumda devre dışı bırakın .eslintrc:

"kurallar": {"react / jsx-dosya-adı-uzantısı": [0]}
içinde webpack.config.js:

çözüm: {uzantılar: ['.js', '.jsx']},

Question 4

Senin için işe yaramazsa bana kukla de

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

Question 5

Dosya uzantınızı değiştirmek istemiyorsanız, jsx döndüren bir işlevi dışa aktarabilir ve ardından js dosyanızda bu işlevi içe aktarabilir ve çağırabilirsiniz.

// greeter.jsx

import React from 'react';

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

ve sonra

// index.js

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

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

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

Question 6

Martin'in cevabını açıklamak gerekirse , şu anda JSXReact Native'de kullanmak mümkün değil gibi görünüyor . Bir PR oluşturuldu, ancak parçalanma endişeleri ve benzer şeylere sahip olmanın bilinmeyen sonuçları nedeniyle geri alındı index.ios.jsx. AirBnb'nin bunun etrafında nasıl çalıştığından veya işe yarayıp yaramadığından emin değilim, ancak temelde rulesMartin ile aynı bloğu kullandım .

Question 7

React belgelerinin ardından :

Her JSX öğesi, React.createElement'i (component, props, ... children) çağırmak için sadece sözdizimsel şekerdir.

Airbnb'nin stil rehberini takip ederek :

Uygulamayı JSX olmayan bir dosyadan başlatmadığınız sürece React.createElement'i kullanmayın .

Bunu yapabilirsin:

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