React কী? অ-ডেভেলপারদের জন্য সহজ ভাষায় একটি গাইড

React হলো ইউজার ইন্টারফেস বানানোর একটি JavaScript লাইব্রেরি — অ্যাপের সেই অংশ যা মানুষ দেখে ও ক্লিক করে। আপনি স্ক্রিনগুলো কম্পোনেন্ট নামের পুনঃব্যবহারযোগ্য অংশ দিয়ে তৈরি করেন, যেমন একটি বাটন, একটি পণ্যের কার্ড বা একটি পুরো পেজ, আর React স্ক্রিনকে আপনার ডেটার সাথে মিলিয়ে রাখে: ডেটা বদলালে React পেজের সেই অংশগুলো আপডেট করে যা ওই ডেটার উপর নির্ভরশীল। এটি Facebook (এখন Meta)-এ তৈরি, ওপেন সোর্স, এবং ওয়েব অ্যাপ বানানোর সবচেয়ে বহুল ব্যবহৃত উপায়গুলোর একটি।

AI দিয়ে বানানোর সময় এটি কেন গুরুত্বপূর্ণ

AI টুল দিয়ে ওয়েব অ্যাপ বানালে এটি React-এ লেখা হওয়ার ভালো সম্ভাবনা আছে। অনেক AI অ্যাপ builder ডিফল্টভাবে React ব্যবহার করে, কারণ এটি জনপ্রিয়, ভালোভাবে ডকুমেন্টেড, এবং AI মডেল শেখার জন্য বিপুল React কোড রয়েছে।

AI দিয়ে বানাতে আপনাকে React লিখতে হবে না। তবে সামান্য জানলে এটি আপনাকে সাহায্য করে:

• পরিবর্তন সুনির্দিষ্টভাবে বর্ণনা করতে। "ProductCard কম্পোনেন্টে দাম বোল্ড করো" বলা "কোথাও দাম আলাদা করে দেখাও" বলার চেয়ে স্পষ্ট।
• ত্রুটি বুঝতে। "Cannot read properties of undefined" বা "Too many re-renders" বার্তাগুলো তখন অর্থবহ হয়।
• সঠিক সিদ্ধান্ত নিতে। সাধারণ React অ্যাপ ব্রাউজারে রেন্ডার হয়, যা সার্চে দৃশ্যমানতা ও প্রথমবার লোড হওয়ার গতিকে প্রভাবিত করে। এটি জানলে আপনি বুঝতে পারেন কখন ভিন্ন সেটআপ চাইবেন।
• পরে ডেভেলপারদের সাথে কাজ করতে। React একটি সাধারণ দক্ষতা, তাই একজন ডেভেলপার সাধারণত একটি React কোডবেস সহজে ধরে নিতে পারেন।

একটি দৈনন্দিন উপমা

LEGO-র কথা ভাবুন। একটি ব্লক কেটে পুরো মডেল বানানোর বদলে আপনি স্ট্যান্ডার্ড ব্রিক দিয়ে বানান। কয়েকটি ব্রিক একটি চাকা বানায়; চারটি চাকা ও আরও কিছু অংশ একটি গাড়ি বানায়। সব গাড়ির চাকা লাল করতে চাইলে আপনি চাকার ডিজাইন একবার বদলান।

React-এর কম্পোনেন্ট হলো সেই ব্রিক। একটি Button কম্পোনেন্ট ProductCard-এর ভেতরে ব্যবহৃত হয়, যা ProductGrid-এর ভেতরে, যা ShopPage-এর অংশ। Button একবার বদলালে অ্যাপের প্রতিটি বাটন বদলে যায়।

উপমার অন্য অংশটি: ধরুন নির্দেশনা বদলালে LEGO মডেলটি নিজে থেকে পুনর্গঠিত হয়। React-এর অন্য কৌশলটি এটাই — আপনি বর্ণনা করেন বর্তমান ডেটার জন্য স্ক্রিন কেমন হওয়া উচিত, আর React বের করে পেজে কী বদলাতে হবে।

মূল ধারণাগুলো

কম্পোনেন্ট

