React.js কি এবং কেন?

ReactJS কি -

React বা ReactJS একটি ওপেন-সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি যা ইউজার ইন্টারফেস (UI) অথবা কম্পোনেন্ট তৈরির জন্য ব্যাবহৃত হয়। ReactJS সাধারণত সঙ্গেল পেইজ এ্যাপ্লিকেশন ইউআই (UI) আপডেট করে থাকে, যেখানে ইউআই সচরাচর আপডেট হয়ে থাকে। এটি ফেসবুক দ্বারা মেন্টেইন করা হয়।

 

ReactJS এর ইতিহাস -

ReactJS ফেসবুক দ্বারা ডেভেলপ করা হয়েছে এবং ২০১১ সালে প্রথমবার ফেসবুকের নিউজফিডে এবং ২০১২ সালে ইনস্টাগ্রামে ডিপ্লয় হয়েছিল। পরিবর্তীতে ২০১৩ সালে JSConf US তে ওপেন-সোর্স লাইব্রেরি হিসেবে প্রকাশ করা হয়েছে।

ReactJS কেন ডেভেলপ করা হয়েছে -

ReactJS ডেভেলপ করা হয়েছে বড় এবং ডাইনামিক এ্যাপ্লিকেশনগুলির জন্য একটি আরও এফিশিয়েন্ট উপায়ে ইউজার ইন্টারফেস (UI) তৈরি করার জন্য। পাশাপাশি React দ্বারা তৈরি এ্যাপ্লিকেশনগুলি একটি স্কেলেবল এবং মেন্টেইনেবল উপায়ে কম্পোনেন্ট আপডেট এবং রেন্ডারিং এর চ্যালেঞ্জ সমাধান করতে তৈরি করা হয়েছে।

 

ReactJS কেন ব্যবহার করব -

ReactJS এর মূল উদ্দেশ্য হলো ইউজার ইন্টারফেস (UI) তৈরি করা, যার মাধ্যমে এ্যাপ্লিকেশনগুলির গতিকে উন্নত করা। আর এই গতিকে আরও ইফিশিয়েন্ট করার জন্য React ভার্চুয়াল DOM ব্যবহার করে, যা এ্যপ্লিকেশনের কর্মক্ষমতা উন্নত করে। ReactJS ক্লাইন্ট সাইড এবং সার্ভার সাইডে ব্যবহারের পাশাপাশি অন্যান্য ফ্রেমওয়ার্কের সাথে ব্যবহার করা যায়। React কম্পোনেন্ট বেইজড আর্কিটেকচার অনুসরণ করে, যার মাধ্যমে Encapsulated (আবদ্ধ) এবং Reusable (পুনরায়-ব্যাবহারযোগ্য) ইউজার ইন্টেরফেস (UI) তৈরি করতে দেয়। এর দ্বারা কোড ম্যানেজ এবং মেন্টেইন করা সহজ হয় এবং সেইসাথে কোড পুনরার ব্যবহার করা যায়।

 

ReactJS এর Key Features –

ReactJS এর বেশ কয়েকটি মূল বৈশিষ্ট্য রয়েছে, যা নিম্নে আলোকপাত করা হলো –

✔ ReactJS কম্পোনেন্ট বেইজড আর্কিটেকচার অনুসরণ করে, যার মাধ্যমে Encapsulated (আবদ্ধ) এবং Reusable (পুনরায়-ব্যাবহারযোগ্য) ইউজার ইন্টেরফেস (UI) তৈরি করতে দেয়। বড় এবং জটিল UI গঠনের জন্য ছোট ছোট অংশে ভাগ করে কম্পোনেন্ট তৈরি করা এবং প্রত্যাকটি কম্পোনেন্ট নিজশ্ব স্ট্যেট (State) পরিচালনা করতে পারে।

 

