React শেখার শুরু: আশা রাখছি-> এই লেখায় আপনার React এর ৮০% কনসেপ্ট ক্লিয়ার হয়ে যাবে!

এই লেখাটি যদি আপনি মন দিয়ে পড়েন আর বুঝে প্রাকটিস করেন, আমি আশা করি, React-এর জরুরি ধারণাগুলো আপনার ব্রেনে ঢুকে যাবে, যা আপনার প্রতিদিনের কোডিং এ কাজে লাগবে।

এই লেখাতে কি কি পাবেন:

• (Vite) দিয়ে একটি প্রোজেক্ট ইনিশিয়ালাইজ, ফাইল/ফোল্ডার স্ট্রাকচার
• JSX, Components, Props, State (useState) — ব্যাখ্যা ও উদাহরণসহ
• Events, Lists & keys, Conditional rendering, Forms, useEffect (ডেটা ফেচিং)
• Lifting state up, Context, Router, Custom hooks, পারফরম্যান্স টিপস
• ডেপ্লয়মেন্ট, প্রজেক্ট-বেসড এক্সারসাইজ ও শেখার রোডম্যাপ

সূচিপত্র

1. পরিচিতি ও কী কী শিখবেন
2. প্রয়োজনীয়তা (প্রি-রেকুইজিট) ও সেটআপ
3. প্রথম React অ্যাপ — Vite ব্যবহার করে প্রজেক্ট তৈরি
4. JSX — কী, কিভাবে ও প্র্যাকটিস
5. কম্পোনেন্ট — ফাংশনাল বনাম ক্লাস (সংক্ষিপ্ত)
6. Props: ডাটা পাসিং সোজা করে বলা
7. State ও useState: UI এর অবস্থা বদলানো
8. ইভেন্ট ও ইউজার ইন্টারঅ্যাকশন
9. লিস্ট, key ও রেন্ডার অপ্টিমাইজেশন
10. কন্ডিশনাল রেন্ডারিং
11. ফর্ম ও ইনপুট হ্যান্ডলিং
12. useEffect: ডেটা ফেচিং ও সাইড-ইফেক্ট
13. কম্পোনেন্টদের মধ্যে ডাটা শেয়ার — Lifting state up ও Context
14. রিয়েক্ট রাউটিং (React Router) — পেজ সমূহ
15. কাস্টম হুক ও রিইউজেবল লজিক
16. পারফরম্যান্স টিপস (memo, useMemo, useCallback)
17. টেস্টিং ও ডিবাগিং (সংক্ষেপে)
18. বিল্ডিং ও ডেপ্লয়মেন্ট
19. প্রজেক্ট আইডিয়া, চ্যালেঞ্জ ও এক্সারসাইজ
20. সংক্ষেপে: শেখার রোডম্যাপ ও রিসোর্স

1. পরিচিতি ও লক্ষ্য

এই টিউটোরিয়ালের লক্ষ্য — React শেখানো এমনভাবে যাতে ৮০% ব্যবহারিক কাজ আপনি এই টিউটোরিয়াল পড়ে করে ফেলতে পারেন। আপনি যদি প্রতিটি অংশ মনোযোগ দিয়ে পড়েন এবং অনুশীলন করেন, তাহলে আপনি ছোট ও মাঝারি সাইজ প্রজেক্ট বানাতে সক্ষম হবেন।

2. প্রি-রেকুইজিট ও সেটআপ

প্রি-রেকুইজিট

• HTML, CSS (মৌলিক ধারণা)
• আধুনিক JavaScript (ES6+) — let/const, arrow functions, template strings, destructuring, modules

কম্পিউটার সেটআপ

1. Node.js ও npm (বা pnpm/yarn) ইন্সটল করুন
2. কোড এডিটর: VS Code (ইনস্টল)

কম্পিউটারে পরিবেশ তৈরি জন্য বিস্তারিত পড়ুনঃ এখানে

প্রজেক্ট তৈরি (Vite)

বর্তমান সময়ে vite দিয়ে React এপ্লিকেশন তৈরি খুব জনপ্রিয় হয়ে উঠেছে। কারণ- এটি খুব দ্রুত ডেভ সার্ভার চালু করে এবং কোড পরিবর্তনের সাথে সাথে তৎক্ষণাত আপডেট দেখায় (HMR), ফলে ডেভেলপমেন্ট অনেক দ্রুত হয়। এছাড়া Vite খুব কম কনফিগারেশনে কাজ করে, তাই নতুন প্রজেক্ট শুরু করাও সহজ। আধুনিক টুলিং (যেমন esbuild ও Rollup) ব্যবহার করার কারণে প্রোডাকশন বিল্ডও দ্রুত ও অপ্টিমাইজড হয়। Tailwind, TypeScriptসহ বিভিন্ন প্লাগইনও সহজে যুক্ত করা যায়। সব মিলিয়ে দ্রুততা, হালকা সেটআপ এবং ভালো ডেভেলপার অভিজ্ঞতার কারণে React প্রজেক্টে Vite এখন সবচেয়ে জনপ্রিয় পছন্দ।

