রিঅ্যাক্টঃ কি, কেন এবং কিভাবে?

আমি খুব গভীরে গিয়ে টেকনিক্যাল কোনো ব্যাপার নিয়ে কথা বলবো না, বরং একদম সাধারণ ভাষায় বলবো আসলে রিঅ্যাক্ট কেনো স্পেশাল। টেকনিক্যাল ব্যাপারগুলো নিয়ে অন্য কোন সিরিজে বিস্তারিত বলবো, তবে আজকে সাধারণ নলেজ পর্যন্তই থাকুক।

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

এখন তো গেলো সাধারন কারনগুলো। এবার আসি আরেকটু গভীরে যাই। আমরা সাধারণত ওয়েবসাইটে এইচটিএমএল, সিএসএস সহ জাভাস্ক্রিপ্ট ইউজ করি। এখন ব্রাউজার বিহ্যাইন্ড দ্যা সীনে একটা ডম ট্রি তৈরী করে যাতে ইউজার সেই ডমের সাথে ইন্টার‍্যাক্ট করতে পারে। ব্রাউজারের এই প্রসেসটাকে ক্রিটিক্যাল রেন্ডার পাথ[] বলে।

এখানে প্রসেসগুলো দেখুন। এভাবে একেকটা ধাপ পেরিয়ে একটা ডম(DOM) তৈরী করা হয়। তারপরে আমাদের সামনে একটা ওয়েবপেজ প্রদর্শিত হয়। কিন্তু আমরা জানি জাভাস্ক্রিপ্ট ডম ম্যানিপুলেট করতে পারে। তো জাভাস্ক্রিপ্ট দিয়ে রেন্ডার কমপ্লিট হওয়া কোন পেজের ডম ম্যানিপুলেট করলে সেই ওয়েবপেজ আবার পুরোপুরি রেন্ডার হয়(দুই একটা লেটেস্ট ব্রাউজার ছাড়া বাকী বেশীরভাগ ব্রাউজারই পুরোপুরি নতুন করে আবার ডম ট্রি তৈরী করে রেন্ডার করে) যেটা সময় সাপেক্ষ। আর তাই একটা পেজে ডম ম্যানিপুলেট করার মতো ততো বেশী জাভাস্ক্রিপ্ট থাকলে সেই ওয়েবপেজ স্লো হয়ে যাবে। তো এখানেই রিঅ্যাক্ট এর আসল খেলা।

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

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

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

এখন এইটাকে যদি ইন্সপেক্ট করে দেখেনঃ

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

তাছাড়া রিঅ্যাক্ট কম্পোনেন্ট বেইজড অ্যাপ্লিকেশন তৈরী করতে পারে। এখানে আপনি প্রত্যেকটা কাজের জন্যে একটা একটা করে পৃথক পৃথক কম্পোনেন্ট তৈরী করতে পারবেন। সব কম্পোনেন্ট এর নিজস্ব ডাটা ধারনের সিস্টেম আছে। ডাটা চেঞ্জ করার সিস্টেম আছে। আবার একটা কম্পোনেন্ট আরেকটা কম্পোনেন্ট এর সাথে একসাথে করে এক কম্পোনেন্ট এর ডাটা আরেক কম্পোনেন্ট এর সাথে শেয়ার করে কমপ্লেক্স অ্যাপ তৈরী করা যায়।

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

১। রিঅ্যাক্টঃ কি, কেন এবং কিভাবে? [এই পর্ব]

২। রিঅ্যাক্ট ব্যাসিকসঃ প্রোজেক্ট শুরু করা

৩। রিঅ্যাক্ট ব্যাসিকসঃ জেএসএক্স(JSX) পরিচিতি

৪। রিঅ্যাক্ট ব্যাসিকসঃ ইলিমেন্ট রেন্ডার

৫। রিঅ্যাক্ট ব্যাসিকসঃ কম্পোনেন্ট (Component)

৬। রিঅ্যাক্ট ব্যাসিকসঃ স্ট্যাট (State)

৭। রিঅ্যাক্ট ব্যাসিকসঃ প্রপস (Props)

৮। রিঅ্যাক্ট ব্যাসিকসঃ লাইফসাইকেল (Lifecycle)

৯। রিঅ্যাক্ট ব্যাসিকসঃ ইভেন্ট

১০। রিঅ্যাক্ট ব্যাসিকসঃ কন্ডিশনাল রেন্ডারিং

১১। রিঅ্যাক্ট ব্যাসিকসঃ লিস্ট আইটেম

১২। রিঅ্যাক্ট ব্যাসিকসঃ ফর্ম/ইনপুট হ্যান্ডেল

আর আমার পূর্বে জাভাস্ক্রিপ্ট নিয়ে লেখা এখানে[https://js.zonayed.me] আছে। আপনার অবশ্যই জাভাস্ক্রিপ্ট নিয়ে মোটামোটি লেভেলের ধারনা থাকতে হবে। তাছাড়া রিঅ্যাক্ট এ ইএস৬ এর সিন্ট্যাক্স ইউজ করা হয়। আর তাই আশা করি আপনি ইএস৬ এর সিন্ট্যাক্স এর সাথেও অভ্যস্ত। আর যদি এগুলো রিভিও করার প্রয়োজন মনে করেন তাহলে এখান থেকে সহজেই করতে পারবেন। সেইমভাবে রিঅ্যাক্ট এর উপরে সবগুলো লেখাও এইখানে[https://react.zonayed.me] সাজানোভাবে পাবেন। ভালো থাকবেন, আশা করি এবার রিঅ্যাক্ট শিখা আর মিস হবে না ☺