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

এই একটি পেজ যদি আপনি মন দিয়ে পড়েন আর বুঝে প্রাকটিস করেন, বিশ্বাস করুন, React-এর প্রায় ৮০% জরুরি কনসেপ্ট আপনার হাতের মুঠোয় চলে আসবে, যা আপনার প্রতিদিনের কোডিং এ লাগবে।

এই পাঠ থেকে আপনি কি কি শিখবেন

• কীভাবে কম্পোনেন্ট বানিয়ে একটার ভেতরে আরেকটা রাখতে হয়।
• কীভাবে JSX দিয়ে মার্কআপ (HTML-এর মতো কোড) লিখতে হয় এবং স্টাইল যোগ করতে হয়।
• কীভাবে স্ক্রিনে ডেটা দেখাতে হয়।
• কীভাবে শর্ত অনুযায়ী UI Element রেন্ডার করতে হয়।
• কীভাবে তালিকা (Lists) রেন্ডার করতে হয়।
• কীভাবে ইউজারের কাজে (Events) সাড়া দিয়ে স্ক্রিন আপডেট করতে হয়।
• কীভাবে কম্পোনেন্টগুলোর মধ্যে ডেটা শেয়ার করতে হয়।

কম্পোনেন্ট বানাই ও একটার ভেতরে আরেকটা রাখি

React অ্যাপ তৈরি হয় অনেকগুলো ছোট ছোট কম্পোনেন্ট (Component) দিয়ে। একটা কম্পোনেন্ট হলো আপনার ইউজার ইন্টারফেসের (UI) একটা ছোটো টুকরো, যার নিজস্ব লজিক এবং চেহারা আছে। একটি কম্পোনেন্টের দুইটি অংশ, ১। চেহারা যেটা পাবলিক দেখে ২। লজিক যেটা ব্যবহারকারীর সাথে কথা বলে। কম্পোনেন্ট একটা ছোট্ট বাটন থেকে শুরু করে পুরো একটা পেজও হতে পারে।

React কম্পোনেন্ট --> একটা সাধারণ জাভাস্ক্রিপ্ট ফাংশন, যা স্ক্রিনে ব্যবহারকারীকে দেখানোর জন্য কিছু মার্কআপ রিটার্ন করে:

function MyButton() {
  return <button>আমি একটা বাটন</button>;
}

এখন আপনি এই MyButton কম্পোনেন্টটাকে অন্য আরেকটা কম্পোনেন্টের ভেতরে বসিয়ে দিতে পারেন:

export default function MyApp() {
  return (
    <div>
      <h1>আমার অ্যাপে স্বাগতম!</h1>
      <MyButton />
    </div>
  );
}

গুরুত্বপূর্ণ কথা: খেয়াল করেছেন, <MyButton />-এর নামটা বড় হাতের M অক্ষর দিয়ে শুরু হয়েছে? এটাই React কম্পোনেন্ট চেনার উপায়। React কম্পোনেন্টের নাম সবসময় বড় হাতের অক্ষর দিয়ে শুরু হবে, আর HTML ট্যাগ সাধারণত (<div>, <p>) ছোট হাতের হয়।

export default কীওয়ার্ডটি দিয়ে বোঝানো হয় যে, এই ফাইলের প্রধান কম্পোনেন্ট কোনটি। জাভাস্ক্রিপ্টের সিনট্যাক্সগুলো নতুন মনে হলে MDN (opens in a new tab) বা javascript.info (opens in a new tab) থেকে দারুণভাবে শিখে নিতে পারেন।

JSX দিয়ে মার্কআপ লেখা

HTML-এর মতো দেখতে, তাকে বলে JSX। এটা ব্যবহার করা বাধ্যতামূলক না, তবে বেশিরভাগ React ডেভেলপার JSX ব্যবহার করে কারণ এটা কোড লেখা অনেক সহজ করে দেয়।

JSX সাধারণ HTML-এর চেয়ে একটু বেশি কড়া জিনিস!

১। আপনাকে <br>-এর মতো ট্যাগগুলো <br /> এভাবে বন্ধ করতে হয়। ২। একটা কম্পোনেন্ট থেকে একাধিক JSX ট্যাগ সরাসরি রিটার্ন করা যায় না। সেগুলোকে অবশ্যই একটা প্যারেন্ট ট্যাগের (<div>...</div>) বা একটা অদৃশ্য র‍্যাপারের (<>...</>) ভেতরে মুড়িয়ে দিতে হয়। ৩। JSX-এ class অ্যাট্রিবিউটের বদলে className ব্যবহার করতে হয় (কারণ, class জাভাস্ক্রিপ্টের নিজস্ব শব্দ)। ৪। HTML-এর মতোই অ্যাট্রিবিউট থাকে, তবে কিছু অ্যাট্রিবিউটের নাম একটু আলাদা (যেমন: for → htmlFor, tabindex → tabIndex)। ৫। html এর মধ্যেই লজিক লেখা যায়। ৬। JSX-এ সবসময় camelCase ব্যবহার করতে হয় (যেমন: onclick → onClick, tabindex → tabIndex)।