# নতুন প্রজেক্ট
npm create vite@latest loan-management -- --template react
cd loan-management
npm install
npm run dev

Vite দ্রুত, হট-রিলোড আছে — তাই Vite দিয়ে রিয়েক্ট প্রোজেক্ট শুরু করা ভালো।

Tailwindcss সেটআপ করে নিন।

বর্তমান স্টাইলিং এর জন্য রেডিমেট ক্লাস ব্যবহার করি। Tailwind CSS আমাদের রেডিমেট ইউটিলিটি ক্লাস দেয়।

1. install tailwindcss

npm install tailwindcss @tailwindcss/vite

2. vite.config.js ফাইল এ গিয়ে নিচের কোডটা পেস্ট করুন

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
 
// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

3. index.css এ tailwindcss import করুন

@import "tailwindcss";

3. আপনার প্রথম React অ্যাপ্লিকেশন: প্রোজেক্ট ফাইল ও ফোল্ডার স্ট্রাকচার

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

loan-management/
  ├─ index.html
  ├─ src/
  │   ├─ data/
  │   │   └─ creditors.json      (or any data files you want)
  │   │
  │   ├─ main.jsx
  │   ├─ App.jsx
  │   ├─ components/
  │   │   ├─ TotalLoan.jsx
  │   │   ├─ Creditors.jsx
  │   │   └─ Creditor.jsx
  │   └─ styles.css
  └─ package.json

main.jsx থেকে App ফাইলকে রেন্ডার করে: এখানে ReactDOM.createRoot(...).render(<App />) থাকবে।

প্রোজেক্ট শুরুর আগে ফাস্ট আমাদের ডাটা স্ট্রাকচার নিয়ে ভাবতে হবে।

React অ্যাপের জন্য ছোট-medium প্রোজেক্টে Single Source of Truth ব্যবহার করা ভালো। অর্থাৎ সব সম্পর্কিত ডাটা (যেমন creditors, loans) এক জায়গায় centralized রাখা। এতে ডাটা consistent থাকে, update সহজ হয় এবং bug কম থাকে। ছোট component গুলো props বা context থেকে ডাটা নেবে। বড় বা কমপ্লেক্স অ্যাপে আলাদা slices বা state management library ব্যবহার করা যায়, কিন্তু শুরুতে centralized structure সবচেয়ে সিম্পল ও কার্যকর।

আমাদের প্রোজেক্টের জন্য ডাটা স্ট্রাকচার নিচের মতো করে নিতে পারি-

export const creditors = [
  {
    id: 1,
    name: "John Doe",
    loanAmount: 15000,
    interestRate: 0,
    dueDate: "2024-12-31",
  },
  {
    id: 2,
    name: "Jane Smith",
    loanAmount: 25000,
    interestRate: 0,
    dueDate: "2025-06-30",
  },
  {
    id: 3,
    name: "Acme Corp",
    loanAmount: 10000,
    interestRate: 0,
    dueDate: "2025-12-31",
  },
];
 

4. JSX — দেখতে HTML-এর মত মনে হলেও কিন্তু JS এর ভিতর

JSX হলো JavaScript এর ভিতরে HTML-এর মত সিনট্যাক্স। এখন আমরা একটি TotalLoan কম্পোনেন্টটি বানাবো। যেখানে {totalAmout} প্রোপস আকারে আসবে। প্রোপস কি, সেটা একটু পর বুঝিয়ে বলছি।

মনে রাখার নিয়ম

• JSX-এ attribute className ব্যবহার করতে হবে।
• একাধিক ট্যাগ হলে এক parent লাগবে (বা <>...</> fragment)।
• JavaScript expression {} দিয়ে লিখতে হবে।

নিচের এই কোডটি কপি করুন এবং TotalLoan কম্পোনেন্টে পেস্ট করুন

export default function TotalLoan({ totalLoan }) {
  return (
    <div className="flex flex-col items-center justify-center p-4 shadow-md bg-white">
      <h2 className="text-lg font-semibold mb-2">Total Loan Amount</h2>
      <p className="text-xl font-bold">{totalLoan}</p>
    </div>
  );
}

