React কেন — component-এ UI ভাবা

১ · React কোন সমস্যা মেটায় — পর্দা আর data মিলিয়ে রাখা

ক্রিকেট মাঠের পুরোনো স্কোরবোর্ড ভাবুন। একজন মানুষ হাতে নম্বরের পাত বদলান। একটি চার হলে তাঁকে রান বদলাতে হয়, ব্যাটারের রান বদলাতে হয়, বলের সংখ্যাও বদলাতে হয়। একটি ভুলে গেলেই বোর্ড মিথ্যা বলে। অথচ স্কোরারের খাতায় হিসাব ঠিকই আছে।

ডিজিটাল স্কোরবোর্ড অন্যভাবে চলে। সেখানে খাতাটিই আসল। বোর্ড শুধু খাতা দেখে নিজেকে সাজায়। কে কী বদলাবে, তা আলাদা করে কাউকে বলতে হয় না।

“বাজারঘর”-এর পণ্যের পাতাতেও একই সমস্যা। ক্রেতা “কার্টে যোগ করুন” চাপলে অন্তত চারটি জায়গা বদলানোর কথা:

• হেডারের কার্ট আইকনের সংখ্যা
• কার্টের মোট টাকা
• পণ্যের স্টকের লেখা (“মাত্র ২টি বাকি”)
• বাটনের অবস্থা (স্টক শেষ হলে বন্ধ)

হাতে DOM বদলালে এই চারটি জায়গার হিসাব আপনাকেই রাখতে হয়। পরে কেউ পঞ্চম একটি জায়গা যোগ করলে আগের সব কোড খুঁজে বদলাতে হয়। একটি জায়গা বাদ পড়লে কোনো error আসে না, শুধু পর্দা ভুল কথা বলে। এই ধরনের বাগ ধরা কঠিন, কারণ প্রোগ্রাম ভাঙে না।

এটুকু আপনি পর্ব ১-এ দেখেছেন: রিকশাওয়ালাকে প্রতিটি মোড়ে পথ বলা, আর শুধু গন্তব্য বলা। সেখানে ছোট সূত্রটি ছিল UI = f(state). এর মানে, পর্দা হলো state-এর একটি ফাংশন। ভিত্তির আলোচনা আছে JavaScript course-এর framework পর্বে. এই মডিউলে আমরা সূত্রটি হাতে-কলমে বানাব।

২ · Component-এ ভাবা — একটি পাতাকে গাছে ভাগ করা

দর্জি একটি পাঞ্জাবিকে এক টুকরো হিসেবে কাটেন না। তিনি হাতা, কলার, বুক আলাদা মাপে কাটেন, পরে জোড়া দেন। হাতার মাপ বদলালে কলার ছুঁতে হয় না। Component ঠিক এই কাটা টুকরো। প্রতিটি টুকরোর একটি কাজ, আর জোড়া দিলে পুরো পাতা।

প্রশ্ন হলো, কোথায় কাটবেন? নিচের তিনটি প্রশ্ন বেশিরভাগ ক্ষেত্রে কাজ দেয়। পণ্যের পাতায় ধাপে ধাপে লাগিয়ে দেখুন।

1. এক কথায় বলা যায়? Component-এর কাজ বলতে “এবং” লাগলে সেটি সম্ভবত দুটি component.
2. এটি কি বারবার আসে? একই চেহারা দুই জায়গায় থাকলে একটি component বানালে দুই জায়গা একসঙ্গে ঠিক থাকে।
3. এটি কি আলাদা কারণে বদলায়? দাম বদলায় ব্যবসার নিয়মে, লোগো বদলায় নকশার কারণে। কারণ আলাদা হলে জায়গাও আলাদা হওয়া ভালো।

ProductPage
  লোগো, খোঁজার ঘর, কার্ট
  পণ্যের ছবি, নাম, দাম, স্টক
  “কার্টে যোগ করুন”
  মিল আছে এমন ৪টি পণ্য
  ঠিকানা আর ফোন নম্বর

ProductPage
  Header
  ProductDetails
  RelatedProducts
  Footer

ProductPage
  Header
    Logo
    SearchBox
    CartButton
  ProductDetails
  RelatedProducts
  Footer

ProductPage
  Header …
  ProductDetails
    ProductGallery
    ProductInfo
      PriceTag
      StockBadge
    AddToCart
  RelatedProducts
  Footer