function AboutPage() {
  return (
    // এই <>...</> একটা অদৃশ্য বাক্স
    <>
      <h1>আমার সম্পর্কে</h1>
      <p>
        হ্যালো বন্ধুরা,
        <br />
        কেমন আছেন?
      </p>
    </>
  );
}

HTML কোডকে JSX-এ রূপান্তর করতে চাইলে অনলাইন কনভার্টার (opens in a new tab) ব্যবহার করতে পারেন।

স্টাইল যোগ করা

React-এ স্টাইল যোগ করতে আমরা HTML-এর class অ্যাট্রিবিউটের বদলে className ব্যবহার করি। কারণ, class শব্দটি জাভাস্ক্রিপ্টের একটি নিজস্ব (রিজার্ভড) শব্দ।

<img className="avatar" />

আর তারপর, আপনার CSS ফাইলে (styles.css) এই ক্লাসের জন্য স্টাইল লেখেন:

/* আপনার CSS ফাইলে */
.avatar {
  border-radius: 50%;
}

আমরা React এপ্লিকেশনে কয়েকভাবে স্টাইল যোগ করতে পারি:

১। আপনি চাইলে সরাসরি JSX-এর মধ্যেই ইনলাইন CSS লিখে স্টাইল করতে পারেন। তবে খেয়াল করবেন — এটা HTML-এর মতো না। এখানে CSS কোডটা একটা জাভাস্ক্রিপ্ট অবজেক্ট হিসেবে দিতে হবে।

✅ এই নিয়মটি দেখুন:

const styleObject = {
  border: "2px dashed red",
  backgroundColor: "lightyellow", // CSS-এর background-color → camelCase এ backgroundColor
};
 
return <div style={styleObject}>আমি ইনলাইন স্টাইলড!</div>;

অথবা সরাসরি JSX-এর মধ্যে:

<div style={{ border: "1px solid gray", padding: "10px" }}>
  ইনলাইন স্টাইলিং শিখছি!
</div>

❗ এক নজরে নিয়মগুলো মনে দেখুন:

1. CSS প্রপার্টির নামগুলো camelCase করতে হয়। যেমনঃ background-color → backgroundColor, font-size → fontSize

2. স্টাইলের ভ্যালুগুলো স্ট্রিং হিসেবে দিতে হয় (যেমন "10px", "red")

3. JSX-এ style={{}} মানে হলো — বাইরের {} দিয়ে JSX থেকে জাভাস্ক্রিপ্টে ঢুকছি, আর ভেতরের {} হচ্ছে জাভাস্ক্রিপ্ট অবজেক্ট।

কখন ইনলাইন স্টাইল ব্যবহার করবেন?

• যদি স্টাইলটা খুব ছোট হয় (যেমন margin, padding, border ইত্যাদি)
• যদি ডায়নামিক মান বসাতে চাও (যেমন: condition অনুযায়ী background রঙ)

📦 স্ক্রিনে ডেটা দেখানো (displaying-data)

JSX (JavaScript XML)-এর সবচেয়ে মজার বিষয় হলো: আপনি এর ভেতরে সরাসরি জাভাস্ক্রিপ্ট কোড লিখতে পারেন। এই কাজটা করা হয় {} — কার্লি ব্র্যাকেটের মাধ্যমে।

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

🎯 কার্লি ব্র্যাকেট {} দিয়ে কী হয়?

যেমন ধরেন, আপনার একটা ইউজার অবজেক্ট আছে:

const user = {
  name: "Hedy Lamarr",
};

আপনি চাইছেন, সেই name টা <h1> ট্যাগে দেখাতে:

return <h1>{user.name} // user অবজেক্টের name প্রপার্টি দেখানো হচ্ছে</h1>;

👉 এখানে {user.name} মানে হলো — JSX-এ HTML-এর মতো দেখতে ট্যাগের ভিতরে JavaScript ভ্যারিয়েবল বসিয়ে দেওয়া।

JSX-এর অ্যাট্রিবিউটেও {} ব্যবহার করা যায়

