রিয়্যাক্ট (জাভাস্ক্রিপ্ট লাইব্রেরি)

React

মূল উদ্ভাবক	Jordan Walke
উন্নয়নকারী	Meta and community
প্রাথমিক সংস্করণ	২৯ মে ২০১৩; ১১ বছর আগে (2013-05-29)[১]
স্থিতিশীল সংস্করণ	18.3.1[২]  / ২৬ এপ্রিল ২০২৪; ৬ মাস আগে (26 April 2024)
রিপজিটরি	github.com/facebook/react
যে ভাষায় লিখিত	JavaScript
প্ল্যাটফর্ম	Web platform
ধরন	JavaScript library
লাইসেন্স	MIT License
ওয়েবসাইট	ar.reactjs.org

রিয়্যাক্ট (React) হল একটি ওপেন সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি যা Facebook দ্বারা তৈরি এবং রক্ষণাবেক্ষণ করা হয়েছে। এটি প্রাথমিকভাবে ওয়েব অ্যাপ্লিকেশনগুলিতে ব্যবহারকারী ইন্টারফেস তৈরির জন্য ব্যবহৃত হয়। রিয়্যাক্ট (React) এর মূল ধারণাগুলির মধ্যে রয়েছে একটি উপাদান-ভিত্তিক আর্কিটেকচার, দক্ষ রেন্ডারিংয়ের জন্য একটি ভার্চুয়াল DOM এবং UI তৈরির জন্য একটি ঘোষণামূলক পদ্ধতি। রিয়্যাক্ট (React) উদ্ভাবকরা পুনরায় ব্যবহারযোগ্য UI উপাদান তৈরি করে যা ব্যবহারকারীর ইন্টারফেসের নির্দিষ্ট অংশগুলিকে এনক্যাপসুলেট করে। এই উপাদানগুলি জটিল অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হতে পারে। রিয়্যাক্ট (React) এর ভার্চুয়াল DOM দক্ষতার সাথে প্রকৃত DOM আপডেট করে, সরাসরি ম্যানিপুলেশনের প্রয়োজনীয়তা হ্রাস করে এবং কর্মক্ষমতা বাড়ায়। রিয়্যাক্ট (React) এর অন্যতম শক্তি হল এর একমুখী ডেটা প্রবাহ, যা ডেটা পরিচালনা এবং ডিবাগিংকে সহজ করে। অতিরিক্তভাবে, রিঅ্যাক্ট নেটিভ, রিঅ্যাক্টের একটি এক্সটেনশন, জাভাস্ক্রিপ্ট ব্যবহার করে iOS এবং অ্যান্ড্রয়েড উভয়ের জন্য নেটিভ মোবাইল অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। স্টেট ম্যানাজমেন্ট, রাউটিং এবং UI উপাদানগুলির জন্য লাইব্রেরি এবং সরঞ্জাম সহ রিঅ্যাক্ট (React) এর একটি বিস্তৃত ইকোসিস্টেম রয়েছে, যা এটিকে বেশিরভাগ ওয়েব অ্যাপ্লিকেশনের জন্য সবার প্রথম পছন্দ করে তুলেছে। এর সরলতা, পুনঃব্যবহারযোগ্যতা, এবং সক্রিয় কমিউনিটি এর ব্যাপক গ্রহণে অবদান রেখেছে, ছোট ব্যক্তিগত প্রজেক্ট থেকে শুরু করে বিশ্বব্যাপী কোম্পানিগুলি দ্বারা ব্যবহৃত বৃহৎ আকারের অ্যাপ্লিকেশন, সবখানেই রিয়্যাক্ট হয়ে উঠেছে সবার প্রথম পছন্দ।

ভার্চুয়াল DOM আরেকটি উল্লেখযোগ্য বৈশিষ্ট্য হল ভার্চুয়াল ডকুমেন্ট অবজেক্ট মডেল বা ভার্চুয়াল DOM ব্যবহার করা। প্রতিক্রিয়া একটি ইন-মেমরি ডেটা-স্ট্রাকচার ক্যাশে তৈরি করে, ফলাফলের পার্থক্যগুলি গণনা করে এবং তারপর ব্রাউজারের প্রদর্শিত DOM দক্ষতার সাথে আপডেট করে। এই প্রক্রিয়াটিকে পুনর্মিলন বলা হয়। এটি প্রোগ্রামারকে এমনভাবে কোড লিখতে দেয় যেন প্রতিটি পরিবর্তনে পুরো পৃষ্ঠাটি রেন্ডার করা হয়, যখন রিঅ্যাক্ট লাইব্রেরিগুলি কেবলমাত্র এমন সাবকম্পোনেন্ট রেন্ডার করে যা আসলে পরিবর্তিত হয়। এই নির্বাচনী রেন্ডারিং একটি প্রধান কর্মক্ষমতা বুস্ট প্রদান করে। এটি সিএসএস শৈলী, পৃষ্ঠার বিন্যাস এবং সমগ্র পৃষ্ঠার জন্য রেন্ডারিং পুনঃগণনা করার প্রচেষ্টাকে বাঁচায়।[11]