ProductPage
  Header …
  ProductDetails …
  RelatedProducts
    ProductCard × 4
      PriceTag    ← আবার ব্যবহার
      StockBadge  ← আবার ব্যবহার
  Footer

৩ · Function component — নাম, return আর Fragment

React-এর component একটি সাধারণ JavaScript ফাংশন, যা পর্দার একটি বর্ণনা ফেরত দেয়। JavaScript-এর ফাংশন আপনি চেনেন। বাড়তি কথা শুধু তিনটি। নিচের ঘরে কোড বদলে নিজেই চালান। এটি পাতার ভেতরে চলা আসল React 19, তবে এর production build.

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function PriceTag() {
  console.log('PriceTag');
  return <p style={{ fontWeight: 700 }}>৳১২০</p>;
}
function StockBadge() {
  console.log('StockBadge');
  return <span style={{ color: '#067' }}>স্টকে আছে</span>;
}
function ProductCard() {
  console.log('ProductCard');
  return (
    <article style={{ border: '1px solid #ccc', padding: 12 }}>
      <h2>মিনিকেট চাল, ১ কেজি</h2>
      <PriceTag />
      <StockBadge />
    </article>
  );
}
createRoot(document.getElementById('root')).render(<ProductCard />);
</script>

তিনটি নিয়ম, আর ভাঙলে আসল বার্তা

নাম বড় হাতের অক্ষরে শুরু হবে। এই লেখার ধরনকে বলে PascalCase: ProductCard, PriceTag. এটি শুধু সৌন্দর্যের নিয়ম নয়। JSX-এ ছোট হাতের ট্যাগ মানে HTML ট্যাগ, আর বড় হাতের ট্যাগ মানে আপনার component.

একটি root ফেরত দিতে হবে। JavaScript-এর একটি ফাংশন একটি মানই ফেরত দিতে পারে। পাশাপাশি দুটি ট্যাগ মানে দুটি মান। তাই সেগুলোকে একটি মোড়কে রাখতে হয়।

কিছু একটা ফেরত দিতে হবে। return ভুলে গেলে ফাংশন undefined দেয়, পর্দায় কিছুই আসে না।

সত্যিকারের run · React 19.3.1, Vite 8.3.5, TypeScript 7.0.2 · লম্বা বার্তা ছাঁটা

চতুর্থ সারির ঘটনাটি মনে রাখুন। ছোট হাতের ভুলে npm run dev থামেনি। পাতা খালি এলো, আর DOM-এ বসল <productcard></productcard> নামের একটি অচেনা ট্যাগ। কারণ dev server শুধু অনুবাদ করে, type যাচাই করে না। যাচাই হয় tsc -b-তে। পর্ব ৫-এর npm run build-এ এটি প্রথমেই চলে।

Fragment — ছাপ না রাখা মোড়ক

div দিয়ে মুড়ে দিলে কাজ চলে, কিন্তু DOM-এ একটি অকারণ স্তর জমে। CSS Grid বা Flexbox-এর সরাসরি সন্তান বদলে গেলে নকশাও ভাঙতে পারে। আর ul-এর সরাসরি সন্তান li না হলে পর্দা পাঠকের কাছে তালিকার অর্থ দুর্বল হয়; দেখুন accessibility পর্ব।

সমাধান <>…</>. এই খালি ট্যাগের নাম Fragment. ডাকঘরের বস্তার মতো ভাবুন: পরিবহনের সময় চিঠিগুলো এক সঙ্গে থাকে, কিন্তু বিলির সময় বস্তাটি কারও বাড়ি যায় না। আমাদের আসল ProductPage ঠিক এটি ব্যবহার করছে।

import { Header } from '../components/Header'
import { ProductCard } from '../components/ProductCard'

export function ProductPage() {
  return (
    <>
      <Header />
      <main>
        <ProductCard />
      </main>
    </>
  )
}

৪ · আসল project — Vite-এ প্রথম component

এবার পাতার ঘর থেকে নিজের কম্পিউটারে আসি। পর্ব ৫-এর কমান্ডই চলবে, তাই ব্যাখ্যা আবার দিচ্ছি না।

npm create vite@latest bazarghar-web -- --template react-ts --no-interactive
cd bazarghar-web
npm install
npm run dev