5. React কম্পোনেন্ট কি— ছোট ছোট UI ব্লক

React-এ প্রতিটি UI অংশই একটা করে কম্পোনেন্ট চিন্তা করতে পারি। ফাংশনাল কম্পোনেন্ট সবচেয়ে জনপ্রিয়।

নিচের কোডটি App.jsx কম্পোনেন্ট এ পেস্ট করুন। এখানে আমরা যে কাজটি করেছি, তা হলো-- data/creditors থেকে creditors data import করেছি। এবং App কম্পোনেন্টের এর মধ্যে totalLoan ক্যালকুলেট করেছি।

import CreditorList from "./components/CreditorList";
import TotalLoan from "./components/TotalLoan";
import { creditors } from "./data/creditors";
 
export default function App() {
  const totalLoan = creditors.reduce(
    (sum, creditor) => sum + creditor.loanAmount,
    0
  );
 
  return (
    <div className="max-w-md mx-auto flex flex-col gap-4 p-4 min-h-screen">
      <TotalLoan totalLoan={totalLoan} />
      <CreditorList creditors={creditors} />
    </div>
  );
}
 
 

কোম্পোনেন্ট রিইউজ করা সহজ — যেমন ওয়েবসাইটের <Header />, <Footer /> কম্পোনেন্ট একাধিক ফাইলে ব্যবহার করুন।

React ক্লাস কম্পোনেন্ট (এখনকার সময় খুব কম ব্যবহার হয়)

React-এ কম্পোনেন্ট দুইভাবে বানানো যায়: ফাংশনাল আর ক্লাস। ক্লাস কম্পোনেন্ট পুরনো স্টাইল, কিন্তু এখনও কাজ করে।

উদাহরণ:

import React, { Component } from "react";
 
export default class Header extends Component {
  render() {
    return <header><h1>React-Bangla</h1></header>;
  }
}

কী জিনিস:

1. class Header extends Component → কম্পোনেন্ট তৈরি করা হলো।
2. render() → এখানে UI JSX রিটার্ন হয়।
3. <Header /> → যেকোনো জায়গায় ব্যবহার করা যায়।

সংক্ষেপে:

• ক্লাস কম্পোনেন্ট হলো পুরনো স্টাইলের React কম্পোনেন্ট, যেটাতে render() মেথড থাকে।
• ফাংশনাল কম্পোনেন্টের মতো একাধিক বার রিইউজ করা যায়।

6. Props — ডাটা পাস করা

Props হলো কম্পোনেন্টে বাইরের ডাটা পাঠানোর উপায়।

১। CreditorList.jsx ফাইল ক্রিয়েট করুন। নিচের কোডটি পেস্ট করুন।

export default function CreditorList({ creditors }) {
  return (
    <div>
      <h2 className="text-lg font-semibold mb-2">Creditor List</h2>
      {creditors.map((creditor) => (
        <Creditor key={creditor.id} creditor={creditor} />
      ))}
    </div>
  );
}

২। Creditor.jsx ফাইল ক্রিয়েট করুন। নিচের কোডটি পেস্ট করুন।

export default function Creditor({ creditor }) {
  return (
    <div className="p-2 mb-2 border rounded bg-white">
      <h3 className="text-md font-medium">{creditor.name}</h3>
      <p>Loan Amount: {creditor.loanAmount}</p>
    </div>
  );
}

7. State ও useState — UI কে জীবন্ত করা

State হলো লোকাল ডাটা যা কম্পোনেন্ট লাইফটাইম ধরে রাখে।

import { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>সংখ্য়া: {count}</p>
      <button onClick={() => setCount(count + 1)}>বড়াও</button>
    </div>
  );
}

কিছু টিপস:

• setCount asynchronous হতে পারে — যদি নতুন মান পুরোনোর ওপর নির্ভর করে, setCount(c => c + 1) ব্যবহার করুন।
• প্রতিটি কম্পোনেন্টের state আলাদা।

8. ইভেন্ট ও ইউজার ইন্টারঅ্যাকশন

ইভেন্ট হ্যান্ডলার পাস করুন যেমন onClick, onChange।

function MyButton() {
  function handleClick() { alert('আপনি ক্লিক করেছেন!'); }
  return <button onClick={handleClick}>ক্লিক করো</button>;
}

মনে রাখবেন onClick={handleClick} — না handleClick()।

9. লিস্ট, key ও রেন্ডার অপ্টিমাইজেশন

List render