কম্পোনেন্ট হলো একটি JavaScript ফাংশন যা ইন্টারফেসের একটি অংশ ফেরত দেয়। React-এর ডকুমেন্টেশন কম্পোনেন্টকে UI-র এমন একটি অংশ হিসেবে বর্ণনা করে যার নিজের লজিক ও চেহারা আছে। কম্পোনেন্টের নাম বড় হাতের অক্ষরে শুরু হয়।

JSX

কম্পোনেন্ট সাধারণত JSX-এ লেখা হয়, যা JavaScript-এর ভেতরে মেশানো HTML-এর মতো দেখায়:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX বাধ্যতামূলক নয়, কিন্তু React-এর ডকস উল্লেখ করে যে বেশির ভাগ প্রকল্প এটি ব্যবহার করে। ব্রাউজারে চলার আগে এটি সাধারণ JavaScript-এ রূপান্তরিত হয়।

Props

Props হলো যে ইনপুটগুলো আপনি কম্পোনেন্টে পাঠান, পুনঃব্যবহারযোগ্য অংশের সেটিংসের মতো:

<ProductCard name="Lavender Candle" price={24} />

একই ProductCard যেকোনো পণ্য দেখাতে পারে।

State

State হলো এমন তথ্য যা একটি কম্পোনেন্ট মনে রাখে এবং অ্যাপ চলার সময় বদলাতে পারে — একটি মেনু খোলা কি না, সার্চ বক্সে কী টাইপ করা হয়েছে, কার্টে কতগুলো আইটেম। State বদলালে React কম্পোনেন্টটি আবার রেন্ডার করে যাতে স্ক্রিন মেলে।

Hooks

Hooks হলো ফাংশন যাদের নাম use দিয়ে শুরু হয়, যেমন useState (একটি মান মনে রাখা) এবং useEffect (রেন্ডারের পর কোড চালানো, যেমন ডেটা আনা)। AI-লেখা React কোডে আপনি এগুলো সর্বত্র দেখবেন।

একটি কাজের উদাহরণ: একটি কার্ট কাউন্টার

ধরুন আপনার অনলাইন দোকানে একটি "Add to cart" বাটন ও একটি কার্ট আইকন আছে যা আইটেমের সংখ্যা দেখায়। React-এ এটি মোটামুটি এমন দেখায়:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

কোনো ক্রেতা "Add to cart" ক্লিক করলে যা ঘটে:

1. বাটনের onClick onAdd কল করে, যা setCartCount কল করে।
2. React cartCount state-কে 0 থেকে 1-এ আপডেট করে।
3. React Shop-কে আবার রেন্ডার করে, CartIcon-এ count={1} পাঠিয়ে।
4. পেজে এখন "Cart (1)" দেখায়। "কার্টের টেক্সট খুঁজে বদলাও" বলার মতো কোনো কোড কেউ লেখেনি — স্ক্রিন ডেটাকে অনুসরণ করে।

এর সীমাবদ্ধতাও লক্ষ্য করুন। এই গণনা ব্রাউজারের মেমরিতে থাকে। পেজ রিফ্রেশ করলে এটি আবার 0-তে ফিরে যায়। কার্ট ধরে রাখতে হলে এটি কোথাও স্থায়ীভাবে সংরক্ষণ করতে হবে — একটি কুকি, ব্রাউজার স্টোরেজ, বা আপনার backend-এর মাধ্যমে একটি ডেটাবেস। React স্ক্রিন সামলায়; এটি আপনার ডেটা সংরক্ষণ করে না।

React একটি ওয়েব অ্যাপের কোথায় বসে

একটি "Vite + React" অ্যাপ ব্রাউজারে রেন্ডার হয় (একটি single-page app)। একটি Next.js অ্যাপ প্রথমে সার্ভারে পেজ রেন্ডার করতে পারে, যা সার্চ ইঞ্জিন ও প্রথমবার লোডের গতিতে সাহায্য করে।

সাধারণ শব্দের ব্যাখ্যা

সাধারণ ভুল ও ভুল ধারণা