টেমপ্লেটের App.css আর assets মুছে আমরা নিজেদের ফাইল বসিয়েছি। ফাইলের গঠন এখন এমন:

src/
  main.tsx
  App.tsx
  index.css
  pages/
    ProductPage.tsx
  components/
    Header.tsx
    ProductCard.tsx
    PriceTag.tsx
    StockBadge.tsx

import { PriceTag } from './PriceTag'
import { StockBadge } from './StockBadge'

export function ProductCard() {
  return (
    <article className="card">
      <h2>মিনিকেট চাল, ১ কেজি</h2>
      <PriceTag />
      <StockBadge />
    </article>
  )
}

export function PriceTag() {
  return <p className="price">৳১২০</p>
}

import { ProductPage } from './pages/ProductPage'

export default function App() {
  return <ProductPage />
}

className কেন, class কেন নয়, সেটি পর্ব ৮-এ। দাম এখানে হাতে লেখা, কারণ বাইরে থেকে মান পাঠানো (props) পর্ব ৯-এর বিষয়। এবার build:

$ npm run build

> bazarghar-web@0.0.0 build
> tsc -b && vite build

vite v8.3.5 building client environment for production...
transforming...
✓ 21 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                   0.46 kB │ gzip:  0.29 kB
dist/assets/index-DJjl32jt.css    0.16 kB │ gzip:  0.15 kB
dist/assets/index-CyGVGsQH.js   220.14 kB │ gzip: 68.86 kB

✓ built in 96ms

সত্যিকারের run · Node 24.15.0, Vite 8.3.5, React 19.3.1 · একটি স্থানীয় run-এর সংখ্যা, সাধারণ ফল নয়

main.tsx — যেখানে React জীবনে আসে

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

দুটি আলাদা package লক্ষ করুন। react-এ থাকে component আর hook-এর মূল ধারণা। react-dom/client জানে browser-এর DOM কীভাবে বদলাতে হয়। এই ভাগের জন্যই একই React ধারণা ফোনের অ্যাপেও চলে, শুধু নিচের অংশ আলাদা। আর ! চিহ্নটি TypeScript-কে বলে “এটি null হবে না”। এটি পর্ব ৬-এর সেই চলার সময়ে যাচাই নেই ধরনের প্রতিশ্রুতি। প্রতিশ্রুতি ভাঙলে কী হয়, আমরা id ভুল লিখে দেখেছি:

Target container is not a DOM element.

সত্যিকারের run · getElementById('roott') লিখে Edge-এ dev server চালিয়ে · tsc এই ভুল ধরে না, পাতা খালি থাকে

৫ · createRoot থেকে DOM — একটি render-এর যাত্রা

রেস্তোরাঁর কথা ভাবুন। ওয়েটার অর্ডার লিখে রান্নাঘরে দেন (render-এর অনুরোধ)। রান্নাঘরে খাবার তৈরি হয় (render), তখনও টেবিলে কিছু নেই। সব তৈরি হলে একবারে টেবিলে আসে (commit). এই দুটি ধাপ আলাদা, আর এটিই React বোঝার চাবি।

আমাদের project-এ component আছে ছয়টি: App, ProductPage, Header, ProductCard, PriceTag, StockBadge. প্রথম render ধাপে ধাপে দেখুন।

1<div id="root"></div>2const root = createRoot(el);3root.render(<App />);4App() → ProductPage() → …5DOM-এ ট্যাগ বসানো6useEffect থাকলে চলে

“বর্ণনা” কথাটি একটু অদ্ভুত লাগতে পারে। তাই এবার একটি খেলনা React বানিয়ে দেখি। এটি আসল React-এর কোড নয়। এটি শুধু দেখায়, ফাংশন থেকে বর্ণনা আর বর্ণনা থেকে HTML কীভাবে আসে।

// Toy only: real React does far more. This shows the core idea.
const h = (type, props, ...kids) => ({ type, props: props ?? {}, kids });

function PriceTag({ taka }) {
  return h('b', null, 'Tk ' + taka);
}
function Card({ name, taka }) {
  return h('article', null, h('h2', null, name), h(PriceTag, { taka }));
}
function App() {
  return h('main', null, h(Card, { name: 'Rice', taka: 120 }), h(Card, { name: 'Dal', taka: 140 }));
}

