👋 স্বাগতম React JS Bangla Tutorial-এ!

আপনি যদি React JS এ একদম নতুন হয়ে থাকেন, কিংবা আগেও চেষ্টা করেছিলেন কিন্তু থেমে গেছেন—তাহলে এই React JS Bangla Tutorial টি আপনার জন্যই বানানো হয়েছে। আমরা React-এর অফিসিয়াল ডকুমেন্টেশনকে ফলো করে, একদম সহজ বাংলায়, গল্পের মতো করে স্টেপ বাই স্টেপ শিখিয়ে দেবো। যেন আপনিও হাতে-কলমে কোড করতে করতে একজন আত্মবিশ্বাসী ফ্রন্টএন্ড React ডেভেলপার হয়ে উঠতে পারেন। এবং React এর কোনো কনসেপ্ট নিয়ে কনফিউসন না থাকে।

React JS Bangla Tutorial এর টার্গেট শুধু শেখানো না — বরং আপনি যেন নিজে থেকে প্র্যাকটিস কর যাতে শিখতে পারেন, সেই শক্তি আপনার মধ্যে তৈরি করা। যিনি নিজে নিজে চিন্তা করে একটি অ্যাপ বানাতে পারবেন।

React-এর সাথে প্রথম পরিচয় হই

একটা জিনিস আগে থেকেই আপনাকে জানিয়ে রাখি...

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

প্র্যাকটিসই আসল শিক্ষা। ভুল করেন, আবার শিখেন, আর বারবার চেষ্টা করে যান। এই টিউটোরিয়ালটিতে আমরা শুধু থিওরি না, রিয়েল কোড উদাহরণসহ দেখাবো—আপনার কাজ শুধু একটা: হাল না ছাড়া। আটকে গেলে ভয় পাবেন না, কারণ আমরা সবাই একসাথেই শিখছি।

এই টিউটোরিয়াল কাদের জন্য?

• যারা একদম নতুন এবং React শিখতে চায় এবং React-এর 'R'-ও জানে না।
• যারা আগে React শুরু করেছিল, মাঝপথে হাল ছেড়ে দিয়েছিলে্ন।
• যারা অফিসিয়াল ডকুমেন্টেশন পড়তে গিয়ে ইংরেজিতে হিমশিম খান

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

• React কী এবং কেন দরকার? কেন এটা এত জনপ্রিয় হলো?
• কিভাবে ছোট ছোট Component বানিয়ে গোছানো UI বানানো যায়
• JSX কী, আর কেন এটা HTML থেকেও শক্তিশালী?
• কিভাবে State, Props, Event, এবং Hooks দিয়ে Interactive UI বানাতে হয়
• রিয়েল লাইফ ছোট প্রজেক্ট তৈরি
• React Native ও Next.js এর ঝলক
• আর Vanilla JS vs React নিয়ে পরিষ্কার ধারণা

React.js-এর ইতিহাস

২০১১ সালে ফেসবুকের Jordan Walke React তৈরি করেন। তিনি PHP-এর Component-Based Framework "XHP" থেকে অনুপ্রাণিত হয়ে এটি ডেভেলপ করেন। React প্রথম ফেসবুকের নিউজফিডে এবং পরে ২০১২ সালে ইনস্টাগ্রামে ব্যবহার করা হয়।

২০১৩ সালে ফেসবুক React.js-কে ওপেন সোর্স ঘোষণা করে। এরপর থেকে React দ্রুত জনপ্রিয়তা পায় এবং বিভিন্ন বড় কোম্পানি ও ডেভেলপারদের মধ্যে ছড়িয়ে পড়ে।

শুরু করি আমাদের React শেখার যাত্রা

ভাই,মনে রাখেন, আপনি একা নন। এই যাত্রাটাও একা একা না। আমরা সবাই একসাথে শিখবো। আপনি, আমি, আর হাজারো নতুন ডেভেলপার মিলে সামনে এগিয়ে যাবো।

রিয়্যাক্ট কী?

