আজকে যে বিষয়টি নিয়ে আলোচনা করবো সেটা হচ্ছে React.js। যারা একেবারেই এই নামটির সাথে নতুন তারা ভাবছেন React.js আবার কি? আবার যারা React.js সম্পর্কে জানেন তারা ভাবছেন React শিখে কি হবে।
ওয়েব ডেভলপমেন্ট এর জন্য প্রোগ্রামিং ল্যাংগুয়েজ!
আপনি যদি এখনি Google এ সার্চ দেন যে ওয়েব এর জন্য বেস্ট প্রোগ্রামিং ল্যাঙ্গুয়েজ কোনটি, সেখানে আপনি অবশ্যই জাভাস্ক্রিপ্ট এর নাম খোঁজে পাবেন সবার উপরে। এখন কথা হচ্ছে একটা প্রোগ্রামিং ল্যাঙ্গুয়েজ কখন বেশি পপুলার হয়, যখন সেই প্রোগ্রামিং ল্যাঙ্গুয়েজ এর প্রচুর পরিমানের রিসোর্স, লাইব্রেরী এবং ফ্রেমওয়ার্ক থাকে তখন। অর্থাৎ জাভাস্ক্রিপ্ট এর ক্ষেত্রে প্রচুর পরিমানের রিসোর্স, লাইব্রেরী এবং ফ্রেমওয়ার্ক হিসেবে React.js, jQuery, Node.js, Next.js, Vue.js, Angular.js আছে তাই আমরা বলতেই পারি ওয়েব ডেভেলপমেন্ট এর জন্য জাভাস্ক্রিপ্ট একটি পপুলার ল্যাঙ্গুয়েজ।
React.js কি এবং এর পেছনের গল্প?
React.js হচ্ছে জাভাস্ক্রিপ্ট একটি লাইব্রেরী যেটা কিনা ওয়েবসাইটের ইউজার ইন্টারফেস তৈরি করতে বর্তমানে প্রচুর ব্যাবহার করা হচ্ছে। React.js এর জন্ম হয়েছিল ২০১১ সালে ফেসবুকের অফিসের কিছু দুর্দান্ত মেধাবী ইঞ্জিনিয়ারসদের মাধ্যমে, যখন তারা ফেসবুক এর ক্লাইড সাইড অ্যাপ্লিকেশন তৈরি করতে গিয়েছিলেন তখন দেখতে পেলেন DOM (Document Object Model) স্লো হয়ে যাচ্ছে কোনো একটা কারনে অর্থাৎ অ্যাপটির API (Application Programming Interface) এর মধ্যে HTML ফাইল অ্যাড করতে গিয়ে এই বিষয়টি তাদের নজরে আসে। এরপর তারা Logical Structure ভিত্তিকে আরো শক্তিশালী করে React.js কে তারা প্রস্তুত করেন, যা পরবর্তীতে ২০১৩ সালে ওপেন সোর্স হিসেবে রিলিজ দেয়া হয়। বয়সে শিশু হলেও বর্তমানে React.js হচ্ছে সবচেয়ে বেশি ব্যাবহৃত এবং চাকরির বাজার কাপানো Front-End UI Library।
React.js কেন এবং এর সুবিধা?
React JS হচ্ছে জাভাস্ক্রিপ্ট এর একটি ওপেন-সোর্স লাইব্রেরী। যেটা মূলত ব্যবহার করা হয় ইউজার ইন্টারফেস এবং স্পেশালি Single Page Application(SPA) বাননোর জন্য। ওয়েব এবং মোবাইল এর ভিউ লেয়ার Handling করাই React এর উদ্দেশ্য । React.js আমাদের UI Component গুলোকে রি-ইউজ করার সুবিধা দিয়ে থাকে। React ব্যবহার করার মেইন পারপাস হচ্ছে, এটি অনেক Simple, Fast এবং Scalable একটি লাইব্রেরী।
জাভাস্ক্রিপ্ট এর অনেক গুলো লাইব্রেরি আর ফ্রেমওয়ার্কের মধ্যে সবচেয়ে বেশি পপুলার হচ্ছে React.js। এখন আপনি যদি React এর গিটহাব যে রিপোজিটরি আছে সেটা দেখেন তাহলেই বুঝতে পারবেন React.js কতো টা এগিয়ে আছে অনান্য লাইব্রেরি এবং ফ্রেমওয়ার্ক থেকে। আপনি যদি React.js শিখেন তাহলে সব থেকে বেশি যে সুবিধা টি পাবেন তা হচ্ছে Cross-Platform এর মানে হচ্ছে, React লাইব্রেরী ব্যবহার করে আপনি ওয়েব ডেভেলপমেন্ট করতে পারনে, আবার চাইলে মোবাইল অ্যাপ ডেভেলপমেন্ট করতে পারেন যে কোন Platform এর জন্য। আপনি যদি React.js এই একটা টেকনোলজি শিখেন তাহলে উপরের দুটি সেক্টরে-ই আপনি যেতে পারবেন খুব সহজে। কিন্তু আপনি যদি ওয়েব ডেভেলপমেন্ট অথবা অ্যাপ ডেভেলপমেন্ট আলাদা আলাদা করে শেখা শুরু করেন তাহলে একজনের ক্ষেত্রে এই দুটি সেক্টরে ভালো Perform করা অনেক বেশি কঠিন হয়ে দাড়াবে।
React.js আসার আগে ডেভেলপাররা ইউজার ইন্টারফেস ডিজাইন করতে Vanilla JavaScript অথবা jQuery ব্যবহার করতেন, যা ছিলো দীর্ঘ সময়ের ব্যপার এবং প্রচুর Error ও Bug এ পরিপূর্ণ। React লাইব্রেরী তে কম কোড সহ, কম সময়ে দ্রুত ডেভেলপমেন্ট এবং কোডিংয়ে Error কমাতে সাহায্য করে এবং ইউজার ইন্টারফেস ডিজাইনে অসাধারন ও দ্রুতগতি সম্পন্ন হওয়ার কারণে এটি ডেভেলপারদের কাছে অত্যন্ত জনপ্রিয় হয়ে উঠেছে বর্তমান সময়ে।
React.js এর সুবিধা এবং একজন ডেভেলপার হিসেবে কেনো আপনি React JS ব্যবহার করবেন?
- React এ রয়েছে প্রচুর পরিমানের অনলাইন রিসোর্স, বিশাল বড় ডেভলপার কমিউনিটি, চমৎকার সব ডেভলপার টুলস, আর শুরু করাটাও একদন সহজ।
- React এর অন্যতম গুন হচ্ছে এর Simplicity, এটা Core-JavaScript এর পাশাপাশি JSX নামের একটা স্পেশাল Syntax ব্যাবহার করে যা আমাদেরকে জাভাস্ক্রিপ্ট এর ভিতর শতভাগ HTML লিখার সুবিধা দিয়ে থাকে।
- React দিয়ে যে শুধু Web Application বানানো যায় তা নয়, মজার ব্যাপার হল এটা দিয়ে চমৎকার সব Mobile Application বানানো যায় আর সেটাকে বলা হয় React Native।
- খুব সহজেই ডাইনামিক অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।
- একবার Component বানিয়ে একাদিকবার সেই Component গুলো রি-ইউজ করা হয় এইটা React.js এর একটি বড় বিউটি।
- React সর্বদাই একমুখী Data ফ্লো করে থাকে। এর মানে হচ্ছে, যখন একটি React App ডিজাইন করা হয়, তখন Parent ও Child কম্পোনেন্টের মধ্যে কানেকশন তৈরী করতে হয়।
React.js এর কয়েকটি টার্ম যা আমাদের জানা খুবই জরুরীঃ
- Components: Re-usable Components দিয়ে গঠিত হওয়ায় কারনে একটি React এপ্লিকেশন বানানোর সময় পুরো ওয়েব পেইজ নিয়ে একসাথে জটিল চিন্তা করার প্রয়োজন হয় না। আলাদা ভাবে ছোট ছোট Component বিল্ড করে সেগুলো প্রয়োজন মতো জুড়া লাগিয়ে পূর্ণাঙ্গ ওয়েবপেইজ বানিয়ে ফেলা যায়।
- JSX: জাভাস্ক্রিপ্ট এর একটি সিনট্যাক্স Extension হচ্ছে JSX। ওয়েবসাইটের UI সুন্দর করতে মূলত এটি React এ ব্যবহার করা হয় এবং React এর Element গুলোকে DOM এর মধ্যে Rendering করতে JSX অসাধারণ কাজ করে থাকে। এটি একটি JavaScript Extension যা ডেভেলপারদের HTML ও XML Syntax কন্ট্রোল ও লজিক কে একসাথে করে।
- Virtual Dom: আমরা সাধারনত ওয়েবসাইটে HTML, CSS সহ জাভাস্ক্রিপ্ট ইউজ করি। এখন ব্রাউজার বিহ্যাইন্ড দ্যা সীনে একটা Dom Tree তৈরি করে যাতে ইউজার সেই Dom এর সাথে ইন্টার্যাক্ট করতে পারে। অন্যদিকে React কি করে? React একটা সেইম টু সেইম এই ব্রাউজারের Dom এর মতো করে আরেকটা Dom তৈরী করে যেটাকে ভার্চুয়াল ডম বলা হয়। আর এই ডম দেখতে পুরো সেই আসল ডমের মতোই, কিন্তু এই ভার্চুয়াল ডমটা আসলে একটা জাভাস্ক্রিপ্ট অবজেক্ট। রিঅ্যাক্ট এটাকে এমনভাবে তৈরি করে যে এই ডমের সাথে সহজেই জাভাস্ক্রিপ্ট ইউজ করে যেকোনো ইলিমেন্ট মডিফাই করা যায় কম সময়ের মধ্যে এবং এফিসিয়েন্টলি। React যেহেতু ভার্চুয়াল DOM ব্যবহার করে তাই, অ্যাপ্লিকেশনের পারফর্মেন্স ও স্পীড তুলনামূলক অধিক হয়ে থাকে। এর একটি কারন হচ্ছে, সকল কম্পোনেন্টস মুহুর্তের মধ্যে আপলোড হয় এবং সাথে সাথেই এক্সিকিউট করতে পারে।
যারা ভাবেন React.js শিখলে আমার ফিউচার কোথায়?
তাদের জন্য বলছি, Already পৃথিবীর যে বড় বড় Tech Giants কম্পানি গুলো রয়েছে যেমনঃ Facebook, Twitter, Netflix, WhatsApp, Instagram, Uber, Tesla, DropBox এরা কিন্তু Already React.js ব্যবহার করছেন। আপনি যদি ভেবে দেখেন অবশ্য-ই Facebook, Netflix এবং Twitter এর ফিউচার ব্রাইট , তাহলে React.js শিখলে অবশ্য-ই আপনার যে ফিউচার সেটিও অনেক ব্রাইট হবে বলে আমি মনে করি।