• "React একটি প্রোগ্রামিং ভাষা।" এটি একটি লাইব্রেরি, যা JavaScript (বা TypeScript)-এ লেখা এবং সেখান থেকেই ব্যবহৃত হয়।
• "React আমার ডেটা সংরক্ষণ করে।" State ব্রাউজারে থাকে এবং রিফ্রেশে হারিয়ে যায়। স্থায়ী ডেটার জন্য backend ও ডেটাবেস লাগে।
• React কোডে গোপন তথ্য রাখা। React অ্যাপের সবকিছু দর্শকের ব্রাউজারে পাঠানো হয়। সেখানে API key রাখলে তা প্রকাশ্য হয়ে যায়। সেগুলো সার্ভারে রাখুন।
• "React অ্যাপ সার্চে র‍্যাঙ্ক করতে পারে না।" শুধু ক্লায়েন্ট-পক্ষের রেন্ডার সার্চের জন্য দুর্বল, কিন্তু প্রি-রেন্ডারিং বা সার্ভার রেন্ডারিং বেশির ভাগ সমস্যা ঠিক করে।
• বিশাল কম্পোনেন্ট। একটি ১,০০০ লাইনের কম্পোনেন্ট মানুষ ও AI উভয়ের জন্য নিরাপদে বদলানো কঠিন। ছোট কম্পোনেন্ট চান।
• React ওয়েব অ্যাপকে ফোন অ্যাপ মনে করা। এটি ব্রাউজারে চলে, ফোনেও, কিন্তু এটি App Store-এর অ্যাপ নয়।

আপনার AI builder-এর কাছে কী চাইবেন

• "এই পেজকে ছোট, নামকরণ করা কম্পোনেন্টে ভাগ করো, এবং বলো প্রতিটি কোন ফাইলে আছে।"
• "ProductCard কম্পোনেন্টটি পুনঃব্যবহারযোগ্য করো, name, price ও image props হিসেবে।"
• "কার্ট ডেটাবেসে সংরক্ষণ করো, যাতে রিফ্রেশের পরেও থাকে।"
• "সব API key সার্ভারে রাখো; React কোড যেন আমাদের নিজের API কল করে।"
• "সার্ভার থেকে আসা ডেটার জন্য লোডিং ও ত্রুটি অবস্থা যোগ করো।"
• "এই পেজগুলোর সার্চে দৃশ্যমানতা গুরুত্বপূর্ণ হলে, সেগুলো প্রি-রেন্ডার করো বা সার্ভার-রেন্ডার সেটআপ ব্যবহার করো।"
• "এই ত্রুটির মানে সাধারণ ভাষায় ব্যাখ্যা করো এবং এটি কোন কম্পোনেন্ট থেকে আসছে বলো।"

বড় চিত্রের জন্য দেখুন frontend বনাম backend, আর AI-লেখা কোড পর্যালোচনার জন্য AI-জেনারেটেড কোড কীভাবে রিভিউ করবেন।

Mythex-এ React

আপনি অন্য কিছু না চাইলে Mythex নতুন প্রকল্প শুরু করে Vite + React + TypeScript + Tailwind দিয়ে, চ্যাট করার সময় একটি লাইভ প্রিভিউ চলে। আপনার প্রথম প্রম্পটে অন্য সেটআপের নাম দিতে পারেন — যেমন "Next.js ব্যবহার করো" বা "সাধারণ স্ট্যাটিক HTML ল্যান্ডিং পেজ" — এবং Mythex আপনার লেখা থেকে সেটি বেছে নেয়; এর জন্য কোনো সেটিংস স্ক্রিন নেই। প্রযুক্তি কীভাবে বাছা হয় ডকস পৃষ্ঠায় বিকল্পগুলো ব্যাখ্যা করা আছে। Free-এ কোড এডিটর শুধু-পঠনযোগ্য; Pro-তে আপনি সরাসরি React কোড সম্পাদনা করতে পারেন এবং প্রকল্পটি অন্য কোথাও কাজ চালিয়ে যেতে এক্সপোর্ট করতে পারেন।

প্রশ্নোত্তর