JSX-এ HTML-এর মতোই অ্যাট্রিবিউট (যেমন src, alt, style ইত্যাদি) থাকে। কিন্তু যদি আপনি অ্যাট্রিবিউটে জাভাস্ক্রিপ্ট ভ্যালু বসাতে চান, তাহলে সেটাও {} দিয়ে করতে হবে।

❌ ভুল:

<img src="user.imageUrl" /> // এটা src-এ ঠিকভাবে ভ্যালু দেবে না

✅ ঠিক:

<img src={user.imageUrl} /> // এখানে React বুঝবে, এটা ভ্যারিয়েবল

উদাহরণ JS Expression:

const a = 5;
const b = 10;
 
return (
  <div>
    {/* সরাসরি গাণিতিক হিসাব */}
    <p>5 + 10 = {a + b}</p>
 
    {/* স্ট্রিং যোগ */}
    <p>{"Hello " + "World"}</p>
 
    {/* একটা জাভাস্ক্রিপ্ট এক্সপ্রেশন */}
    <p>{a * b}</p>
  </div>
);

এখানে {a + b}, {"Hello " + "World"}, {a * b} সবই এক্সপ্রেশন। এগুলো JSX-এ সরাসরি ভ্যালু হিসেবে রেন্ডার হবে।

JSX-এ ফাংশনের রিটার্ন ভ্যালু ব্যবহার করা যায়

তুমি ফাংশন কলও করতে পারো JSX-এ, আর তার রিটার্ন ভ্যালু দেখাতে পারো।

function greet(name) {
  return "Hello, " + name + "!";
}
 
export default function Profile() {
  const userName = "Mojnu";
 
  return (
    <div>
      <h1>{greet(userName)}</h1>
    </div>
  );
}

এখানে greet(userName) কল হচ্ছে JSX-এর মধ্যে, আর ফাংশনের রিটার্ন "Hello, Mojnu!" সরাসরি <h1> ট্যাগের মধ্যে দেখাবে।

উদাহরণ: JS Expression + Function Return Value

const user = {
  name: "Mojnu",
  age: 26,
};
 
function getYearOfBirth(age) {
  const currentYear = new Date().getFullYear();
  return currentYear - age;
}
 
export default function Profile() {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Born in {getYearOfBirth(user.age)}</p>
      <p>Next year, you will be {user.age + 1} years old.</p>
    </div>
  );
}

• {getYearOfBirth(user.age)} — ফাংশন কল করে তার রিটার্ন দেখাচ্ছে
• {user.age + 1} — এক্সপ্রেশন হিসেবে বয়সের ওপর গাণিতিক অপারেশন

স্ক্রিনে শর্ত দিয়ে কিছু দেখানো

React-এ শর্তসাপেক্ষে কিছু দেখানোর জন্য আলাদা কোনো সিনট্যাক্স নেই। তুমি সাধারণ জাভাস্ক্রিপ্টের মতোই if স্টেটমেন্ট, কন্ডিশনাল ? অপারেটর, অথবা লজিক্যাল && অপারেটর ব্যবহার করতে পারো।

// if স্টেটমেন্ট ব্যবহার করে
let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return <div>{content}</div>;
 
// অথবা আরও স্মার্ট ভাবে, কন্ডিশনাল (?) অপারেটর দিয়ে
return <div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>;
 
// যখন শুধু if লাগে (else দরকার নেই), && অপারেটর দিয়ে
return <div>{isLoggedIn && <AdminPanel />}</div>;

UI এ তালিকা দেখানো

UI এ কোনো তালিকা বা অ্যারে দেখানোর জন্য আপনি জাভাস্ক্রিপ্টের map() ফাংশন ব্যবহার করতে পারেন।

const products = [
  { title: "ফুলকপি", id: 1 },
  { title: "রসুন", id: 2 },
  { title: "পেঁপে", id: 3 },
];
 
const listItems = products.map((product) => (
  <li key={product.id}>{product.title}</li>
));
 
return <ul>{listItems}</ul>;

খুব জরুরি কথা: তালিকা দেখানোর সময় প্রত্যেকটা আইটেমের জন্য একটা ইউনিক key দিতেই হবে। এই key অনেকটা ক্লাসের রোল নম্বরের মতো। React এটা দিয়ে বুঝতে পারে তালিকার কোন আইটেম কোনটা, যা পারফরম্যান্সের জন্য খুব দরকারি। সাধারণত ডেটাবেসের ID-কে key হিসেবে ব্যবহার করা হয়।

ইউজারের এর রিকুয়েস্টে সাড়া দেওয়া

ইউজারের বিভিন্ন কাজের (যেমন: ক্লিক) জন্য আপনি ইভেন্ট হ্যান্ডলার ফাংশন লিখতে পারেন।