✔ এ্যাপ্লিকেশনের মধ্যে রেন্ডারিং প্রক্রিয়াটি অপ্টিমাইজ করতে ReactJS একটি ভার্চুয়াল ডম (Virtual DOM) ব্যাবহার করে থাকে। UI এর পরিবর্তনগুলো প্রথমে মেমরিতে DOM (Real DOM) এর ভার্চুয়াল উপস্থাপন করা হয়। এই Virtual DOM এর পরিবর্তনের সাথে Real DOM এর সাথে তুলনা করা হয় এবং যে যে জায়গায় পরিবর্তন হবে ঐ সকল জায়গার এফিশিয়েন্টভাবে আপডেট করে। যাতে করে এ্যাপ্লিকেশনের পারফরমেন্স এ কোন সমস্যা হয় না। (উল্লেখ্য, Real DOM এবং Virtual DOM নিয়ে অন্য কোন ব্লগে বিস্তারিত আলোচনা করবো, ইনশাআল্লাহ্‌।) 

 

✔ JSX এর পূর্ণরুপ হলো জাভাস্ক্রিপ্ট XML (JavaScript XML)। JSX হলো জাভাস্ক্রিপ্টের জন্য একটি সিনট্যাক্স এক্সটেনশন যা জাভাস্ক্রিপ্ট কোডের পাশাপাশি XML/HTML এর কোড লেখার অনুমতি প্রদান করে। যদিও ReactJS এ আমরা HTML এর মতো কোড লিখি, কিন্তু ব্রাউজারে রেন্ডার হওয়ার আগে এটি একটি বিল্ড প্রক্রিয়ার (babel) মাধ্যমে জাভাস্ক্রিপ্ট কোডে রূপান্তরিত হয় এবং এর ফলাফল ইউআই তে দেখতে পাই। (উল্লেখ্য, JSX নিয়ে অন্য কোন ব্লগে বিস্তারিত আলোচনা করবো, ইনশাআল্লাহ্‌।)

 

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

 

নোটঃ Declarative Syntax কি? Declarative Syntax যৌগিক শব্দ প্রথমটি Declarative এবং দ্বিতীয়টি Syntax। তাহলে প্রথমটি হলো “Declarative” এটা ঠিক মতো বুঝলে দ্বিতীয়টি বুঝতে সমস্যা হবে না বলে মনে করছি। যদি আপনাকে বলি, একটি ওয়েবপেইজ এর স্ট্রাকচার তৈরি করুন, অথবা একটা ডাটাবেইজ ডিজাইন করুন অথবা একটি ইউজার ইন্টারফেস তৈরি করুন। তাহলে আপনার উত্তর কি হবে, চলুন এক সাথে উত্তর খুঁজি; যখন বলা হলো ওয়েবপেইজের স্ট্রাকচার তৈরি করতে তাহলে তা সহজে আমরা HTML এর মাধ্যমে তৈরি করতে পারবো, দ্বিতীয়ত ডাটাবেইজ ডিজাইন করার জন্য যে কোন SQL (MySQL, Oracle, PostgreSQL) অথবা NoSQL (MongoDB, CouchDB, DynamoDB) DBMS (Database Management System) দিয়ে করতে পারবো। তৃতীয়ত ইউজার ইন্টারফেস তৈরি করতে জনপ্রিয় যে কোন একটি লাইব্রেরি বা ফেমওয়ার্ক (React.JS, Vue.JS, Angular.JS, Next.JS) দিয়ে করতে পারবো। এই যে বিভিন্ন ধরনের কাজের ক্ষেত্রে বিভিন্ন ধরনের Programing Language ব্যবহার করা এটাকেই Declarative Structure বা Declarative কাঠামো / ভিত্তি বলে।

যখন কোন এ্যাপ্লিকেশন বা ওয়েবপেইজ ডিজাইন করা হয় তার ডিজাইন বা লেআউট কেমন হবে তা একমাত্র একজন ডেভেলপারস জানে কিন্তু ব্রাউজার জানে না। ব্রাউজার তখনি জানে যখন এ্যাপ্লিকেশন বা ওয়েবপেইজ ব্রাউজারে রান হয়। আর এই এ্যাপ্লিকেশন বা ওয়েবপেইজ এর ডিজাইন বা লেআউট নির্দিষ্ট Programing Language উপর ভিত্তি করে এবং ঐ Programing Language এর নির্দিষ্ট সিন্ট্যাক্স অনুসরণ করে তৈরি হওয়াকে Declarative Syntax বলে। আর এর মাধ্যমে ডেভেলপারসদের সাথে ব্রাউজারের সুসম্পর্ক বঝায় রাখে এবং কোড বুঝতে সহজ হয়।

 

