React (পর্ব ০২) JSX এর বেসিক থেকে অ্যাডভান্সড

ক) JSX কী এবং কেন?

JSX এর পূর্ণরূপ JavaScript XML। যা জাভাস্ক্রিপ্টের একটি এক্সটেনশন (.jsx)। আগের পর্বে আমরা App.jsx এবং Main.jsx নামের ২টা ফাইলের কথা বলেছিলাম সেটা হয়তো মনে রেখেছেন। এই .jsx এক্সটেনশন যুক্ত ফাইল আসলে কী করে? এটি আপনাকে জাভাস্ক্রিপ্ট ফাইলে HTML-এর মতো কোড লেখার সুযোগ করে দেয়। JSX মূলত সরাসরি জাভাস্ক্রিপ্টও নয় আবার HTMLও নয় তাই ব্রাউজারের কাছে এটি অপরিচিত। এটি ট্রান্সপাইল হয়ে React এর React.createElement() ফাংশনে রূপান্তরিত হয়, যা শেষ পর্যন্ত প্লেইন জাভাস্ক্রিপ্ট অবজেক্টে পরিনত হয়।

প্লেইন জাভাস্ক্রিপ্টের চেয়ে JSX দিয়ে UI তৈরি করাটা অনেক সুবিধার, এতে রেন্ডারিং লজিক, UI মার্কআপ এবং স্টাইল একসাথে লেখা যায়। এর অর্থ হলো JSX ফাইল আপনাকে একই জায়গায় HTML, CSS এবং JavaScript কোড লিখার সুযোগ করে দিচ্ছে। এছাড়াও JSX ব্যবহারে ডিফল্টভাবে XSS (ক্রস-সাইট স্ক্রিপ্টিং) অ্যাটাক প্রতিরোধে করা যায়।

JSX বেসিক সিনট্যাক্স

১. JSX কম্পোনেন্ট থেকে আপনি শুধুমাত্র এবং কেবলমাত্র একটি ইলিমেন্ট রিটার্ন করতে পারবেন। একাধিক ইলিমেন্ট রিটার্ন করতে হলে অবশ্যই তাদেরকে কোনো প্যারেন্ট ইলিমেন্ট দিয়ে মুড়িয়ে দিতে হবে। এছাড়া আপনি ফ্র্যাগমেন্ট <></> ব্যবহার করেও সেটা করতে পারেন। DOM এ কোনো অতিরিক্ত ইলিমেন্ট যুক্ত না করে প্যারেন্ট ইলিমেন্ট হিসেবে ফাকা ট্যাগ (<></>) সিনট্যাক্স ব্যবহার করার নামই ফ্র্যাগমেন্ট।

নিচে প্যারেন্ট ইলিমেন্ট হিসেবে <div> </div> দিয়ে মুড়িয়ে দেওয়া হয়েছে-

এখানে প্যারেন্ট ইলিমেন্ট হিসেবে <> </> দিয়ে মুড়িয়ে দেওয়া হয়েছে-

২. JSX এর মধ্যে জাভাস্ক্রিপ্ট ভেরিয়েবল, ফাংশন কল, গাণিতিক হিসাব ইত্যাদি লিখতে গেলে কার্লি ব্রেস ‘{ }’ বা দ্বিতীয় বন্ধনীর ভেতরে লিখতে হয়।

৩. ট্যাগগুলো অবশ্যই সঠিকভাবে ক্লোজ করতে হবে। যেমনঃ <img />, <br />, <div></div>

৪. অ্যাট্রিবিউট এবং ইভেন্টের নাম ক্যামেলকেসে লিখতে হয়।

৫. for অ্যাট্রিবিউটকে htmlFor এবং class অ্যাট্রিবিউটকে className লিখতে হয় কারণ for ও class জাভাস্ক্রিপ্টের রিজার্ভ ওয়ার্ড।

নোটঃ অ্যাট্রিবিউটের ভ্যালু বুলিয়ান true-এর হলে ভ্যালু বাদ দিন। উদাঃ <input disabled /> আর ভ্যালু false হলে এক্সপ্লিসিটলি পাস করতে হবে। উদাঃ <input disabled={false} />

৬. JSX-এ style অ্যাট্রিবিউট সবসময় জাভাস্ক্রিপ্ট অবজেক্ট style={{ ... }} নেয় , HTML এর মতো স্ট্রিং style="..." সাপোর্ট করে না। প্রোপার্টি নাম ক্যামেলকেসে এবং ভ্যালু কোটেশনের মধ্যে লিখতে হবে।

৭. JSX এ সরাসরি If/Else ব্যবহার করা যায় না। এর পরিবর্তে টার্নারি অপারেটর (? :) বা লজিক্যাল এন্ড (&&) বা ফাংশন ব্যবহার করা হয়।

৮. JSX এর ভিতরে সরাসরি For Loop ব্যবহার করা যাবে না। এর পরিবর্তে map() ব্যবহার করতে হবে। UI তে লিস্ট দেখাতে (রেন্ডারিং করতে) হলে key প্রোপার্টির একটা উনিক আইডি দিতে হবে।