function MyButton() {
  // এটা হলো ইভেন্ট হ্যান্ডলার ফাংশন
  function handleClick() {
    alert("আপনি আমাকে ক্লিক করেছেন!");
  }
 
  return (
    // onClick ইভেন্টে ফাংশনটা জুড়ে দিলাম
    <button onClick={handleClick}>আমাকে ক্লিক করো</button>
  );
}

খেয়াল রাখবেন, onClick={handleClick} লিখতে হবে, onClick={handleClick()} নয়। কারণ আমরা ফাংশনটাকে React-এর হাতে তুলে দিচ্ছি, যেন সে ক্লিকের পর কল করতে পারে; আমরা নিজে এখনই কল করছি না।

স্ক্রিন আপডেট করা

যদি কোনো কম্পোনেন্টকে কোনো তথ্য "মনে রাখতে" হয় (যেমন, একটা বাটন কতবার ক্লিক করা হলো), তখন আমরা ব্যবহার করি স্টেট (State)। স্টেট হলো একটা কম্পোনেন্টের মেমরি।

স্টেট ব্যবহার করার জন্য React আমাদের useState নামে একটা বিশেষ ফাংশন বা হুক (Hook) দেয়।

import { useState } from "react";
 
function MyButton() {
  const [count, setCount] = useState(0);
 
  function handleClick() {
    setCount(count + 1);
  }
 
  return <button onClick={handleClick}>ক্লিক হয়েছে {count} বার</button>;
}

useState(0) আমাদের দুটো জিনিস দেয়:

1. count: বর্তমান স্টেট (যার প্রাথমিক মান 0)।
2. setCount: স্টেট পরিবর্তন করার জন্য একটি ফাংশন।

যখনই setCount কল হয়, React কম্পোনেন্টটাকে নতুন ডেটা দিয়ে আবার রেন্ডার করে এবং স্ক্রিনে আপডেট দেখায়। আপনি যদি একই কম্পোনেন্ট একাধিকবার ব্যবহার করেন, প্রত্যেকটা কম্পোনেন্ট তার নিজস্ব স্টেট আলাদাভাবে মনে রাখবে।

হুকস ব্যবহার করা

use দিয়ে শুরু হওয়া ফাংশনগুলোকে হুকস (Hooks) বলে। useState হলো React-এর একটি বিল্ট-ইন হুক। হুকস ব্যবহারের কিছু নিয়ম আছে, যেমন—এগুলোকে শুধুমাত্র কম্পোনেন্টের একদম শুরুতে (টপ-লেভেলে) কল করা যায়, কোনো লুপ বা কন্ডিশনের ভেতরে নয়।

কম্পোনেন্টগুলোর মধ্যে ডেটা শেয়ার করা

অনেক সময় একাধিক কম্পোনেন্টের একই ডেটা ব্যবহার করার এবং একসাথে আপডেট হওয়ার দরকার হয়। এর জন্য, আমরা স্টেটকে চাইল্ড কম্পোনেন্ট থেকে বের করে তাদের সাধারণ প্যারেন্ট কম্পোনেন্টে নিয়ে যাই। এই পদ্ধতিকে বলে লিফটিং স্টেট আপ (Lifting State Up)।

এরপর প্যারেন্ট কম্পোনেন্ট সেই স্টেট এবং স্টেট পরিবর্তনের ফাংশন তার চাইল্ড কম্পোনেন্টগুলোতে প্রপস (props) হিসেবে পাস করে দেয়।

ধাপ ১: স্টেটকে প্যারেন্টে (MyApp) নিয়ে আসা।

export default function MyApp() {
  const [count, setCount] = useState(0);
 
  function handleClick() {
    setCount(count + 1);
  }
  // ...
}

ধাপ ২: প্যারেন্ট থেকে চাইল্ডে স্টেট ও ফাংশনকে props হিসেবে পাস করা।

export default function MyApp() {
  // ... স্টেট ও ফাংশন এখানে আছে
  return (
    <div>
      <h1>একসাথে আপডেট হওয়া কাউন্টার</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

ধাপ ৩: চাইল্ড কম্পোনেন্টে (MyButton) সেই props গ্রহণ ও ব্যবহার করা।

function MyButton({ count, onClick }) {
  return <button onClick={onClick}>ক্লিক হয়েছে {count} বার</button>;
}

এখন যেকোনো একটা বাটনে ক্লিক করলেই প্যারেন্টের স্টেট আপডেট হবে এবং সেই আপডেট হওয়া মান দুটো চাইল্ডই স্ক্রিনে দেখাবে।

এরপর কী?

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

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