@babel/preset-react:

@babel/preset-react একটি জনপ্রিয় Babel preset যা React এর JSX (JavaScript XML) সিনট্যাক্সকে সাধারণ JavaScript কোডে রূপান্তর করতে ব্যবহৃত হয়। React ব্যবহারের সময় JSX সিনট্যাক্স ব্যবহার করা হয়, যা JavaScript কোডের ভিতরে HTML-এর মতো কোড লেখার সুবিধা দেয়। কিন্তু, ব্রাউজারে JSX সরাসরি কাজ করে না, তাই এটি Babel-এর মাধ্যমে ট্রান্সপাইল করতে হয়।

@babel/preset-react presetটি JSX কোডকে JavaScript কোডে রূপান্তরিত করতে এবং React সম্পর্কিত অন্যান্য বৈশিষ্ট্য সমর্থন করতে ব্যবহৃত হয়।

@babel/preset-react এর কার্যকারিতা

১. JSX রূপান্তর (JSX Transformation)

JSX কোডকে সাধারণ JavaScript কোডে রূপান্তর করা হয়। উদাহরণস্বরূপ:

JSX:

const element = <h1>Hello, world!</h1>;

রূপান্তরিত JavaScript:

const element = React.createElement('h1', null, 'Hello, world!');

এই রূপান্তরটি নিশ্চিত করে যে React কোড ব্রাউজারে সঠিকভাবে কাজ করবে।

২. React কোডের জন্য সুপারিশকৃত প্লাগিন ব্যবহার

React-এর কিছু নতুন ফিচার যেমন automatic JSX runtime বা class properties এর জন্য অতিরিক্ত প্লাগিনের প্রয়োজন হয়। @babel/preset-react এই প্লাগিনগুলো স্বয়ংক্রিয়ভাবে কনফিগার করে দেয়।

৩. JSX রানটাইম (JSX Runtime)

React 17 থেকে automatic JSX runtime চালু হয়েছে, যা React কোডে React নামক গ্লোবাল ভেরিয়েবল ব্যবহার করার প্রয়োজনীয়তা কমিয়ে দেয়। @babel/preset-react এর মাধ্যমে এটি সমর্থন পাওয়া যায়।

@babel/preset-react সেটআপ

React প্রজেক্টে @babel/preset-react ব্যবহার করার জন্য আপনাকে সেটি ইনস্টল এবং কনফিগার করতে হবে।

১. ইনস্টলেশন

প্রথমে আপনাকে @babel/preset-react ইনস্টল করতে হবে। কমান্ড লাইন থেকে নিচের কোডটি চালান:

npm install --save-dev @babel/preset-react

২. Babel কনফিগারেশন ফাইল আপডেট

এখন আপনাকে Babel কনফিগারেশন ফাইলে (যেমন .babelrc বা babel.config.js) @babel/preset-react যোগ করতে হবে।

.babelrc (যদি .babelrc ফাইল ব্যবহার করেন):

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

babel.config.js (যদি babel.config.js ব্যবহার করেন):

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ]
};

এখন Babel আপনার React JSX কোডকে সঠিক JavaScript কোডে রূপান্তরিত করবে।

React 17+ এর জন্য JSX Runtime

React 17 থেকে JSX ব্যবহার করার জন্য React ভেরিয়েবলটি আর import করার প্রয়োজন নেই, যদি আপনি automatic JSX runtime ব্যবহার করেন। @babel/preset-react এর মাধ্যমে এটি স্বয়ংক্রিয়ভাবে কনফিগার করা যায়।

১. Automatic Runtime সক্রিয় করা

যদি React 17 বা তার পরবর্তী ভার্সন ব্যবহার করেন, তাহলে @babel/preset-react সেটআপ করার সময় runtime অপশনটি automatic হিসাবে সেট করুন।

babel.config.js:

module.exports = {
  presets: [
    [
      '@babel/preset-react',
      {
        runtime: 'automatic'
      }
    ]
  ]
};

এই কনফিগারেশনের মাধ্যমে, Babel JSX ট্রান্সপাইল করার সময় React.createElement() কে অটোমেটিকালি ব্যবহার করবে, এবং আপনার কোডে React ইমপোর্টের প্রয়োজন হবে না।

২. Legacy Runtime

React 16.x এর জন্য, আপনাকে JSX কোডে React ইমপোর্ট করতে হবে। এই জন্য runtime অপশনটি classic রাখতে হবে।