✔ ReactJS, unidirectional (একমুখী) ডাটা প্রবাহ অনুসরণ করে। অর্থ্যাৎ, এ্যাপ্লিকেশনের সকল ডাটা এক দিকে প্রবাহিত হয় (Parent to Child)। এই ডাটা প্রবাহের মাধ্যমে State এবং Props এর পরিবর্তনগুলো UI (User Interface) কে কীভাবে প্রভাবিত করে তা বোঝা সহজ করে তোলে। (উল্লেখ্য, Sate এবং Props নিয়ে অন্য কোন ব্লগে বিস্তারিত আলোচনা করবো, ইনশাআল্লাহ্‌।)

 

✔ React Router একটি লাইব্রেরি যার মাধ্যমে React এ্যাপ্লিকেশনগুলির নেভিগেশন এবং রাউটিং ক্ষমতা প্রদান করে। এর দ্বারা সিঙ্গেল পেইজ বা মাল্টিপেইজ কোন রকম লোড করা ছাড়াই দেখা যায়।

 

✔ ReactJS প্রত্যেকটি কম্পোনেন্টের Lifecycle মেথড রয়েছে এবং এই lifecycle মেথড কিছু হুক প্রদান করে থাকে, যেমন – mounting (componentDidMount), updating (componetntDidUpdate) এবং unmounting (componentWillUnmount) এসকল হুক দ্বারা নির্দিষ্ট শর্তের উপর ভিত্তি করে কোড এক্সিকিউট করা যায়। এছাড়াও আরও একটি হুক প্রদান করে, componentDidCatch – যা সাধারণত error হ্যান্ডেল করে।

 

✔ ReactJS এর ১৬.৮ তম ভার্সন থেকে হুক এর সাথে পরিচয় করিয়ে দেওয়া হয়। ReactJS সাধারণত দুইভাবে কম্পোনেন্ট লেখা যায়, একটি class component অন্যটি functional component। হুক সাধারণত functional component এ কাজ করে। ইতিপূর্বে ReactJS এর লাইফ-সাইকেল মেথড নিয়ে সংক্ষিপ্ত আলোচনা করেছি, আর এই লাইফসাইকেল মেথড যে হুকগুলো প্রদান করে তা ম্যানুয়ালি ব্যবহার করতে হয় এতে কোডবেইজ অনেক বড় হয় এবং এরর ফিক্স করা খুবই কষ্টসাধ্য, কিন্তু আমরা ReactJS এর useEffect হুক এর মাধ্যমে Lifecycle মেথডের হুকগুলো সহজে এ্যাচিভ করতে পারবো। ReactJS এ জনপ্রিয় কিছু হুক – useState, useEffect, useReducer, useRef, useContext ইত্যাদি।

নিম্নে ReactJS এর Lifecycle মেথড ব্যবহার করে একটি উদাহরণঃ

import React, { Component } from "react";
class LifecycleExample extends Component {
  constructor(props) {
    super(props);

   this.state = {
      data: null,
    };
  }

  componentDidMount() {
    console.log("Component did mount");
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((data) => this.setState({ data }));
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("Component did update");
  }
  componentWillUnmount() {
    <console.log("Component will unmount");>
  }

  render() {
    return (
      <div>
        <h1>Class Component Example</h1>
        {this.state.data && <p>Data: {this.state.data.title}</p>}
      </div>
    );
  }
}

export default LifecycleExample;

ReactJS এর Hook ব্যবহার করে একই উদাহরণঃ