জীবনচক্র পদ্ধতি ক্লাস-ভিত্তিক উপাদানগুলির জন্য জীবনচক্র পদ্ধতিগুলি হুকিংয়ের একটি ফর্ম ব্যবহার করে যা একটি উপাদানের জীবদ্দশায় সেট পয়েন্টগুলিতে কোড কার্যকর করার অনুমতি দেয়।

shouldComponentUpdate ডেভেলপারকে কোনো রেন্ডারের প্রয়োজন না হলে মিথ্যা ফেরত দিয়ে কোনো কম্পোনেন্টের অপ্রয়োজনীয় রি-রেন্ডারিং প্রতিরোধ করতে দেয়। componentDidMount বলা হয় একবার কম্পোনেন্ট "মাউন্ট" হয়ে গেলে (কম্পোনেন্টটি ইউজার ইন্টারফেসে তৈরি করা হয়েছে, প্রায়শই এটিকে একটি DOM নোডের সাথে যুক্ত করে)। এটি সাধারণত একটি API এর মাধ্যমে দূরবর্তী উত্স থেকে ডেটা লোডিং ট্রিগার করতে ব্যবহৃত হয়। componentWillUnmount কে অবিলম্বে কম্পোনেন্ট ছিঁড়ে ফেলা বা "আনমাউন্ট করা" বলা হয়। এটি সাধারণত কম্পোনেন্টের উপর রিসোর্স-ডিমান্ডিং নির্ভরতা সাফ করতে ব্যবহৃত হয় যা কম্পোনেন্টের আনমাউন্ট করার মাধ্যমে সরানো হবে না (যেমন, কম্পোনেন্টের সাথে সম্পর্কিত যেকোন সেটইন্টারভাল() ইনস্ট্যান্স অপসারণ করা, অথবা একটি "ইভেন্টলিসনার" সেট করা " নথি" উপাদান উপস্থিতির কারণে) রেন্ডার হল সবচেয়ে গুরুত্বপূর্ণ লাইফ সাইকেল পদ্ধতি এবং যেকোন উপাদানে একমাত্র প্রয়োজনীয়। এটি সাধারণত প্রতিবার কম্পোনেন্টের অবস্থা আপডেট করার সময় বলা হয়, যা ব্যবহারকারীর ইন্টারফেসে প্রতিফলিত হওয়া উচিত।

জেএসএক্স মূল নিবন্ধ: JSX

JSX, বা জাভাস্ক্রিপ্ট সিনট্যাক্স এক্সটেনশন হল জাভাস্ক্রিপ্ট ভাষার সিনট্যাক্সের একটি এক্সটেনশন। জাভাস্ক্রিপ্ট এর মাধ্যমে রিয়্যাক্ট এলিমেন্ট তৈরি করা ও রেন্ডার করা ডেভেলপারদের কাছে বেশ শ্রমসাধ্য মনে হওয়ায় JSX এর উদ্ভব যা দেখতে HTML সাদৃশ্য। HTML এবং JSX দেখতে অনেকটা একই রকম হলেও এদের মধ্যে বেশ কিছু পার্থক্য রয়েছে যেমন HTML এর class কে JSX এ className লেখা হয়। প্রতিক্রিয়া উপাদানগুলি সাধারণত JSX ব্যবহার করে লেখা হয়, যদিও সেগুলি হতে হবে না (উপাদানগুলি বিশুদ্ধ জাভাস্ক্রিপ্টেও লেখা হতে পারে)। JSX হল XHP নামক PHP-এর জন্য Facebook দ্বারা তৈরি আরেকটি এক্সটেনশন সিনট্যাক্সের অনুরূপ।

তথ্যসূত্র

1. Occhino, Tom; Walke, Jordan। "JS Apps at Facebook"। YouTube। সংগ্রহের তারিখ ২২ অক্টো ২০১৮। উদ্ধৃতি টেমপ্লেট ইংরেজি প্যারামিটার ব্যবহার করেছে (link)
2. https://registry.npmjs.com/react.