রিঅ্যাক্ট জেএস(React JS) নিয়ে কাজ করার সময় জেএসএক্স(JSX) সম্পর্কে জানতে হবে। জেএসএক্স(JSX) কি এবং কিভাবে কাজ করে এই সম্পর্কে বিস্তারিত আলোচনা করব এই পর্বে। ধরুন, আপনি একটি নতুন ডিভাইস পেলেন। এই ডিভাইস দিয়ে একই সাথে স্মার্টফোন, কম্পিউটার, ক্যামেরাসহ অনেক ফিচার রয়েছে। এমনটি আপনার স্মার্ট ডিভাইসটি নিয়ে ড্রোন ফুটেজ নেয়া যায়। অথাৎ ‘all in one’ টাইপের ডিভাইস এটি। নানা কাজ করা যায় এটি নিয়ে।
রিঅ্যাক্ট জেএস-এ জেএসএক্স(JSX) ঠিক তেমনি। জেএসএক্স (JSX) সিনট্যাক্স নিয়ে একই সাথে html কোন ও javascript কোড লেখা যায়। আর অনেক জটিল কোডকে সহজে লেখা যায় এটির মাধ্যমে।
এই কাজটি করা সম্ভব হয়েছে ব্যাবল (https://babeljs.io/) compiler এর জন্য। জেএস মডিউইলের মধ্যে এই compilerটি দেয়া থাকবে। তাই প্রোগ্রামারা html, javascript কোড লিখতে সেটাকে compiler করার কাজটি করে ব্যাবল compiler। এই compiler মূলত html এর কোডগুলোকে javascript কোডে কনভাট করে নেয়।
JSX একই সময়ে শুধু মাত্র একটি এলিমেন্টকে রেন্ডার করতে পারে। তাই jsx এর একাধিক html এলিমেন্ট নিলে রেন্ডার করতে পারে না। তবে ভয়ের কারণ নেই, যদি সবগুলো এলিমেন্টকে <div> এর মধ্যে রাখা হয় তাহলে jsx এটিতে একটি এলিমেন্ট হিসেবে ধরে এবং এর চাইল্ডে থাকা যাবতীয় এলিমেন্ট রেন্ডার করে। Jsx এর javascript ব্যবহার করতে হলে {} দিয়ে লিখতে হয়। class কে লিখতে হয় className।