আমাদের Advanced HTML, CSS, আর JavaScript সিরিজ শেষ হয়েছে। এবার শুরু হচ্ছে নতুন যাত্রা — React এর হাতেখড়ি! এই সিরিজে আমরা শিখব কীভাবে vanilla JavaScript-এর জ্ঞান কাজে লাগিয়ে React দিয়ে আধুনিক, ইন্টারঅ্যাক্টিভ ওয়েব অ্যাপ বানানো যায়। প্রথম পর্বে থাকছে — React কী, কেন এটা এত জনপ্রিয়, আর Vite দিয়ে কীভাবে একটা প্রজেক্ট শুরু করতে হয়।
React কী?
React হলো Meta (আগে Facebook)-এর তৈরি একটা JavaScript লাইব্রেরি, যা দিয়ে ইউজার ইন্টারফেস (UI) বানানো হয়। এটা কোনো সম্পূর্ণ ফ্রেমওয়ার্ক না — শুধু UI তৈরির জন্য একটা লাইব্রেরি, যেটা তোমার আগে শেখা vanilla JavaScript-এর উপরেই ভিত্তি করে কাজ করে।
React-এর মূল ধারণা হলো — UI-কে ছোট ছোট, পুনর্ব্যবহারযোগ্য Component-এ ভাগ করা, আর ডেটা পাল্টালে React নিজে থেকেই বুঝে নেয় কোন অংশ আপডেট করতে হবে।
Vanilla JS বনাম React — সমস্যাটা কী ছিল?
Advanced JavaScript সিরিজে আমরা যে To-do List বানিয়েছিলাম, সেখানে প্রতিবার ডেটা পাল্টালে ম্যানুয়ালি innerHTML রিসেট করে আবার সব এলিমেন্ট বানিয়ে DOM-এ বসাতে হয়েছিল (render() ফাংশন মনে আছে?)। ছোট প্রজেক্টে এটা ঠিকঠাক চলে, কিন্তু প্রজেক্ট বড় হলে এই "ম্যানুয়াল DOM ম্যানিপুলেশন" জটিল আর বাগ-প্রবণ হয়ে যায়।
| বৈশিষ্ট্য | Vanilla JavaScript | React |
|---|---|---|
| DOM আপডেট | ম্যানুয়ালি (createElement, innerHTML) | স্বয়ংক্রিয় — ডেটা পাল্টালেই UI আপডেট |
| কোড সংগঠন | ফাংশন ও ক্লাস দিয়ে (তুমি নিজে যেভাবে সাজাও) | Component-ভিত্তিক (UI + লজিক একসাথে) |
| বড় প্রজেক্টে | জটিল হয়ে যায়, বাগ বাড়ে | প্রেডিক্টেবল, স্কেল করা সহজ |
গুরুত্বপূর্ণ: React শেখা মানে vanilla JS ভুলে যাওয়া না — বরং তুমি এই সিরিজে যা শিখবে (Closure, this, Destructuring, Spread, Class) সবকিছুই React-এর ভেতরে সরাসরি কাজে লাগবে। React আসলে vanilla JS-এর উপরেই একটা সংগঠিত কাঠামো।
Virtual DOM — সংক্ষেপে
React দ্রুত কাজ করে একটা কৌশলের মাধ্যমে — Virtual DOM। ডেটা পাল্টালে React সরাসরি আসল DOM না পাল্টে, প্রথমে মেমরিতে একটা "ভার্চুয়াল" কপি তৈরি করে নতুন আর পুরনো ভার্সন তুলনা করে, তারপর শুধু যেটুকু আসলেই বদলেছে সেটুকুই আসল DOM-এ আপডেট করে। এতে পারফরম্যান্স অনেক ভালো হয়, বিশেষ করে জটিল UI-তে।
লাইভ ডেমো — একটা আসল React Component
নিচে সত্যিকারের React কোড দিয়ে বানানো একটা ছোট্ট কাউন্টার আছে (CDN দিয়ে React লোড করে চালানো হচ্ছে) — বাটনে চাপো, দেখো কীভাবে UI স্বয়ংক্রিয়ভাবে আপডেট হয়ে যাচ্ছে, কোনো innerHTML বা render() ফাংশন ম্যানুয়ালি না লিখেই।
এই পুরো কাউন্টারটা মাত্র কয়েক লাইনের React কোড — পরের পর্বগুলোতে আমরা ঠিক এভাবেই লিখতে শিখব।
Vite দিয়ে প্রজেক্ট সেটআপ করা
React প্রজেক্ট শুরু করার সবচেয়ে দ্রুত আর আধুনিক উপায় হলো Vite — এটা একটা বিল্ড টুল যা তোমার আগে ব্যবহার করা npm-এর সাথেই কাজ করে।
# নতুন React প্রজেক্ট বানানো npm create vite@latest my-react-app # প্রজেক্ট টাইপ জিজ্ঞেস করলে বেছে নাও: React # ভেরিয়েন্ট জিজ্ঞেস করলে বেছে নাও: JavaScript # প্রজেক্ট ফোল্ডারে ঢোকা cd my-react-app # প্যাকেজ ইনস্টল করা npm install # ডেভেলপমেন্ট সার্ভার চালু করা npm run dev
শেষ কমান্ডটা চালানোর পর টার্মিনালে একটা লোকাল URL (সাধারণত http://localhost:5173) দেখাবে — সেটা ব্রাউজারে খুললেই একটা রেডিমেড React অ্যাপ দেখা যাবে।
প্রজেক্ট স্ট্রাকচার
Vite দিয়ে বানানো প্রজেক্টে যা যা থাকে:
my-react-app/ ├── node_modules/ # সব npm প্যাকেজ (ইনস্টল হওয়ার পর তৈরি হয়) ├── public/ # স্ট্যাটিক ফাইল (favicon ইত্যাদি) ├── src/ │ ├── App.jsx # মূল কম্পোনেন্ট │ ├── App.css # App-এর স্টাইল │ ├── main.jsx # অ্যাপ শুরু হওয়ার এন্ট্রি পয়েন্ট │ └── index.css # গ্লোবাল স্টাইল ├── index.html # একমাত্র HTML ফাইল ├── package.json # প্রজেক্টের নাম, ডিপেন্ডেন্সি তালিকা └── vite.config.js # Vite-এর কনফিগারেশন
খেয়াল করো — শুধু একটা HTML ফাইল আছে (index.html)। কারণ React একটা SPA (Single Page Application) বানায় — পুরো অ্যাপ একটা পেজেই চলে, JavaScript দিয়ে ভেতরের কন্টেন্ট বদলায়, ঠিক যেমন আমরা আগে vanilla JS দিয়ে DOM ম্যানিপুলেট করতাম।
.jsx ফাইল এক্সটেনশন কেন?
.js না হয়ে .jsx ব্যবহার করা হয় কারণ React ফাইলে সাধারণ JavaScript-এর পাশাপাশি HTML-এর মতো দেখতে সিনট্যাক্স (JSX) লেখা হয় — এটা পরের পর্বেই বিস্তারিত শিখব। Vite এই এক্সটেনশন দেখে বুঝতে পারে ফাইলটা কীভাবে প্রসেস করতে হবে।
main.jsx — অ্যাপের এন্ট্রি পয়েন্ট
এই ফাইলটাই সবচেয়ে প্রথম রান হয় — এটা React অ্যাপকে HTML-এর একটা নির্দিষ্ট এলিমেন্টের ভেতর "বসিয়ে দেয়"।
// src/main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(
<App />
);
এখানে Advanced JavaScript সিরিজের পর্ব ১১-এর import সিনট্যাক্স ব্যবহার হচ্ছে — App কম্পোনেন্টটা App.jsx থেকে default export হিসেবে ইমপোর্ট করা হচ্ছে, তারপর document.getElementById("root") দিয়ে সেই পরিচিত DOM এলিমেন্ট খুঁজে সেখানে React অ্যাপ "রেন্ডার" করা হচ্ছে।
<!-- index.html --> <!DOCTYPE html> <html lang="bn"> <head> <meta charset="UTF-8" /> <title>My React App</title> </head> <body> <div id="root"></div> <script src="/src/main.jsx" type="module"></script> </body> </html>
এই <div id="root">-ই সেই "খালি ক্যানভাস" — React তার পুরো অ্যাপ এখানেই "ইনজেক্ট" করে দেয়। আর type="module" খেয়াল করো — এটাই Advanced JS পর্ব ১১-এ শেখা ES Module, যেটা ছাড়া import কাজ করত না।
npm scripts — কী কী কমান্ড আছে
| কমান্ড | কাজ |
|---|---|
npm run dev |
ডেভেলপমেন্ট সার্ভার চালু, লাইভ রিলোড সহ |
npm run build |
প্রোডাকশনের জন্য অপ্টিমাইজড ফাইল বানায় (dist/ ফোল্ডারে) |
npm run preview |
build হওয়া ভার্সন লোকালি টেস্ট করে দেখা |
ভবিষ্যতের জন্য: npm run build-এর পর তৈরি হওয়া dist/ ফোল্ডারটাই তোমার Cloudflare Pages-এ ডিপ্লয় করতে হবে — ঠিক যেভাবে আগের GitHub Actions ওয়ার্কফ্লোতে অন্যান্য প্রজেক্ট ডিপ্লয় করেছ, React প্রজেক্টও একই পাইপলাইনে ফিট হয়ে যাবে।
নিজে চেষ্টা করো
Exercise:
npm create vite@latestদিয়ে একটা নতুন React প্রজেক্ট বানাও,npm run devচালিয়ে ব্রাউজারে দেখো।- প্রজেক্ট ফোল্ডারে
src/App.jsxখুলে দেখো ভেতরে কী কোড আছে, একটা টেক্সট পাল্টে সেভ করো — লক্ষ্য করো ব্রাউজার নিজে থেকেই রিফ্রেশ হয়ে যায়। npm run buildচালিয়ে দেখোdist/ফোল্ডারে কী তৈরি হয়।- উপরের লাইভ কাউন্টার ডেমোর কোডটা খেয়াল করো —
useStateশব্দটা মনে রাখো, পরের কয়েক পর্বে আমরা এটা বিস্তারিত শিখব।
পরের পর্বে যা থাকছে
পরের পর্বে আমরা শিখব JSX বেসিক — JSX আসলে কী, এটা HTML থেকে কীভাবে আলাদা, আর কীভাবে JSX-এর ভেতরে সরাসরি JavaScript এক্সপ্রেশন বসানো যায়।