module.exports = {
  presets: [
    [
      '@babel/preset-react',
      {
        runtime: 'classic'
      }
    ]
  ]
};

@babel/preset-react এর সুবিধাসমূহ

1. JSX ট্রান্সপাইল: JSX সিনট্যাক্সকে ব্রাউজারে চলা JavaScript কোডে রূপান্তর করা।
2. Automatic JSX Runtime: React 17+ এর automatic runtime এর মাধ্যমে React ইমপোর্টের প্রয়োজনীয়তা কমানো।
3. Class Properties সমর্থন: React ক্লাস কম্পোনেন্টগুলিতে ক্লাস প্রপার্টি এবং ফাংশনাল কম্পোনেন্টে হুকস সমর্থন।
4. React এর নতুন ফিচারের সাথে সামঞ্জস্যপূর্ণ: React-এর নতুন ফিচারগুলো যেমন fragment shorthand, React.createElement কম্প্যাক্ট কোড সমর্থন।

সারাংশ

@babel/preset-react একটি গুরুত্বপূর্ণ Babel preset যা React JSX কোডকে সঠিক JavaScript কোডে রূপান্তরিত করতে ব্যবহৃত হয়। এটি React এর আধুনিক ফিচারগুলো যেমন automatic JSX runtime, class properties, এবং React এর অন্যান্য নতুন বৈশিষ্ট্যগুলির সমর্থন প্রদান করে। React প্রজেক্টে সহজে JSX কোড ট্রান্সপাইল করতে এই presetটি ব্যবহৃত হয়, যা কোডের উন্নয়ন এবং কার্যক্ষমতা বাড়াতে সাহায্য করে।

React কোড, যেমন JSX (JavaScript XML), React এর জন্য একটি বিশেষ সিনট্যাক্স যা ব্রাউজারে সরাসরি রান করতে পারে না। এটি একটি HTML-অনুপ্রাণিত সিনট্যাক্স যা JavaScript কোডের মধ্যে লেখা হয়। তবে, ব্রাউজারগুলি JSX বুঝতে পারে না, তাই JSX কোডকে সাধারণ JavaScript কোডে রূপান্তর (Transpile) করতে হয়। এই কাজটি করার জন্য BabelJS ব্যবহৃত হয় এবং @babel/preset-react হল সেই প্যাকেজ যা React কোডকে ট্রান্সপাইল করতে সাহায্য করে।

@babel/preset-react এর ভূমিকা

@babel/preset-react একটি Babel preset যা JSX (JavaScript XML) এবং অন্যান্য React ফিচারগুলিকে সাধারণ JavaScript কোডে রূপান্তর করে। এটি JSX সিনট্যাক্সকে React.createElement() কলসের মধ্যে রূপান্তর করে, যাতে React কোডটি ব্রাউজারে সঠিকভাবে কাজ করতে পারে।

@babel/preset-react এর কাজ কীভাবে করে?

React কোডের জন্য JSX এবং React-specific features যেমন Fragment, PropTypes, এবং jsx ফিচারগুলিকে সঠিক JavaScript কোডে রূপান্তর করা প্রয়োজন। @babel/preset-react এটি করে এবং এতে কিছু অতিরিক্ত অপশনও থাকে যা React এর বিভিন্ন বৈশিষ্ট্যকে নিয়ন্ত্রণ করতে সাহায্য করে।

JSX ট্রান্সফর্মেশন:

JSX কোডটি সাধারণত React.createElement() ফাংশনের কল হিসেবে রূপান্তরিত হয়। উদাহরণস্বরূপ:

JSX:

const element = <h1>Hello, world!</h1>;

ট্রান্সপাইলড কোড:

const element = React.createElement('h1', null, 'Hello, world!');

@babel/preset-react এর ইনস্টলেশন

Babel এবং @babel/preset-react সেটআপ করতে, প্রথমে আপনাকে প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করতে হবে। এখানে পুরো প্রক্রিয়াটি দেয়া হলো:

১. Babel এবং @babel/preset-react ইনস্টল করা:

Node.js প্রকল্পে Babel এবং React preset ইনস্টল করতে নীচের কমান্ডগুলো চালান:

npm install --save-dev @babel/core @babel/cli @babel/preset-react