import React, { useState, useEffect } from 'react';
const LifecycleHooksExample = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    console.log('Component did mount or update');

    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(data => setData(data));

    return () => {
      console.log('Component will unmount');
    };
  }, []);

  return (
    <div>
      <h1>Functional Component with useEffect Example</h1>
      {data && <p>Data: {data.title}</p>}
    </div>
  );
}

export default LifecycleHooksExample;

✔ ReactJS এর বিশাল এবং এ্যাক্টিভ কমিউনিটি রয়েছে। এই বিশাল ইকোসিষ্টেমে বিভিন্ন ধরনের লাইব্রেরি, টুলস এবং এক্সটেনশন রয়েছে যা ReactJS এর কার্যক্ষমতা ও কর্মক্ষমতা বাড়িয়ে দিয়েছে। এই কমিউনিটির সাপোর্ট , কনট্রিবিউশন এবং লার্নিং রিসোর্স নতুন ReactJS ডেভেলপারদেরস জন্য আশির্বাদ স্বরুপ।

 

কীভাবে ReactJS ভার্চুয়াল ডম ব্যবহার করে -

Virtual DOM হলো Real DOM এর Lightweight copy। যা সাধারণত virtually তৈরি হয় একটি DOM। যেখানে Real DOM এর মতো সকল Properties এক্সেস রয়েছে কিন্তু Virtual DOM সরাসরি ডকুমেন্ট এর লেআউট পরিবর্তন করতে পারে না। Virtual DOM কীভাবে কাজ করে নিম্নে ধাপে ধাপে উল্লেখ করা হলো –

 

✔ যখন কোন এ্যাপ্লিকেশন প্রথমবার ব্রাউজারে রান হয়, বা এ্যাপ্লিকেশনের কোন অবস্থান পরিবর্তন হয়। তখনি DOM এর একটি lightweight কপি তৈরি হয়, যাকে Virtual DOM বলে। আর এই Virtual DOM টি হলো জাভাস্ক্রিপ্টের একটি অবজেক্ট যা Real DOM মডেলের স্ট্রাকচারের প্রতিরূপ।

 

✔ এ্যাপ্লিকেশনে যখন কোন ইউজার ইন্টারয়েকশন, ডাটা ফেচিং, আপডেটিং ইত্যাদি সংঘটিত হলে, নতুন একটি Virtual DOM তৈরি হয় এবং নতুন Virtual DOM টি পূর্ববর্তিটির সাথে তুলনা করে এবং পার্থক্য ও পরিবর্তগুলো চিহ্নিত করে। আর এই প্রক্রিয়াকে Reconciliation (রিকনসিলিয়েশন) বা (Deff) ডিফিং বলে।

 

✔ Reconciliation (রিকনসিলিয়েশন) বা (Deff) ডিফিং প্রক্রিয়ার সময়, অ্যালগোরিদম ঐ প্রক্রিয়ার পরিবর্তিত এবং আপডেট করতে প্রয়োজনীয় নির্দিষ্ট উপদানগুলি চিহ্নিত করে। আর এই প্রয়োজনীয় পরিবর্তনগুলো “Deff বা প্যাচ” এর মাধ্যমে বর্ণনা করে।

 

✔ প্রতিটি পরিবর্তনের ক্ষেত্রে এ্যাপ্লিকেশন এর Real DOM সরাসরি আপডেট করার পরিবর্তে Real DOM এর lightweight কপি Virtual DOM এ পয়োজনীয় সমস্ত পরিবর্তন এবং আপডেটগুলো একটি ব্যাচে সংগ্রহ করে। আর এই নির্ধারিত পরিবর্তনের ব্যাচটি Real DOM এর সাথে তুলনা করে যেখানে পরিবর্তন এবং আপডেট করা প্রয়োজন শুধুমাত্র তাই আপডেট করে এবং আপডেটকৃত নতুন অবস্থা UI তে প্রদর্শিত হয়।

 

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

এক নজরে React.JS
Name	React / React.js
Type	Library
Developed By	Jordan Walke (Software Engineer at Facebook)
First Deployed Facebook Newsfeed	2011
Second Deployed Instagram	2012
Open Source	2013 (JSConf US)
Maintained By	Facebook

 

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