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 কনফিগারেশন ফাইলের মাধ্যমে আপনি সহজেই এই সেটআপটি কনফিগার করতে পারবেন।
Read more
