রিয়্যাক্টের পরিচিতি ?
ফেসবুকের সফটওয়্যার ইঞ্জিনিয়ার Jordan Walke 2011 সালে PHP এর একটা Component Based Framework XHP-js থেকে ইন্সপায়ার হয়ে React.js তৈরি করেন। 2011 সালে এটা প্রথম ফেসবুকের নিউজফিডে ইম্পিলিমেন্ট করা হয় এবং ২০১২ সালে এটা ইন্সটাগ্রামে ব্যবহার করা হয়। ২০১৩ সালে React.js কে ওপেন সোর্স করে দেয় ফেসবুক কোম্পানি। রিয়্যাক্ট এর ওপেন সোর্স গিটহাব রিপো: https://github.com/facebook/react.git।
React.js এ ভ্যানিলা জাভাস্ক্রিপ্ট ছাড়া আর কিছু নেই। রিয়্যাক্ট JS তৈরি করা হয়েছিল যাতে ম্যানুয়ালি UI বার বার আপডেট করতে না হয়। Data/State আপডেট হলেই যেনো UI Auto আপডেট হয়ে যায়।
রিয়্যাক্ট এবং রিয়্যাক্ট ডম কী?
User Interface বানাতে মূলত দুটি কাজ করা লাগে:
- DOM তৈরি করা / রেন্ডার করা
- User Interaction Handle করা — অর্থাৎ ইউজার কোনো কিছু করলে সেটাকে ধরতে হবে এবং সেই অনুযায়ী Respond করতে হবে।
ব্রাউজার HTML কে রিড করে DOM (Document Object Model) তৈরি করে। আর DOM কেই মেনুপুলেট করে জাভাস্ক্রিপ্ট ইন্টারঅ্যাকশন করে।
React এবং ReactDOM প্যাকেজ দুটি এই কাজগুলোই করে থাকে:
- React Package → User Interface তৈরি করতে সাহায্য করে।
- React DOM → যা তৈরি হয়েছে সেটিকে ব্রাউজারে প্রিন্ট বা রেন্ডার করে।
React রেন্ডার করার সময় সরাসরি DOM ব্যবহার করে না। এটি দুই ধাপে কাজ করে:
- Virtual DOM ব্যবহার করে (যেখানে প্রাথমিক কাজ করে)
- সব কিছু ঠিক থাকলে মূল DOM এ আপডেট করে।
React JSX (JavaScript XML) ব্যবহার করে। প্রথমে একটি React Element তৈরি করতে হয়, তারপরে Root তৈরি করে সেটাকে রেন্ডার করানো হয়।
- ফাংশনের মধ্যে React Element লিখলে তাকে বলে React Component.
- React Function থেকে একটিমাত্র React Element রিটার্ন করা যায়। একাধিক রিটার্ন করতে হলে Fragment ব্যবহার করতে হয়।
- রিয়্যাক্টে ডেটা পরিবর্তনের জন্য
React.useState()Hook ব্যবহার করা হয়। - useState Hook একটি Tuple রিটার্ন করে — প্রথমটি state_name এবং দ্বিতীয়টি set_state ফাংশন। যেমনঃ
const [state, setState] = React.useState() 
রিয়্যাক্ট ডম কিভাবে কাজ করে ?
আগে আমাদের বুঝতে হবে DOM কেন Slow?
- যখন HTML আসে, তখন ব্রাউজার সেটাকে Parse করে DOM Tree তৈরি করে।
- CSS ফাইল Parse হয়ে CSSOM (CSS Object Model) তৈরি করে।
- DOM ও CSSOM মিলে Render Tree তৈরি করে, যেটি ব্রাউজারে কীভাবে রেন্ডার হবে তা নির্ধারণ করে।
- এরপর Layout Phase এর মাধ্যমে প্রতিটি এলিমেন্টের X ও Y Coordinate নির্ধারণ করা হয়।
- সবশেষে Painting Phase এর মাধ্যমে UI তে দেখা যায়।
যখনই DOM মেনুপুলেট করা হয়, পুরো Render Process আবার শুরু হয় — এজন্য DOM ধীরগতির মনে হয়।
অর্থাৎ DOM operation নিজে slow নয়, বরং Painting Process-টাই ধীর।
Fast করার জন্য আমরা কী করতে পারি (Virtual DOM ছাড়া):
- Batch Update: অনেকগুলো পরিবর্তন একসাথে করে একটি মাত্র DOM Operation করা।
- Less DOM Operation: যত কম সম্ভব DOM আপডেট করা।
Virtual DOM
Virtual DOM কাজ করে দুটি ধাপে:
- আগের DOM এর অবস্থা
- পরিবর্তনের পরের অবস্থা
Virtual DOM দুইটির মধ্যে পার্থক্য (diff) বের করে শুধু পরিবর্তিত অংশটুকু মূল DOM-এ সার্জিক্যালি আপডেট করে।
এই Diff বের করার জন্য React ব্যবহার করে Diffing Algorithm, যাকে আরও বলা হয় Reconciliation Algorithm।
Is Virtual DOM Slow?
- Common sense অনুযায়ী Virtual DOM Slow মনে হতে পারে — কারণ এটি DOM + Virtual DOM উভয়কেই হ্যান্ডেল করে।
- কিন্তু বাস্তবে DOM repainting অনেক বেশি সময় নেয়। Virtual DOM সেই সমস্যার সমাধান করে।
- React শুধুমাত্র পরিবর্তিত অংশটুকু আপডেট করে — ফলে এটি Fast Enough।
React প্রথম লোডের সময় কিছুটা সময় নেয় (কারণ এটি একটি বড় লাইব্রেরি), কিন্তু একবার লোড হয়ে গেলে পরবর্তীতে UI আপডেটগুলি দ্রুত হয় — Diffing Algorithm এর জন্য।
আজকের মতো এখানেই শেষ করছি রিয়্যাক্ট নিয়ে আপনাদের কোনো প্রশ্ন থাকলে কমেন্টে জানাবেন । মাই চেষ্টা করব উত্তর দেয়ার ।
আপনি যদি HTML, CSS, javascript (JS) জেনে থাকেন । এখন নিজেকে আপগ্রেড করে ওয়েব ডেভেলপমেন্ট ইন্ডাস্ট্রিতে নিজের কারিয়ার করতে চান তাহলে আপনার জন্য এখন সবথেকে ভাল অপশন React ও Nextjs ।
Learn with sumit নিয়ে এসেছে Reactive Accelerator Batch-4 (সর্বশেষ ব্যাচ ) । এটি হতে পারে আপনার ওয়েব ডেভেলপমেন্ট কারিয়ারের পরবর্তী সেরা পদক্ষেপ । এই কোর্সে আপনি React , Nextjs গভীরে গিয়ে শিখতে পারবেন। এর পাশাপাশি অ্যারো শিখতে পারবেন , framer-motion , React Query ,Axios, Postman , GraphQl , Typescript , Vercel Ai Sdk , Firebase , Next-auth (Authjs ), Prisma , Debuging andT esting , Socket.io, React-Redux ।
নতুন করে যুক্ত হতে যাওয়া Vercel Ai Sdk বর্তমান AI এর যুগে আপনাকে আপডেটে রাখবে নতুন টেকনোলজি ট্রেন্ডের সাথে । কোর্সের সম্পর্কে অ্যারো বিস্তারিত জানতে এখানে ক্লিক করুন । ডেডলাইন ২৯ অক্টবোর ২০২৫ 11:59 PM
