React is a Javascript Library for building user interfaces. এখন দুটি জিনিস গুরুত্বপূর্ণ, একটি হলো Javascript Library, আরেকটি হলো user interfaces। Library হলো কিছু collection of code, যেটা reused করে আমরা আমাদের application বানাতে পারি। React ও কিছু collection of code যেটা use করে আমরা আমাদের web application থেকে শুরু করে mobile, desktop application আর user interface বানাতে পারি।

যখনই আমরা একটি অ্যাপ্লিকেশন নিয়ে কথা বলি, তখন মূলত এর দুটি অংশ থাকে। একটি হলো ফ্রন্টএন্ড (মানে ইউজার ইন্টারফেস), আরেকটি হলো ব্যাকএন্ড, যেখানে সমস্ত লজিক থাকে।
ফ্রন্টএন্ড হলো সেই অংশ যেখানে ইউজার ইন্টারঅ্যাকশন করে, যেমন ব্রাউজ করে, বাটন ক্লিক করে, ফর্ম সাবমিট করে ইত্যাদি। তখন আমাদের ফ্রন্টএন্ড সেটাকে রেসপন্স করে ব্যাকএন্ড-এর সাহায্যে।
আর ব্যাকএন্ড-এ থাকে প্রচুর জটিল লজিক এবং ডাটা, যেমন অথেনটিকেশন, অথরাইজেশন, ডাটা ম্যানিপুলেশন ইত্যাদি।
কিন্তু React ব্যাকএন্ড নিয়ে একদমই concern না । React শুধুমাত্র ইউজার ইন্টারফেস নিয়েই কাজ করে।

এখন যদি ওয়েব নিয়ে কথা বলি, আমরা জানি Javascript হলো ব্রাউজারের ডিফল্ট প্রোগ্রামিং ল্যাঙ্গুয়েজ। কিন্তু React কোনো প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, এটা শুধু একটি Javascript Library।
তার মানে, আমরা React-এ যা কিছুই করি না কেন, শেষ পর্যন্ত সেটা pure vanilla Javascript ছাড়া আর কিছুই না।

আচ্ছা, এবার একটা প্রশ্ন করি। React তো ভাইয়া ২০১৩ সালে এসেছে, তাহলে কি আমরা এর আগে user interface বানাতাম না?
হ্যাঁ, আমরা এর আগেও বানাতাম pure Javascript আর jQuery দিয়ে।
এখন প্রশ্ন হলো, তাহলে আবার React এলো কেন? Javascript দিয়ে কী সমস্যা হতো?
আসলে React কোন সমস্যার সমাধান করতে এসেছে তা বুঝতে হলে আমাদের একটু গভীরে ঢুকতে হবে। চলুন, একটা deep dive দেই...!

আমরা একটা ছোট অ্যাপ্লিকেশন দিয়ে দেখব। আমরা একটা ছোট counter application বানিয়ে ফেলব, নিচে দেখছেন, সিম্পল একটা HTML কোড যেখানে counterNumber ও button নামে দুটি id দেওয়া হয়েছে।

আপনি এখন JavaScript কোডের ছবিটি একটু খেয়াল করুন, সেখানে একটি সহজ কোড রয়েছে। এই কোডটি আপনাকে বুঝানো আমার উদ্দেশ্য নয়। আমি যা বুঝাতে চাচ্ছি, সেটা একটু খেয়াল করুন।

counterNumber এবং button কে DOM Elements করে সিলেক্ট করা হয়েছে, তারপর addEventListener দিয়ে কাউন্টের মান ১ করে ইনক্রিমেন্ট করা হয়েছে। তারপরে counterNumberEl কে ধরে সেখানে তার মান আপডেট করা হয়েছে। এখানে আসলে কী হচ্ছে? ভালো করে খেয়াল করলে বুঝতে পারবেন যে, এখানে মূলত দুটি কাজ হচ্ছে:

১. Elements গুলোকে ধরে তাদের সাথে কাজ করা, যা আমরা করতে চাই।
২. UI (User Interface) কে ধরে সেটি আপডেট করা।

তাহলে, এখানে সমস্যা কী? কোড তো কাজ করছে! তবে, ধরুন আপনার দুইটা counter application লাগবে। তখন কী করবেন?

আপনাকে আবার সেই HTML-এ গিয়ে নতুন একটি div নিতে হবে, নতুন id গুলো দিয়ে আলাদাভাবে ধরতে হবে। এরপর পরবর্তীতে UI আপডেট করতে হবে।

এখন, আমি শুধু দুইটা counter application এর কথা বলছি, কিন্তু যখন অনেক বেশি ইন্টারঅ্যাকশন ও কমপ্লেক্স উআই থাকবে তখন তো ডেভেলপারদের ফেটে যাবে। এইটাই হচ্ছে মূল সমস্যা! আপনি একদিকে functionality তৈরি করছেন, আর অন্যদিকে UI আপডেট করতে হচ্ছে, যেটা অনেক painful হয়ে যায়।