React হলো JavaScript-এর একটা লাইব্রেরি যেটা দিয়ে খুব সহজে UI (User Interface) বানানো যায়। আর UI মানে যা ব্যবহারকারী ব্রাউজারে দেখে এবং ব্যবহার করে।

যেমন Facebook NewsFeed, ইউটিউবের ভিডিও লিস্ট বা ইনপুট ফর্ম — এই সব কিছুই UI।

React একসাথে কাজ করে ওয়েব, মোবাইল—সব প্ল্যাটফর্মেই।

React-এর ধারণাগুলো:

🔹 ছোট ছোট component জুড়ে দিয়ে ইন্টারফেস বানানো

React-এ আমরা পুরো ওয়েবসাইটকে একবারে বানাই না। React বলে, "পুরো জিনিস একসাথে বানাতে যাও না ভাই, টুকরা টুকরা করে বানাও!" প্রতিটা ছোট টুকরাকে বলে Component।

এইভাবে কম্পোনেন্ট-ভিত্তিক কাজ করার সবচেয়ে বড় সুবিধা হলো, কোড খুব গোছানো থাকে এবং টিমের সাথে কাজ করা সহজ হয়। প্রত্যেকে নিজের কম্পোনেন্ট নিয়ে কাজ করতে পারে।

ধরেন, আপনি YouTube-এর মতো একটি পেজ বানাচ্ছেন। সেখানে থাকতে পারে:

• <Thumbnail /> — ভিডিও থাম্বনেল
• <LikeButton /> — লাইক বাটন
• <Video /> — পুরো ভিডিও ব্লক
• <Comment /> - কমেন্ট

এই Component গুলোকে একসাথে জোড়া দিয়ে বানিয়ে ফেলা যায় একটা আস্ত অ্যাপ।

// Video.js
function Video({ video }) {
  return (
    <div>
      <VideoThumbnail image={video.thumbnail} />
      <a href={video.url}>
        <VideoTitle title={video.title} />
        <p>{video.description}</p>
      </a>
      <LikeButton />
    </div>
  );
}

🔹 JSX — যেখানে কোড আর ডিজাইন একসাথে থাকবে

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

return <h1>{heading}</h1>;

এখানে {heading} হচ্ছে JavaScript expression, আর <h1> হচ্ছে JSX tag।

পর্দার আড়ালে এটা JSX, মূলত ব্রাউজারে যাওয়ার আগে এইরকম কোডে রূপ নেয়:

React.createElement("h1", null, "Welcome!");

JSX থাকায় কোড ক্লিন, বোঝা সহজ এবং মেইনটেইন করা সুবিধাজনক।

ব্যাপারটা হলো, JSX তোমাকে HTML-এর ভেতরেই জাভাস্ক্রিপ্টের শক্তি ব্যবহার করার সুযোগ দেয়। এর ফলে ডিজাইন (মার্কআপ) আর লজিক এক জায়গায় থাকে, যা কোড বোঝা এবং ম্যানেজ করা অনেক সহজ করে দেয়।

উদাহরণ:

// VideoList.js
function VideoList({ videos, emptyHeading }) {
  const count = videos.length;
  let heading = emptyHeading;
 
  if (count > 0) {
    const noun = count > 1 ? "videos" : "video";
    heading = count + " " + noun;
  }
 
  return (
    <section>
      <h1>{heading}</h1>
      {/* এখানে .map() ব্যবহার করে প্রতিটা ভিডিওর জন্য একটি কম্পোনেন্ট দেখানো হচ্ছে */}
      {videos.map((video) => (
        <Video key={video.id} video={video} />
      ))}
    </section>
  );
}

প্রশ্ন: <Welcome/> কম্পোনেন্টের <h1> ট্যাগটা কি আসল HTML?

🔹 যেখানেই দরকার, সেখানেই ইন্টারঅ্যাকশন যোগ

নিচের উদাহরণে, আপনি যখন সার্চ বক্সে কিছু টাইপ করবেন, React সাথে সাথে ভিডিও লিস্ট থেকে ফিল্টার করে দেখাবে।

