Created At: 2/15/2025

React.js এর মূল কনসেপ্টসমূহ

React.js হলো আধুনিক ওয়েব ডেভেলপমেন্টে ডাইনামিক এবং ইন্টারঅ্যাক্টিভ ইউজার ইন্টারফেস (UI) তৈরির জন্য সবচেয়ে জনপ্রিয় JavaScript লাইব্রেরি। Meta (Facebook)-এর তৈরি এই লাইব্রেরিটি কম্পোনেন্ট-বেজড আর্কিটেকচার এবং Virtual DOM ব্যবহারের মাধ্যমে অ্যাপ্লিকেশন ডেভেলপমেন্টকে সহজ, দ্রুত এবং স্কেলেবল করে তোলে।

১. JSX (JavaScript XML)

JSX হলো JavaScript-এর একটি সিনট্যাক্স এক্সটেনশন, যা সরাসরি JS কোডের ভেতরে HTML-এর মতো মার্কআপ লেখার সুযোগ দেয়। ব্রাউজারে রান করার আগে Babel বা SWC-এর মতো কম্পাইলার এটিকে পিওর জাভাস্ক্রিপ্ট অবজেক্টে (React.createElement) কনভার্ট করে।

JavaScript

const element = <h1 className="title">Hello, React!</h1>;

JSX-এর মূল সুবিধাসমূহ:

• HTML এবং JavaScript লজিক একই সাথে সহজে ব্যবহার করা যায়।

• কোড অনেক বেশি রিডেবল এবং ক্লিন থাকে।

• React-এর Virtual DOM-এর সাথে সিনক্রোনাইজ হয়ে দ্রুত UI আপডেট নিশ্চিত করে।

২. Components: React অ্যাপ্লিকেশনের ভিত্তি

React অ্যাপ্লিকেশনের প্রতিটি UI অংশকে ছোট ছোট ইন্ডিপেন্ডেন্ট Component-এ ভাগ করা হয়। এটি মূলত দুই প্রকার:

Functional Component (মডার্ন স্ট্যান্ডার্ড)

বর্তমানে React-এ ফাংশনাল কম্পোনেন্ট এবং Hooks ব্যবহার করাই ইন্ডাস্ট্রি স্ট্যান্ডার্ড:

JavaScript

function Welcome() {
  return <h2>Hello, React!</h2>;
}

Class Component (Legacy)

আগে স্টেট এবং লাইফসাইকেল মেথড হ্যান্ডেল করতে ক্লাস কম্পোনেন্ট ব্যবহৃত হতো, তবে আধুনিক প্রোজেক্টে এটি প্রায় অপ্রচলিত:

JavaScript

class Welcome extends React.Component {
  render() {
    return <h2>Hello, React!</h2>;
  }
}

৩. Props বনাম State: মূল পার্থক্য

বৈশিষ্ট্যProps (Properties)Stateউৎসপ্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে পাস হয়কম্পোনেন্টের নিজস্ব ইন্টারনাল মেমোরি/ডেটামিউটেবিলিটিImmutable (চাইল্ড কম্পোনেন্টে পরিবর্তন করা যায় না)Mutable (স্টেট আপডেটের মাধ্যমে পরিবর্তিত হয়)উদ্দেশ্যডেটা শেয়ারিং ও কনফিগারেশন পাস করাইউজারের ইন্টারঅ্যাকশন অনুযায়ী UI রি-রেন্ডার করা

Props-এর উদাহরণ:

JavaScript

function Greeting({ name }) {
  return <h3>Hello, {name}!</h3>;
}

State-এর উদাহরণ (useState Hook):

JavaScript

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button => setCount(count + 1)}>Increment</button>
    </div>
  );
}

৪. useEffect Hook: সাইড ইফেক্ট পরিচালনা

কম্পোনেন্টের বাইরে কোনো অপারেশন সম্পন্ন করতে (যেমন: API থেকে ডেটা ফেচ করা, ডম ম্যানিপুলেশন, সাবস্ক্রিপশন হ্যান্ডেল করা) useEffect Hook ব্যবহৃত হয়।

JavaScript

import { useState, useEffect } from "react";

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((error) => console.error("Error fetching data:", error));
  }, []); // Empty dependency array = কম্পোনেন্ট মাউন্ট হওয়ার সময় একবারই রান হবে

  if (loading) return <p>Loading data...</p>;

  return (
    <div>
      <h4>{data?.title}</h4>
      <p>{data?.body}</p>
    </div>
  );
}

৫. React Router: Single Page Application (SPA) নেভিগেশন

পেজ রিলোড না করে এক রাউট থেকে অন্য রাউটে স্মুথলি যাওয়ার জন্য react-router-dom ব্যবহৃত হয়:

JavaScript

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

export default function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

React-এর এই ফান্ডামেন্টাল কনসেপ্টগুলো (JSX, Components, Props/State, Hooks, এবং Routing) শক্তভাবে আয়ত্ত করতে পারলে যেকোনো জটিল ফ্রন্টএন্ড আর্কিটেকচার তৈরি করা সহজ হয়ে যায়।