Login
জেএসএক্স(JSX) পরিচিতি

জেএসএক্স(JSX) পরিচিতি

রিঅ্যাক্ট নিয়ে কাজ শুরু করার আগে একটা গুরুত্বপূর্ণ কিন্তু অপশনাল টপিক নিয়ে আজকে আলোচনা করবো। আমরা আজকে জেএসএক্স (JSX) সিনট্যাক্স নিয়ে আলোচনা করবো।

রিঅ্যাক্ট এর প্রোজেক্ট এ আপনি এই টাইপ এর কোড অহরহ দেখবেনঃ

এটাকেই আসলে জেএসএক্স বলে। জেএসএক্স সিনট্যাক্স দেখতে অনেকটা এইচটিএমএল ( HTML) এর মতো। কিন্তু এটা এইচটিএমএলও না আবার জাভস্ক্রিপ্ট এর স্ট্রিংও না। বরং এটা জাভাস্ক্রিপ্ট এরই সিনট্যাক্স এক্সটেনশন। এটাকে অ্যাড করা হয়েছে ডেভেলপারদের সুবিধার জন্যে।

আমরা ব্যাবেল এর অনলাইন কম্পাইলার ইউজ করে জেএসএক্স কে ভিতর থেকে দেখবো। প্রথমে এই লিঙ্কে গিয়ে আমরা উপরের জেএসএক্স কোডটা বাম দিকে পেস্ট করবো। এবার ডানদিকে লক্ষ্য করুন, এটা হচ্ছে আসলে জেএসএক্স এর পূর্ণ ভার্শনঃ

দেখুন একটা নরমাল এইচটিএমএল কোড এর মতো দেখতে কোড কতো কমপ্লেক্স দেখা যাচ্ছে। আপনি এই কমপ্লেক্স ভার্শনও ইউজ করতে পারবেন আপনার রিঅ্যাক্ট অ্যাপ এ। কিন্তু এতো সাজানো গোছানো সিনট্যাক্স থাকতে এতো কমপ্লেক্স সিনট্যাক্স কে ইউজ করবে বলেন? আর তাই জেএসএক্স ইউজ করাটাই বুদ্ধিমানের কাজ।

এখন জেএসএক্স এর মেইন কাজ হচ্ছে রিঅ্যাক্ট এর ইলিমেন্ট তৈরি করা যেটা আমরা পরের পর্বে ইউজ করা শুরু করবো। তাছাড়া জেএসএক্স এইচটিএমএলের মতো হলেও এটার বেশ ভলো কিছু ফাংশানালিটি আছে। যেমন আমরা চাইলে জেএসএক্স এর ভিতরে জাভাস্ক্রিপ্ট এর ভ্যারিয়েবলও ইন্সার্ট করতে পারিঃ

এখনি আপনাকে জানতে হবে না এই কোড কিভাবে কাজ করছে, শুধু এটুকু জানুন এভাবে জেএসএক্স এ ভ্যারিয়েবল নিয়েও কাজ করা যায়। একইরকম ভাবে ফাংশনও কল করতে পারবেনঃ

আসলে এভাবে যেকোনো জাভাস্ক্রিপ্ট এক্সপ্রেশনকে লিখতে পারবেন জেএসএক্স এর ভিতরেঃ

জেএসএক্স এ আপনি এইচটিএমএলের মতো করে এভাবে অ্যাট্রিবিউটও নিতে পারবেন। অ্যাট্রিবিউটের মতো দেখতে হলেও এটাকে মূলত প্রপস বলা হয়। প্রপস দিয়ে রিঅ্যাক্ট এ অন্যরকমের কাজ করা হয় যেগুলো আমরা আস্তে আস্তে দেখবো। তবে আপনি এভাবে অ্যাট্রিবিউট(এর মতো জিনিস) নিতে পারবেনঃ

এখন জেএসএক্স কে একটা ভ্যারিয়েবলের ভিতরেও ঢুকিয়ে রাখতে পারবেন এবং পরবর্তিতে আপনি যেখানে ইচ্ছা এই ভ্যারিয়েবলকে কল করে জেএসএক্সটাকে কাজে লাগাতে পারবেনঃ

একটা জেএসএক্স ভিতরে আরো অনেকগুলো জেএসএক্স চাইল্ড ইলিমেন্টও থাকতে পারবেঃ

এটা ঠিক এইচটিএমএল এর মতোই। শেষের ট্যাগ এ আপনার ক্লোজিং ব্র‍্যাকেট দিতে হবে।

সেইমভাবে আপনি মাত্র একটা জেএসএক্স ইলিমেন্টকেই ভ্যারিয়েবল এ স্টোর করতে পারবেন। এখন সেই ইলিমেন্ট এর ভিতরে যত ইচ্ছা চাইল্ড থাকতে পারবে। কিন্তু পুরোটা একটা ইলিমেন্টই হবেঃ

সঠিকঃ

ভুলঃ

সেইমভাবে কোনো জেএসএক্স ইলিমেন্ট রিটার্ণ করতে চাইলে মাত্র একটা প্যারেন্ট ইলিমেন্টই রিটার্ণ করতে পারবেন। চাইল্ড যতোই থাকুক সমস্যা নাইঃ

জেএসএক্স এইচটিএমএল এর মতো দেখা গেলেও এখানে আরো কিছু ট্রিক্স আছে। যদি আপনার জেএসএক্স এর কোনো চাইল্ড ইলিমেন্ট বা ভিতরে কিছু না থাকে তাহলে সেল্ফ ক্লোজিং ট্যাগ ইউজ করতে হবে। এটা এবার যে ট্যাগই হউক, h1, h6 বা p সব ট্যাগেই সেল্ফ ক্লোজিং ট্যাগ ইউজ করা যাবেঃ

আমরা ব্যাবেলে জেএসএক্স দেখার পর এমনকিছু দেখেছিলামঃ

এখানে React.createElement পিছনে একটা অবজেক্ট তৈরি করে ঠিক এভাবেঃ

এখান থেকেই পরিষ্কারভাবে দেখা যাচ্ছে এটাও একটা অব্জেক্ট।

আশা করি জেএসএক্স নিয়ে কাজ করার জন্যে এখন আপনি প্রস্তুত। এখানে কিছু না বুঝলেও পরে আবার রিভিও করবেন এখানে এসে তাহলে ধরতে পারবেন কোনটা কি আর কেনোই বা এমনভাবে ইউজ করা হয়েছে।

Courtesy: https://with.zonayed.me

About the Author

Leave a Reply