// "Render": call each function, turn the tree into text
function expand(node, depth = 0) {
  if (typeof node === 'string') return node;
  if (typeof node.type === 'function') {
    console.log(' '.repeat(depth * 2) + 'call ' + node.type.name);
    return expand(node.type(node.props), depth + 1);
  }
  const inner = node.kids.map((kid) => expand(kid, depth + 1)).join('');
  return `<${node.type}>${inner}</${node.type}>`;
}

const element = h(App, null);
console.log('element:', JSON.stringify(h('b', null, 'Tk 120')));
console.log('type is a function?', typeof element.type === 'function');
const html = expand(element);
console.log('commit:', html);

JSX যে এই ধরনের ফাংশন-ডাকে বদলায়, তার প্রমাণ dev server-ই দেয়। ProductCard.tsx চাইলে browser JSX পায় না, পায় এটি:

export function ProductCard() {
    return /* @__PURE__ */ _jsxDEV("article", {
        className: "card",
        children: [
            /* @__PURE__ */ _jsxDEV("h2", { children: "মিনিকেট চাল, ১ কেজি" }, …),
            /* @__PURE__ */ _jsxDEV(PriceTag, {}, …),
            /* @__PURE__ */ _jsxDEV(StockBadge, {}, …)
        ]
    }, …);
}

সত্যিকারের run · curl দিয়ে Vite 8.3.5 dev server থেকে আনা, লম্বা অংশ ছাঁটা

দেখুন, "article" একটি লেখা, কিন্তু PriceTag একটি ফাংশনের নাম। ছোট-বড় হাতের নিয়মের কারণ এখানেই।

৬ · Purity — একই ইনপুটে একই ফল

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

• নিজের কাজে থাকে: ডাকার আগে থেকে থাকা কোনো ভ্যারিয়েবল বা object বদলায় না।
• একই ইনপুটে একই ফল: একই props, state আর context পেলে একই বর্ণনা ফেরত দেয়।

React কেন এতে জোর দেয়? কারণ render শুধু হিসাব। React চাইলে সেটি বেশি বার করতে পারে, মাঝপথে ফেলেও দিতে পারে। ফাংশন বাইরের কিছু বদলালে প্রতিটি বাড়তি ডাকে হিসাব নষ্ট হয়। এবার ভাঙা উদাহরণটি দেখুন। “বাজারঘর”-এর টিকিট নম্বর একটি বাইরের ভ্যারিয়েবল থেকে আসছে। React.dev-এর guest counter উদাহরণের এটি একটি দেশি রূপ।