নোট: নিচের কোডটি এখন পুরোপুরি বোঝার দরকার নেই। শুধু একবার চোখ বুলিয়ে রাখেন, যে কীভাবে একটি ইন্টারঅ্যাকটিভ লিস্ট বানানো যায়।

// SearchableVideoList.js
 
// ... (এখানে ভিডিওর ডেটা এবং অন্যান্য কম্পোনেন্ট থাকবে) ...
 
function SearchableVideoList({ videos }) {
  const [searchText, setSearchText] = useState("");
  const foundVideos = filterVideos(videos, searchText); // ফিল্টার করা ভিডিও
 
  return (
    <>
      <SearchInput value={searchText} onChange={setSearchText} />
      <VideoList
        videos={foundVideos}
        emptyHeading={`"${searchText}" দিয়ে কিছু পাওয়া যায়নি`}
      />
    </>
  );
}

ব্যাস, UI এখন আপনার ইনপুটের উপর রিয়েল টাইমে রিঅ্যাক্ট করবে।

🔹 চাইলে Next.js দিয়ে ফুলস্ট্যাক অ্যাপ বানান

React শুধু UI বানায়। কিন্তু বড় অ্যাপ বানাতে দরকার হয় রাউটিং, সার্ভার থেকে ডেটা ফেচিং ইত্যাদি।

এই কাজগুলো সহজ করতে আমরা Next.js ব্যবহার করতে পারি। এতে SSR (Server Side Rendering), API Routes, Image Optimization সবই তৈরি থাকে।

🔹 শুধু ওয়েব না, মোবাইল অ্যাপও বানান!

React Native দিয়ে তুমি Android ও iOS অ্যাপ বানাতে পারো, একদম নেটিভ ফিল সহ। Expo ব্যবহার করলে আরো সহজ হয়।

মানে, এক স্কিল — দুই প্ল্যাটফর্ম! 🚀

🔹 আপনি একা না — আমরা সবাই একসাথে শিখি

প্রতি মাসে ২০ লাখ ডেভেলপার React ডকুমেন্টেশন পড়ে শেখে। কেউ শুরু করে, কেউ শিখিয়ে দেয়।

আপনি চাইলে GitHub, StackOverflow, Discord, Reddit, YouTube, এমনকি Facebook Group-এ

কমিউনিটির সঙ্গে যুক্ত হয়ে শিখতে পারো।

🔹 পুরোনো প্রজেক্টেও React যুক্ত করা সম্ভব

React শেখার জন্য তোমাকে নতুন অ্যাপ বানাতেই হবে এমন না। চাইলেই তোমার পুরোনো ওয়েবসাইটে React কম্পোনেন্ট যুক্ত করতে পারো:

<nav id="navigation"></nav>

import { createRoot } from "react-dom/client";
 
function NavigationBar() {
  return <h1>Hello from React!</h1>;
}
 
const root = createRoot(document.getElementById("navigation"));
root.render(<NavigationBar />);

🔹 React-এর মূল কিছু ফিচার এক নজরে:

• ✅ Component-based Structure — ছোট ছোট ইউনিটে কোড ভাগ
• ⚡ Virtual DOM — DOM ম্যানিপুলেশন দ্রুত হয়
• 🎯 Declarative UI — কী চাই সেটাই বলে দেন, React ব্যবস্থা নেবে
• 🔄 State & Props — কম্পোনেন্টে ডেটা ব্যবস্থাপনা
• 🔌 Hooks — যেমন useState, useEffect দিয়ে ফাংশনাল কম্পোনেন্টে ম্যাজিক

🔹 JavaScript vs React: কখন কোনটা?

শেষ কথা

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

📚 শেখার রিসোর্স

• React অফিসিয়াল: https://react.dev/ (opens in a new tab)
• বাংলা ভিডিও সিরিজ: React Bangla Tutorial on YouTube (opens in a new tab)

React শেখা একদিনে হবে না, কিন্তু শুরুটা হোক আজকেই।