এই বিশাল সমস্যাটি ফেইসবুকের মতো একটা কোম্পানি যখন ফেস করলো, তখন ফেইসবুকের একজন সফটওয়্যার ইঞ্জিনিয়ার Jordan Walke 2011 সালে PHP এর একটা Component Based Framework XHP-js থেকে ইন্সপায়ার হয়ে React.js তৈরি করেন। 2011 সালে এটা প্রথম ফেসবুকের নিউজফিডে ইম্পিলিমেন্ট করা হয় এবং ২০১২ সালে এটা ইন্সটাগ্রামে ব্যবহার করা হয়। ২০১৩ সালে React.js কে ওপেন সোর্স করে দেয়.

আমরা তো এখন জানি কেন আমরা রিঅ্যাক্ট ব্যবহার করি। তো চলুন, এখন আমরা যে কাউন্টার অ্যাপ্লিকেশনটা ভ্যানিলা জেএস দিয়ে করেছিলাম, সেটা এখন রিঅ্যাক্ট ব্যবহার করে করি। তাহলে আপনাদের কনফিডেন্স আরো বেড়ে যাবে যে রিঅ্যাক্ট আসার পর ডেভেলপারদের জীবন কতটা সহজ হয়ে গেছে। চলুন কোডে যাওয়া যাক…

প্রথমেই বলে নেই, এখন আমি যেভাবে রিঅ্যাক্ট ইনস্টল করে উদাহরণটা দেখাবো, সেটা আপনাদের সুবিধার জন্য, কিন্তু রিঅ্যাক্ট আমরা প্রজেক্টে এভাবে কেউ ব্যবহার করে না। আমি শুধু বুঝানোর সুবিধার জন্য একদম কোর লেভেল থেকে যাতে আপনারা বুঝতে পারেন, তার জন্যই এমনভাবে দেখানো।

এখানে আমি শুধু react.org সাইট থেকে তারা যেভাবে বলছে সেভাবে এই লিঙ্ক দিয়ে রিঅ্যাক্ট কনেক্ট করেছি। এখন যদি আমি react.js ফাইলে গিয়ে console.log(React) এবং console.log(ReactDOM) লিখি, তাহলে কনসোলে দেখতে পাবো ২টা অবজেক্ট চলে এসেছে, তার মানে আমাদের রিঅ্যাক্ট কানেক্ট হয়ে গেছে। খেয়াল করুন, এখানে body ট্যাগের মধ্যে একটি এম্পটি div ছাড়া আর কিছুই নেই, শুধু একটি id রয়েছে যার নাম root।

JavaScript এ DOM দিয়ে আমরা যেভাবে প্রথমে সিলেক্টর দিয়ে ধরে কাজ করেছিলাম, আমরা চাইলে DOM এ এলিমেন্টও ক্রিয়েট করতে পারি। ঠিক একইভাবে আমরা রিঅ্যাক্টে ও সেইভাবে এলিমেন্ট ক্রিয়েট করতে পারি। এখানে একটা div ক্রিয়েট করা হয়েছে, তার মধ্যে p ট্যাগ নিয়ে Hello World প্রিন্ট করা হয়েছে। এটা আপাতত কোন সমস্যা না দেখালেও, যখন আপনি অনেকগুলো এলিমেন্ট ক্রিয়েট করবেন, তখন তো জীবন শেষ! সেই একই কাজ বার বার তো এটা একটা সমস্যা। এজন্য রিঅ্যাক্ট তার নিজস্ব একটা মার্কআপ বানিয়েছে, যার নাম JSX (JavaScript XML)। এটা HTML এর মতো দেখালেও, এটা আসলে JSX।

এই যে উপরের চিত্রে দেখতে পাচ্ছেন কীভাবে লেখা হয়েছে। কিন্তু কথা হলো, ব্রাউজার তো ভাই এই JSX বুঝবে না। তাই এই সমস্যাটা সমাধান করতে আমাদের ট্রান্সপাইলার Babel এসেছে, যা আমাদের এই JSX কে ট্রান্সপাইল করে ভ্যানিলা জেএস করে দেবে, যা ব্রাউজার বুঝবে।

Babel কনেক্ট করার জন্য আমাদের তার ওয়েবসাইট > সেটআপ > এই লিঙ্কটি কপি করে আমার HTML এর body ট্যাগের নিচে বসিয়ে দিলাম এবং আমাদের যে জেএস ফাইল আছে সেখানে type=”text/babel” করে দিলাম।

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

এখানে খেয়াল করুন, myElement tare আমি শুধু Increment নামক একটা ফাংশনের মধ্যে নিয়ে এসেছি এবং Increment ফাংশনকে এভাবে করে দিয়ে React-এ আরো সহজ করে লেখা যায়। এখন আমরা এখানে জেএসও লিখতে পারবো, আমরা যদি আগের জেএস কোডটি দিয়ে এখানে কাজ করতাম, তাহলে কাজ করতো। কিন্তু React বলছে যে, তুমি যদি আমার উপায়ে স্টেট ম্যানেজমেন্ট করতে চাও, তাহলে তোমাকে UI আপডেট নিয়ে ভাবতে হবে না। তাই React-এ useState নামে তারা একটা ফাংশন দেয়, সেটা ব্যবহার করে কীভাবে করা যায় সেটাই দেখাচ্ছি।