৯. JSX-এ কমেন্ট করতে হলে এইভাবে করতে হয়- { /* এটি একটি কমেন্ট */ }

নিজেকে যাচাইঃ

প্রশ্ন ১- JSX কিভাবে HTML থেকে আলাদা?

প্রশ্ন ২- ফ্র্যাগমেন্ট কি এবং এগুলো কেন উপকারী?

প্রশ্ন ৩- JSX-এ কিভাবে এলিমেন্টের অ্যারে রেন্ডার করতে হয়?

খ) কম্পোনেন্ট কী?

React কম্পোনেন্ট বুঝার জন্যে নিচের ছবিটি দেখুন-

কম্পোনেন্ট হলো UI এর অংশ বা টুকরা যা পুনরায় ব্যবহার করা যায়। উপরের ছবিতে যেমন দেখছেন টুকরাগুলো জোড়া লাগিয়ে একটা আকৃতি তৈরি হচ্ছে, তেমনি অনেক কম্পোনেন্ট জোড়া লাগিয়ে UI তৈরি করা হয়। React এ মূলত সবই কম্পোনেন্ট। একটা কম্পোনেন্ট হতে পারে ছোট্ট একটা বাটন আবার হতে পারে একটা পুরো পেজ। প্রয়োজনে কম্পোনেন্ট এর ভেতর অন্য কম্পোনেন্ট (Nesting) থাকতে পারে।

কম্পোনেন্ট প্রকারভেদ

১. ফাংশনাল কম্পোনেন্ট

এটি সাধারণ জাভাস্ক্রিপ্ট ফাংশন বা অ্যারো ফাংশন, যা JSX রিটার্ন করে। তবে এই ফাংশনের নাম শুরু হয় বড় হাতের অক্ষর দিয়ে। সাধারণ ফাংশন প্যারামিটারের মাধ্যমে বাইরে থেকে ডেটা রিসিভ করে, কম্পোনেন্ট যার মাধ্যমে রিসিভ করে তাকে প্রপস (Props যা পরিবর্তন করা যাবে না) বলে। মডার্ন React এ ফাংশনাল কম্পোনেন্টই বেশি ব্যবহার হয়ে থাকে।

সাধারণ জাভাস্ক্রিপ্ট ফাংশনাল কম্পোনেন্ট-

অ্যারো ফাংশনাল কম্পোনেন্ট-

২. Class কম্পোনেন্ট

জাভাস্ক্রিপ্ট Class সিন্ট্যাক্স ব্যবহার করে এই কম্পোনেন্ট তৈরি করা হয়। তবে সেটা Extends করতে হয় React.Component এর সাথে। Class কম্পোনেন্ট ভালো বুঝতে হলে আপনাকে অবশ্যই জাভাস্ক্রিপ্ট Class টা ভালো মত শিখে আসতে হবে। Class কম্পোনেন্টে বাইরে থেকে ডেটা রিসিভ করতে হলে this.props (যা পরিবর্তন করা যাবে না) দিয়ে করতে হয়।

রেন্ডারিং

Render শব্দের অর্থ হলো ‘দেখানো বা পেশ করা‘। React এর মাধ্যমে UI দেখানো এবং ডেটা পরিবর্তনের সাথে সাথে UI আপডেট করার প্রক্রিয়াকে রেন্ডারিং বলে। রেন্ডারিং ২ প্রকার- প্রাথমিক রেন্ডারিং (Initial Render): যখন একটি React অ্যাপ্লিকেশন প্রথমবার লোড হয়, তখন তার কম্পোনেন্টগুলো ব্রাউজারে প্রদর্শনের জন্য রেন্ডার করা হয়। এটি প্রাথমিক রেন্ডারিং নামে পরিচিত। রি-রেন্ডারিং (Re-rendering): যখন কম্পোনেন্টের state বা props পরিবর্তন হয়, তখন React সেই কম্পোনেন্টটিকে আবার রেন্ডার করে। এই প্রক্রিয়াটি রি-রেন্ডারিং নামে পরিচিত। (state এবং props নিয়ে পরবর্তীতে আলোচনা করা হবে।)

৩. Pure কম্পোনেন্ট

Pure কম্পোনেন্ট, Class কম্পোনেন্টের একটা স্পেশাল ভার্সন। অপ্রয়োজনীয় রিরেন্ডারিং রোধ করে পারফরম্যান্স বৃদ্ধি করতে Pure কম্পোনেন্ট ব্যবহার করা হয়। এটি React.PureComponent এর সাথে Extends থাকে ফলে shallow checking করে (প্রথম লেভেল চেকিং হয়, ডিপলি অবজেক্ট বা অ্যারের ভেতরে চেকিং হয় না) পরিবর্তন না পেলে রিরেন্ডার করে না। Class কম্পোনেন্টে প্যারেন্ট রিরেন্ডার হলে চাইল্ডও রিরেন্ডার হয়, Pure কম্পোনেন্টে এই ব্যাপারটা এড়ানো যায়।