1let guest = 0;2function OrderTicket() {3  guest = guest + 1;4  return <p>অর্ডার #{guest}</p>;5}6// সমাধান7function OrderTicket({ n }) {8  return <p>অর্ডার #{n}</p>;9}

নিচের ঘরে একই ভুল চালিয়ে দেখুন। এই ঘরের React production build, তাই StrictMode এখানে দুবার ডাকে না। আমরা কাজটি হাতে করছি: একই পাতা দুবার render করছি, যেমনটি যেকোনো state বদলে হয়।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
let guest = 0;                     // component-এর বাইরে
function BadTicket() {
  guest = guest + 1;               // ভুল: render-এ বাইরের মান বদলানো
  return <p>bad #{guest}</p>;
}
function GoodTicket({ n }) {       // সব তথ্য ইনপুট থেকে
  return <p>good #{n}</p>;
}
function Page() {
  return (
    <>
      <BadTicket />
      <BadTicket />
      <GoodTicket n={1} />
      <GoodTicket n={2} />
    </>
  );
}
const el = document.getElementById('root');
const root = createRoot(el);
for (let pass = 1; pass <= 2; pass++) {
  ReactDOM.flushSync(() => root.render(<Page />));
  const seen = [...el.children].map((p) => p.textContent);
  console.log('render ' + pass + ':', seen.join(', '));
}
</script>

তাহলে কী চলবে, কী চলবে না

Side effect নিষিদ্ধ নয়, শুধু তার জায়গা আলাদা। ক্লিকের পরের কাজ যায় event handler-এ (পর্ব ১০), কারণ সেটি render নয়। আর কোনো event ছাড়াই বাইরের সিস্টেমের সঙ্গে মিলতে হলে আছে useEffect (পর্ব ১৩). তবে react.dev একে শেষ উপায় হিসেবেই দেখতে বলে।

৭ · StrictMode — dev-এ কেন দুবার চলে

গার্মেন্টসের রপ্তানির আগে পরীক্ষক একই শার্ট দুবার টেনে দেখেন। ভালো সেলাই টেকে, দুর্বল সেলাই খুলে যায়। শার্ট ক্রেতার কাছে যায় পরীক্ষা ছাড়াই, কারণ পরীক্ষাটি কারখানার ভেতরের। StrictMode সেই পরীক্ষক। এটি পর্দায় কিছু দেখায় না, শুধু dev-এ ভুল বের করে আনে। আমরা একই ভাঙা কোড তিনভাবে চালিয়েছি, সঙ্গে একটি useEffect রেখে:

render App
render App
render OrderTicket, guest = 1
render OrderTicket, guest = 2
render OrderTicket, guest = 3
render OrderTicket, guest = 4
render OrderTicket, guest = 5
render OrderTicket, guest = 6
effect setup
effect cleanup
effect setup

পর্দায়: অর্ডার #2, অর্ডার #4, অর্ডার #6

render App
render OrderTicket, guest = 1
render OrderTicket, guest = 2
render OrderTicket, guest = 3
effect setup

পর্দায়: অর্ডার #1, অর্ডার #2, অর্ডার #3

render App
render OrderTicket, guest = 1
render OrderTicket, guest = 2
render OrderTicket, guest = 3
effect setup

পর্দায়: অর্ডার #1, অর্ডার #2, অর্ডার #3

সত্যিকারের run · Vite 8.3.5, React 19.3.1, Edge console থেকে নেওয়া · Production-এর main.tsx-এ StrictMode ছিল, তবু দ্বিগুণ হয়নি

Effect কেন দুবার? বাস্তবে ব্যবহারকারী পাতা ছেড়ে যান, আবার ফেরেন। ধরুন component কথা বলার জন্য একটি chat সংযোগ খোলে কিন্তু বন্ধ করে না। প্রতিবার ফিরে আসায় একটি করে সংযোগ জমবে, আর বাগটি দেখা দেবে দুই সপ্তাহ পরে। StrictMode প্রথম মুহূর্তেই একবার বন্ধ করে আবার খোলে। Cleanup ঠিক থাকলে ব্যবহারকারী কোনো পার্থক্য টের পান না। ঠিক না থাকলে ভুলটি সঙ্গে সঙ্গে চোখে পড়ে।

আরও এগিয়ে থাকা পাঠকের জন্য: Rules of React আর React Compiler

React.dev-এ Rules of React তিন ভাগে লেখা। এক, component আর hook pure হবে: props ও state অপরিবর্তনীয়, JSX-এ পাঠানো মান পরে বদলানো যাবে না। দুই, React-ই component ডাকবে: আপনি PriceTag() হাতে ডাকবেন না, hook-কে মানের মতো ঘোরাবেন না। তিন, Rules of Hooks, যা আসবে পর্ব ১৪-এ।

এই নিয়ম এখন শুধু উপদেশ নয়, যন্ত্রও যাচাই করে। eslint-plugin-react-hooks-এর বর্তমান preset আমাদের ভাঙা কোড ধরে ফেলেছে:

$ npx eslint src

~/bazarghar-web\src\components\BadTotal.tsx
  3:16  error  Error: Cannot call impure function during render
…
> 3 |   const when = Date.now()
    |                ^^^^^^^^^^ Cannot call impure function
…  react-hooks/purity

~/bazarghar-web\src\components\OrderTicket.tsx
  4:3  error  Error: Cannot reassign variables declared outside of the component/hook
…
> 4 |   guest = guest + 1
    |   ^^^^^ `guest` cannot be reassigned
…  react-hooks/globals

✖ 2 problems (2 errors, 0 warnings)

সত্যিকারের run · ESLint 10.14.0, eslint-plugin-react-hooks 7.1.1, TypeScript 6.0 · ছাঁটা অংশ “…” চিহ্নিত

তবে linter সব ধরে না। এই পরীক্ষার BadTotal component-এর ২ নম্বর লাইনে ছিল prices.push(60), যেখানে prices একটি prop. এই লাইন নিয়ে কোনো error আসেনি, আর শুধু ওই লাইন রেখে চালালেও ESLint চুপ ছিল। তাই নিয়মটি আপনাকেও জানতে হবে।

React Compiler একটি build-সময়ের টুল। এটি কোড পড়ে নিজে থেকে memoization বসায়, মানে আগের ফল জমা রেখে অকারণ হিসাব কমায়। ৭ অক্টোবর ২০২৫-এ v1.0 stable হিসেবে প্রকাশ পায়। লেখার সময়ে npm-এ babel-plugin-react-compiler 1.0.0; নতুন project-এর আগে react.dev দেখে নিন, কারণ Vite plugin-এর পদ্ধতি বদলেছে। আমাদের project-এ চালিয়ে dev server থেকে PriceTag দেখলে এমন আসে:

export function PriceTag() {
    const $ = _c(2);
    …
    let t0;
    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
        t0 = /* @__PURE__ */ _jsxDEV("p", { className: "price", children: "৳১২০" }, …);
        $[1] = t0;
    …

সত্যিকারের run · babel-plugin-react-compiler 1.0.0, @vitejs/plugin-react 6.1.2, @rolldown/plugin-babel 0.2.4 · ছাঁটা

$ হলো component-এর নিজের জমা রাখার তালিকা। একবার তৈরি JSX পরের render-এ আবার ব্যবহার হয়। Purity এখানে শর্ত: ফাংশন pure না হলে জমা করা ফল ভুল হতে পারে। Build-এ JavaScript 220.14 kB থেকে 220.84 kB হয়েছে (gzip 68.86 থেকে 69.02 kB), তবে এই খুদে অ্যাপে এটি সাধারণ ফল নয়। এই পর্বের কোডে Compiler ব্যবহার করা হবে না। Performance-এর পুরো হিসাব পর্ব ২৩-এ।

৮ · React DevTools — গাছটি চোখে দেখা

Browser-এর Elements প্যানেলে আপনি div আর article দেখেন, component দেখেন না। React DevTools extension সেই অভাব মেটায়। Chrome, Firefox আর Edge-এর store-এ আছে। অন্য browser-এর জন্য আছে react-devtools npm package. বসানোর পরে React পাতায় DevTools-এ দুটি নতুন প্যানেল আসে।

Dev server চালালেই console-এ React নিজে এই পরামর্শ দেয়: Download the React DevTools for a better development experience. আমাদের স্বয়ংক্রিয় run-এ extension বসানো ছিল না। তাই গাছটি আমরা একটি script দিয়ে React-এর ভেতরের তথ্য (fiber) থেকে পড়েছি। Components প্যানেলেও গঠন এমনই দেখার কথা, শুধু চেহারা আলাদা।

App
  ProductPage
    Header
    ProductCard
      PriceTag
      StockBadge

<header><h1>বাজারঘর</h1></header>
<main>
  <article class="card">
    <h2>মিনিকেট চাল, ১ কেজি</h2>
    <p class="price">৳১২০</p>
    <span class="stock">স্টকে আছে</span>
  </article>
</main>

h
  m
  m
  m

সত্যিকারের run · Edge, Vite 8.3.5 · তৃতীয় ট্যাবটি টিকিটের উদাহরণের production build থেকে নেওয়া

তিনটি জিনিস মিলিয়ে দেখুন। এক, Fragment কোনো ছাপ রাখেনি: #root-এর সরাসরি সন্তান header আর main. দুই, component-এর গাছ আর DOM-এর গাছ এক নয়। App-এর কোনো নিজস্ব ট্যাগই নেই। তিন, production-এ নাম ছোট হয়ে h আর m হয়ে যায়, কারণ minify নাম ছোট করে। এজন্যই production-এর error বার্তা পড়তে source map লাগে। সেই আলোচনা পর্ব ৮৩-তে।

৯ · ফাইলের অভ্যাস, জোড়া দেওয়া, আর React যা করে না

মুদি দোকানের গুদামে চাল এক তাকে, তেল আরেক তাকে থাকলে নতুন কর্মচারীও জিনিস খুঁজে পান। কোডেও তাই। React কোনো ফোল্ডার-নিয়ম চাপায় না, দলের ওপর ছেড়ে দেয়। “বাজারঘর”-এর জন্য আমরা এই অভ্যাসগুলো রাখব:

• এক ফাইলে একটি মূল component, ফাইলের নাম আর component-এর নাম এক: ProductCard.tsx.
• components/-এ বারবার ব্যবহারের টুকরো, pages/-এ পুরো পাতা। বড় হলে ব্যবসার ভাগ ধরে সাজানো যায়, যেমন features/cart/.
• Named export: export function PriceTag. নাম এক থাকে, খুঁজে পেতে সুবিধা। অনেক দল default export-ও ব্যবহার করে, টেমপ্লেটের App-এর মতো। এটি রুচির ব্যাপার, দলে এক রকম রাখুন।
• Component-এর ভেতরে component ঘোষণা করবেন না। প্রতি render-এ সেটি নতুন ফাংশন হয়, ফলে React তাকে নতুন জিনিস ভাবে। কেন, তা পর্ব ১৫-এ।
• Component হাতে ডাকবেন না: {PriceTag()} নয়, <PriceTag />.

এবার ছোট টুকরো জুড়ে একটি পাতা বানাই। এখানে সামান্য props দেখবেন: ফাংশনের parameter-এর মতো বাইরে থেকে মান আসা। খুঁটিনাটি পর্ব ৯-এ।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const Header = () => <header><h1>বাজারঘর</h1></header>;
const Footer = () => <footer>ঢাকা, বাংলাদেশ</footer>;
const PriceTag = ({ taka }) => <b>৳{taka}</b>;

function ProductCard({ name, taka }) {
  return <p>{name}: <PriceTag taka={taka} /></p>;
}
function ProductPage() {
  useEffect(() => {
    const kids = [...document.getElementById('root').children];
    console.log('root children:', kids.map((k) => k.tagName).join(', '));
  }, []);
  return (
    <>
      <Header />
      <main>
        <ProductCard name="চাল" taka={120} />
        <ProductCard name="ডাল" taka={140} />
      </main>
      <Footer />
    </>
  );
}
createRoot(document.getElementById('root')).render(<ProductPage />);
</script>

React যা করে না

React নিজেকে UI-এর library বলে, framework নয়। রান্নার ভালো চুলা কিনলে বাজার, ওয়েটার আর হিসাবরক্ষক আসে না। Vite দিয়ে শুরু করলে নিচের কাজগুলোর জন্য আলাদা ব্যবস্থা লাগবে।

React.dev নতুন production অ্যাপের জন্য framework-এর দিকেই ইঙ্গিত করে, আর বলে শুধু build টুল দিয়ে শুরু করলে পরে অনেক কিছু নিজেকেই জোড়া দিতে হবে। আমরা তবু Vite-এ শুরু করছি, কারণ এখানে শেখার মতো সব টুকরো আলাদা চোখে পড়ে। বাস্তবে অনেক অ্যাডমিন প্যানেল বা লগইন-এর পেছনের অ্যাপে Vite-এর SPA-ই যথেষ্ট, এ নিয়ে দলগুলোর মত আলাদা। Stack বাছাইয়ের ছক আছে পর্ব ৮৫-তে।

১০ · AI-এর যুগে React শেখা

AI খুব দ্রুত component লিখে দেয়। সমস্যা হলো, ইন্টারনেটে এক দশকের পুরোনো React কোড আছে, আর AI সেখান থেকেই শিখেছে। তাই কোড চলার মতো দেখালেও version-এর সঙ্গে না-ও মিলতে পারে।

AI-এর লেখা component হাতে পেলে

• package.json-এ React-এর version দেখে নিয়েছি, সেই version-এর docs-এর সঙ্গে API মিলিয়েছি
• npm run build চালিয়েছি; শুধু dev-এ চলা যথেষ্ট ধরিনি, কারণ dev type যাচাই করে না
• Console-এ লাল বার্তা নেই, আর StrictMode চালু রেখেই পরীক্ষা করেছি
• Render-এর ভেতরে বাইরের কিছু বদলাচ্ছে কি না diff পড়ে দেখেছি
• নতুন প্রতিটি package-এর দরকার আর আসল নাম যাচাই করেছি
• কোডে কোনো secret পেস্ট করিনি, কারণ frontend-এর সবকিছু ব্যবহারকারীর হাতে যায়