এছাড়াও, যদি আপনি React কোডের ট্রান্সপাইলিং ব্যবহার করতে চান, তবে @babel/preset-env ইনস্টল করাও দরকার হতে পারে:

npm install --save-dev @babel/preset-env

২. Babel কনফিগারেশন ফাইল তৈরি করা:

এখন আপনাকে Babel এর কনফিগারেশন ফাইল তৈরি করতে হবে (যেমন .babelrc বা babel.config.js), যাতে @babel/preset-react নির্ধারণ করা হয়।

উদাহরণ: .babelrc কনফিগারেশন ফাইল

{
  "presets": [
    "@babel/preset-env",   // ES6+ কোড ট্রান্সপাইল করার জন্য
    "@babel/preset-react"  // React কোড ট্রান্সপাইল করার জন্য
  ]
}

এই কনফিগারেশনে:

• @babel/preset-env ES6 বা পরবর্তী JavaScript ফিচারগুলিকে পুরনো ভার্সনে রূপান্তর করবে।
• @babel/preset-react JSX কোড এবং React এর অন্যান্য বৈশিষ্ট্য ট্রান্সপাইল করবে।

৩. কোড ট্রান্সপাইল করা:

Babel কনফিগারেশন সেট আপ করার পর, এখন আপনি আপনার React কোডটিকে ট্রান্সপাইল করতে পারবেন। টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:

npx babel src --out-dir dist

এখানে:

• src হলো আপনার কোডের উৎস ফোল্ডার (যেখানে React কোড রয়েছে)।
• dist হলো আউটপুট ফোল্ডার (যেখানে ট্রান্সপাইল করা কোড থাকবে)।

@babel/preset-react এর অতিরিক্ত ফিচার

@babel/preset-react এর মধ্যে কিছু অতিরিক্ত অপশনও রয়েছে যা আপনাকে React কোড ট্রান্সপাইল করার সময় কাস্টমাইজ করতে সাহায্য করতে পারে:

১. Development এবং Production Mode

• development: এটি React এর জন্য একটি উন্নত ডিবাগিং অভিজ্ঞতা প্রদান করে।
• production: এটি React কোডকে অটো অপটিমাইজ করে, যেমন React.createElement কলগুলো মুছে ফেলে এবং কোডকে ছোট করে।

কনফিগারেশন উদাহরণ:

{
  "presets": [
    ["@babel/preset-env", { "targets": "defaults" }],
    ["@babel/preset-react", { "development": true }]
  ]
}

২. Automatic JSX Runtime (React 17+)

React 17 থেকে JSX কোডকে ট্রান্সপাইল করার জন্য নতুন একটি রUNTIME চালু করা হয়েছে। এটি React কে সরাসরি কোডে ইনপুট দেয়ার প্রয়োজনীয়তা কমিয়ে দেয়।

{
  "presets": [
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

এতে, আপনাকে JSX ব্যবহার করতে হলে React ইমপোর্ট করার প্রয়োজন হয় না, যেমনটা পূর্বে ছিল।

৩. React Refresh (Fast Refresh)

React এর হট রিলোডিং ফিচার React Fast Refresh কে উন্নত করতে সাহায্য করে, যা ডেভেলপমেন্টে কোডের পরিবর্তনগুলিকে দ্রুত এবং সঠিকভাবে দেখায়। এটি বিশেষ করে ডেভেলপমেন্ট পরিবেশে ব্যবহৃত হয়।

সারাংশ

@babel/preset-react React কোডকে ট্রান্সপাইল করতে ব্যবহৃত একটি গুরুত্বপূর্ণ Babel preset। এটি JSX এবং React-specific features (যেমন Fragment, PropTypes) কে সাধারণ JavaScript কোডে রূপান্তর করে, যাতে React কোড ব্রাউজারে সঠিকভাবে কাজ করতে পারে। এটি React 17+ তে automatic JSX runtime সাপোর্ট করে এবং ডেভেলপমেন্ট এবং প্রোডাকশন উভয় পরিবেশে React কোডকে অপটিমাইজ করতে সাহায্য করে।

React কোড ট্রান্সপাইল করতে, আপনি @babel/preset-react সহ অন্যান্য presets (যেমন @babel/preset-env) ব্যবহার করতে পারেন। Babel কনফিগারেশন ফাইলের মাধ্যমে আপনি সহজেই এই সেটআপটি কনফিগার করতে পারবেন।