BabelJS এর মাধ্যমে React JSX Transpile করা

React এর কোড লিখতে সাধারণত JSX সিনট্যাক্স ব্যবহার করা হয়, যা JavaScript এবং HTML-এর একটি কম্বিনেশন। তবে, ব্রাউজারগুলি সরাসরি JSX বুঝতে পারে না, তাই JSX কোডকে JavaScript কোডে রূপান্তর (transpile) করার জন্য BabelJS ব্যবহার করা হয়। BabelJS একটি শক্তিশালী ট্রান্সপাইলার, যা JSX সিনট্যাক্সকে JavaScript কোডে রূপান্তর করে, যা ব্রাউজারে নির্বাহ করা যায়।

React JSX Transpile করার জন্য BabelJS সেটআপ

React এর JSX সিনট্যাক্স ট্রান্সপাইল করতে, আপনাকে @babel/preset-react নামক একটি Babel preset ব্যবহার করতে হবে। এই preset JSX কোডকে JavaScript কোডে রূপান্তর করার কাজ করে।

ধাপ ১: BabelJS এবং প্রয়োজনীয় প্যাকেজ ইনস্টল করা

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

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

এছাড়া, যদি আপনি ES6 বা আধুনিক JavaScript ফিচার ব্যবহার করেন, তবে @babel/preset-env ব্যবহার করতে পারেন:

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

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

এখন আপনি Babel এর কনফিগারেশন ফাইল তৈরি করবেন, যা আপনাকে React JSX কোড ট্রান্সপাইল করতে সহায়তা করবে।

.babelrc ফাইল তৈরি করা:

এটি যদি আপনি .babelrc ফাইল ব্যবহার করেন, তবে এই কনফিগারেশনটি ব্যবহার করুন:

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

babel.config.js ফাইল ব্যবহার করলে:

এটা যদি babel.config.js ফাইল ব্যবহার করেন, তাহলে কনফিগারেশনটি হবে:

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

এই কনফিগারেশনটি নিশ্চিত করবে যে আপনার React JSX কোড সঠিকভাবে JavaScript কোডে রূপান্তরিত হবে।

ধাপ ৩: JSX কোড লেখা

এখন আপনি React কোডে JSX সিনট্যাক্স ব্যবহার করতে পারবেন। উদাহরণস্বরূপ:

import React from 'react';

const App = () => {
  return <h1>Hello, World!</h1>;
};

export default App;

উপরের JSX কোডটি React কম্পোনেন্ট তৈরি করেছে। কিন্তু এই কোডটি সরাসরি ব্রাউজারে চলবে না, তাই এটি Babel এর মাধ্যমে ট্রান্সপাইল করতে হবে।

ধাপ ৪: Babel ব্যবহার করে JSX ট্রান্সপাইল করা

Babel এর মাধ্যমে JSX ট্রান্সপাইল করতে babel-cli বা Webpack ব্যবহার করা যেতে পারে। যদি আপনি babel-cli ব্যবহার করতে চান, তাহলে নিচের কমান্ডটি চালান:

npx babel src --out-dir dist

এখানে:

• src: আপনার কোডের ফোল্ডার যেখানে JSX কোড রয়েছে।
• dist: ট্রান্সপাইলড কোডের আউটপুট ফোল্ডার।

এই কমান্ডটি Babel কে আপনার JSX কোড ট্রান্সপাইল করে dist ফোল্ডারে পাঠাতে বলবে।

React JSX Runtime (React 17+)

React 17 থেকে, automatic JSX runtime চালু করা হয়েছে, যার মাধ্যমে React নামক গ্লোবাল ভেরিয়েবলটি ব্যবহার করার প্রয়োজনীয়তা কমে গেছে। অর্থাৎ, আপনি React ইমপোর্ট না করেও JSX ব্যবহার করতে পারবেন।

automatic JSX runtime চালু করা

@babel/preset-react এর মাধ্যমে React 17 বা তার পরবর্তী ভার্সনের জন্য automatic JSX runtime চালু করা সম্ভব। এই জন্য আপনাকে runtime: 'automatic' অপশনটি যোগ করতে হবে।

babel.config.js এ:

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

এই কনফিগারেশনটি নিশ্চিত করবে যে React কোডে React ইমপোর্ট করার প্রয়োজন নেই।

Legacy JSX runtime (React 16 এবং পূর্ববর্তী ভার্সন)

যদি আপনি React 16 বা তার পুরোনো ভার্সন ব্যবহার করেন, তাহলে runtime: 'classic' অপশন ব্যবহার করতে হবে:

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

এই কনফিগারেশনের মাধ্যমে আপনাকে JSX কোডে React ইমপোর্ট করতে হবে।

ধাপ ৫: Babel এবং Webpack ব্যবহার করে React অ্যাপ্লিকেশন ট্রান্সপাইল করা

React অ্যাপ্লিকেশন ডেভেলপমেন্টে Webpack একটি জনপ্রিয় টুল, যা Babel এর সাথে ইন্টিগ্রেট করে আপনার JSX এবং অন্যান্য JavaScript ফাইলগুলো ট্রান্সপাইল করতে ব্যবহৃত হয়। একটি সহজ Webpack কনফিগারেশন এইভাবে হতে পারে:

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js', // আপনার React অ্যাপের এন্ট্রি পয়েন্ট
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/, // JSX ফাইলগুলোকে ট্রান্সপাইল করার জন্য
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

Webpack ইনস্টলেশন:

npm install --save-dev webpack webpack-cli babel-loader

সারাংশ

React এর JSX সিনট্যাক্সকে JavaScript কোডে রূপান্তর (transpile) করার জন্য BabelJS ব্যবহৃত হয়। @babel/preset-react presetটি JSX সিনট্যাক্সকে সাধারণ JavaScript কোডে রূপান্তর করে, যাতে ব্রাউজার সেগুলো বুঝতে পারে। React 17 এর automatic JSX runtime এর সুবিধা ব্যবহার করতে runtime: 'automatic' কনফিগারেশন করা হয়, যা React ইমপোর্ট করার প্রয়োজনীয়তা কমিয়ে দেয়। Webpack ব্যবহার করে React অ্যাপ্লিকেশন ডেভেলপমেন্টে JSX কোড ট্রান্সপাইল করা সম্ভব। Babel এবং Webpack একত্রে ব্যবহার করলে React কোডকে বিভিন্ন ব্রাউজারে চালানোর জন্য প্রস্তুত করা যায়।