এই useState আমাদের increment বাটনের স্টেটের কাজ করবে। useState এ ডিফল্ট একটা ভ্যালু দিয়ে দিতে হয়, যা আমাদের স্টেটে ডিফল্ট শো করবে, এই ক্ষেত্রে আমাদের দিতে হবে 0। useState এই ফাংশন মূলত আমাদের একটা অ্যারে রিটার্ন করে, যেখানে ২টা জিনিস থাকে — একটা হলো আমরা যে ভ্যালুটি দিচ্ছি, আরেকটা হলো একটা ফাংশন যা স্টেটের মান আপডেট করার কাজটি করে থাকে। এখন তাই আমরা অ্যারে ডেস্ট্রাকচার করে আলাদা করে নিয়ে নিয়েছি।

এখন আমরা চাইলে counter যেহেতু আমাদের ইনিশিয়াল ভ্যালু তাই, এখন রিটার্নের পর 0 এর জায়গায় চাইলে {counter} এভাবে দিতে পারি। এটাকে বলা হয় ইন্টারপোলেশন। এখন counter এর মান ডায়নামিকালি চেঞ্জ হয়ে যাবে। আর বাটনে onClick (এটা যেহেতু JSX, তাই এখানে ক্যামেলকেস ফলো করে লিখতে হবে যেমন onClick) একটি ফাংশনালিটি বলে দিতে হবে।

এভাবে যদি দেই, তাহলে হয়ে গেলো, কিন্তু এখানে একটা সমস্যা আছে। আমি যদি setCounter এই ফাংশনটা এভাবে কল করে দিই, তাহলে এটা আগেই থেকে কল হয়ে থাকবে, যা আমরা চাই না। আমরা চাই যে, যখন কেউ বাটনে ক্লিক করবে তখনই এর মান বাড়বে। সেজন্য আমাদের একটা অ্যানোনিমাস অ্যারো ফাংশন করে দিতে হবে, তাহলে সমস্যা সমাধান হয়ে যাবে।

এখন আপনি যদি খেয়াল করেন যে এখানে আমরা কিন্তু ডোমের কোনো এলিমেন্টকে ধরে ম্যানুয়ালি UI আপডেট করি নি, এখানে শুধু React-কে বলেছি আমরা কী চাই, বাকি React নিজেই UI আপডেট করে দিয়েছে।

এখন যখন আমরা JS-এর উদাহরণ দিয়েছিলাম, তখন JS-এ আমাদের মেজর যে সমস্যা ছিল, তা হলো — ম্যানুয়ালি UI আপডেট করতে হয়। আমরা যদি অ্যাপ্লিকেশনটি আরেকবার ব্যবহার করতে চাই, তাহলে আমাদের আবার একই কাজ বারবার করতে হতো।

কিন্তু React-এ এই দুটি সমস্যাই সমাধান করে দেওয়া হয়েছে। আমরা দেখলাম কীভাবে ম্যানুয়ালি UI আপডেট না করে React কীভাবে কাজ করে, এখন আমরা দেখব যে যদি এই অ্যাপ্লিকেশনটি আমাদের ২-৩ জায়গায় ব্যবহার করতে হয়, তখন React কীভাবে সাহায্য করে।

এখানে দেখেন, আমি শুধু > এর মধ্যে increment function টাকে 2 বার কল করে দিচ্ছি, কাজ শেষ। এখন সবচেয়ে ইন্টারেস্টিং ব্যাপার হলো আপনি ২টি অ্যাপ্লিকেশন আলাদা আলাদা ভাবে কাজ করতে পারবেন, মানে আলাদা আলাদা ভাবে state manage হবে। মানে আপনি বুঝতে পারছেন, আপনি চাইলে পুরো ওয়েবসাইটের যেকোনো জায়গায় ব্যবহার করতে পারবেন, তাও আবার ডিফারেন্ট ডিফারেন্ট জায়গা আলাদা আলাদা হবে, মানে একটা আরেকটার সঙ্গে সম্পর্কিত নয়। This is the power of Reactjs.

মূল কথা হলো React-এ আপনার functionality কী হবে সেটা আপনি বলবেন এবং React সেটা অনুসরণ করে নিজেই UI আপডেট করে নেবে। This is the beauty of ReactJS।

তাহলে আমরা এতক্ষণে React কী? কেন আমরা React ব্যবহার করি? কোন সমস্যা সমাধান করতে React এসেছে, সেটা এখন পুরোপুরি বুঝতে পারছি। ইন্টারভিউ বোর্ডে আর আপনাকে এমন প্রশ্ন করে আটকে রাখতে পারবে না। এতটুকু ধৈর্য ধরে সম্পূর্ণ পড়া সহজ কাজ না, ভাইয়া। আপনি এটা করে ফেলেছেন, আপনার জন্য শুভকামনা।

Happy Coding!