জেএসএক্সকে এসেলিন্ট-কনফিগারেশন-এয়ারবিএনবি সহ '.js' এক্সটেনশানযুক্ত ফাইলগুলিতে অনুমোদিত নয়

Question 1

আমি Eslint-config-airbnb ইনস্টল করেছি যা প্রতিক্রিয়ার জন্য ESLINT কনফিগার করার পূর্বে ধারণা করা হয়েছিল:

আমাদের ডিফল্ট রফতানিতে ECMAScript 6+ এবং প্রতিক্রিয়া সহ আমাদের ESLint বিধিগুলি রয়েছে। এটির জন্য এসলিন্ট, এসলিন্ট-প্লাগ-ইন-আমদানি, এস্লিন্ট-প্লাগ-ইন-প্রতিক্রিয়া এবং এসলিন্ট-প্লাগ-ইন-জেএসএক্স-এ 11y দরকার।

আমার .eslintrcএর কনফিগারেশনটি বাড়ানো হচ্ছে:

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

দুর্ভাগ্যজনকভাবে আমি এর ভিতরে প্রতিক্রিয়া জেএসএক্স কোড দিয়ে একটি .js ফাইলটি আবদ্ধ করার সময় নিম্নলিখিত ত্রুটিটি পেয়েছি:

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

ইতিমধ্যে বলা হয়েছে, জেএসএক্স সমর্থন করার জন্য এসলিন্ট-কনফিগার-এয়ারবিএনবি কনফিগার করা হয়নি?

এই ত্রুটিটি অপসারণ করার জন্য কী করা উচিত?

Question 2

হয় .jsxউল্লিখিত হিসাবে আপনার ফাইল এক্সটেনশানগুলি পরিবর্তন করুন বা জেএসএক্স-ফাইল নাম-এক্সটেনশন নিয়ম অক্ষম করুন । আপনি .jsজেএসএক্সের এক্সটেনশানগুলির অনুমতি দেওয়ার জন্য আপনার কনফিগারেশনে নিম্নলিখিতগুলি যুক্ত করতে পারেন ।

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

Question 3

এটা আমার জন্য কাজ। আপনাকে সাহায্য আশা করি

এতে jsx-filename- এক্সটেনশন অক্ষম করুন .eslintrc:

"বিধিগুলি": {"প্রতিক্রিয়া / জেএসএক্স-ফাইল নাম-এক্সটেনশন": [0]}
ইন webpack.config.js:

সমাধান: {এক্সটেনশন: ['.js', '.jsx']},

Question 4

যদি এটি আপনার পক্ষে কাজ না করে তবে আমাকে ডামি বলুন

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

Question 5

আপনি যদি নিজের ফাইলের এক্সটেনশান পরিবর্তন করতে না চান, আপনি এমন একটি ফাংশন রফতানি করতে পারেন যা জেএসএক্স ফেরত দেয় এবং তারপরে আপনার জেএস ফাইলটিতে সেই ফাংশনটি আমদানি করে কল করতে পারে।

// greeter.jsx

import React from 'react';

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

এবং তারপর

// 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

মার্টিনের উত্তরটি ব্যাখ্যা করার জন্য , মনে হয় বর্তমানে JSXপ্রতিক্রিয়া নেটিভ ব্যবহার করা সম্ভব নয় । একটি জনসংযোগ তৈরি করা হয়েছিল কিন্তু বিভাজন সম্পর্কে উদ্বেগ এবং এর মতো জিনিসগুলির অজানা পরিণতি সম্পর্কে উদ্বেগের কারণে তা উল্টানো হয়েছিল index.ios.jsx। আমি নিশ্চিত নই যে এয়ারবিএনবি কীভাবে এটি ব্যবহার করে বা তারা যদি তা করে তবে আমি মূলত rulesমার্টিনের মতো একই ব্লকটি ব্যবহার করেছি ।

Question 7

নিম্নলিখিত প্রতিক্রিয়া ডকুমেন্টেশন :

প্রতিটি জেএসএক্স উপাদানগুলি React.createElement (উপাদান, প্রপস, ... শিশু) কল করার জন্য কেবল সিনট্যাকটিক চিনি is

এয়ারবিএনবির স্টাইল গাইড অনুসরণ করুন :

আপনি জেএসএক্স নয় এমন কোনও ফাইল থেকে অ্যাপ্লিকেশন শুরু না করা পর্যন্ত React.createElement ব্যবহার করবেন না ।

আপনি এটি করতে পারেন:

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