const items = [{id:1, text:'A'}, {id:2, text:'B'}];
return <ul>{items.map(i => <li key={i.id}>{i.text}</li>)}</ul>;

Key দিন যাতে React প্রতিটি আইটেম ট্র্যাক করতে পারে।

10. কন্ডিশনাল রেন্ডারিং

return <div>{isLoggedIn ? <Profile /> : <Login />}</div>;
// অথবা
return <div>{isAdmin && <AdminPanel />}</div>;

11. ফর্ম ও ইনপুট হ্যান্ডলিং

Controlled component প্যাটার্ন:

function NameForm() {
  const [name, setName] = useState('');
  return (
    <form onSubmit={(e)=>{e.preventDefault(); alert(name);}}>
      <input value={name} onChange={e => setName(e.target.value)} />
      <button type="submit">সাবমিট</button>
    </form>
  );
}

12. useEffect — সাইড-ইফেক্ট ও ডেটা ফেচিং

useEffect ব্যবহার করে API কল বা সাবস্ক্রিপশন করা হয়।

import { useEffect, useState } from 'react';
 
function Users() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(r => r.json())
      .then(setUsers);
  }, []); // খালি ডিপেন্ডেন্সি → মাউন্টের সময় একবার
 
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Cleanup: সাবস্ক্রিপশন বা টাইমার থাকলে return করে ক্লিনআপ লিখুন।

13. কম্পোনেন্টদের মধ্যে ডাটা শেয়ার

Lifting state up

যদি দুই চাইল্ড একই স্টেট শেয়ার করে, প্যারেন্টে state রাখুন ও props দিয়ে পাঠান।

Context API

কমনভাবে ব্যবহার্য থিম বা ইউজার অবজেক্ট শেয়ার করা হলে React.createContext() ব্যবহার করুন।

14. রিয়েক্ট রাউটিং (React Router)

React Router দিয়ে মাল্টিপেজ UI বানান। সংক্ষিপ্ত উদাহরণ:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

15. কাস্টম হুক — reusable logic

যদি অনেক কম্পোনেন্টে একই লজিক লাগে, কাস্টম হুক বানান:

import { useState, useEffect } from 'react';
 
export function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => { fetch(url).then(r=>r.json()).then(setData); }, [url]);
  return data;
}

16. পারফরম্যান্স টিপস

• বড় লিস্টে virtualization ব্যবহার করুন (react-window)।
• React.memo দিয়ে প্রপস না বদলালে রিরেন্ডার রোধ করুন।
• useCallback ও useMemo ব্যবহার করে ফাংশন/ভ্যালুকেও ক্যাশ করুন — কিন্তু অপ্রয়োজনীয় হলে ব্যবহার করবেন না।

17. টেস্টিং ও ডিবাগিং (সংক্ষেপে)

• ইউনিট টেস্ট: Jest + React Testing Library
• ব্রাউজার DevTools + React DevTools দিয়ে কম্পোনেন্ট ট্রি দেখা যায়।

18. বিল্ডিং ও ডেপ্লয়মেন্ট

npm run build পরে dist/ ফোল্ডারকে Netlify / Vercel / GitHub Pages-এ ডেপ্লয় করুন। Vercel খুবই সোজা (Git push → auto-deploy)।

19. প্রজেক্ট আইডিয়া ও এক্সারসাইজ

প্রজেক্ট-1: একটি টুডু অ্যাপ — Add, Toggle complete, Remove, Filter প্রজেক্ট-2: লগইন পেজ + প্রটেক্টেড রুট (Context ব্যবহার) প্রজেক্ট-3: News fetcher — API ব্যবহার করে List & Pagination

প্রতি প্রজেক্টের জন্য ছোট ছোট টাস্ক— যেমন: responsive বানাও, localStorage-এ সেভ করো, unit tests যোগ করো।

অতিরিক্ত রিসোর্স: React official docs, MDN, JavaScript.info — নিয়মিত রেফারেন্স রাখুন।

ব্যস! আপনি কিন্তু React-এর সবচেয়ে দরকারি বিষয়গুলো শিখে ফেলেছেন। এগুলোই মূল ভিত্তি।

এবার শুধু পড়লে হবে না, নিজে হাতে কোড করতে হবে। আমার পরামর্শ হলো, আপনি React-এর অফিশিয়াল টিক-ট্যাক-টো টিউটোরিয়ালটা (opens in a new tab) করে ফেলুন। দেখবেন, এই সবকিছু ব্যবহার করে একটা গেম বানালে আপনার আত্মবিশ্বাস অনেক বেড়ে যাবে!