সহজ বাংলায় React JS শেখার সম্পূর্ণ কোর্স

স্বাগতম আপনাকে React JS Bangla Tutorial-এ।

এই টিউটোরিয়ালটি তৈরি করা হয়েছে React-এর অফিসিয়াল ডকুমেন্টেশন অনুসরণ করে। তবে পুরোটাই লেখা হয়েছে সহজ বাংলায়, যেন আপনি প্রতিটি ধাপ বুঝে বুঝে এগোতে পারেন।

আমরা শুরু করব একদম বেসিক থেকে। তারপর ধীরে ধীরে বাস্তব প্রোজেক্টের দিকে এগিয়ে যাব। React প্রথমে জটিল মনে হতে পারে। কিন্তু চিন্তা করবেন না। আমি খুব সহজ শব্দে বুঝিয়ে বলব।

আমাদের লক্ষ্য কমপক্ষে ৫০০০ ডেভেলপার তৈরি করা — যারা React-এর মূল ধারণাগুলো গভীরভাবে বুঝবেন এবং নিজেরা নতুন অ্যাপ তৈরি করতে সক্ষম হবেন।

এই কোর্সটি কাদের জন্য?

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

এই কোর্স থেকে কী শিখবেন?

আপনি শিখবেন —

• কীভাবে একটি Component বানাতে হয়।
• কীভাবে এক Component-এর ভেতরে আরেকটা রাখতে হয়।
• কীভাবে HTML-এর মতো JSX লিখতে হয়।
• কীভাবে ডেটা স্ক্রিনে দেখাতে হয়।
• কীভাবে শর্ত দিয়ে এবং লিস্ট দিয়ে UI বানাতে হয়।
• কীভাবে ব্যবহারকারীর ক্লিক বা Event-এ সাড়া দিতে হয়।
• কীভাবে State ব্যবহার করে স্ক্রিন আপডেট করতে হয়।

আপনি আরও জানবেন —

• useState-এর মতো Hook কীভাবে কাজ করে।
• কীভাবে ডেটা এক Component থেকে আরেকটিতে পাঠানো যায় — এটাকেই বলে Props আর Lifting State Up।

প্রতিটি ধাপ উদাহরণসহ দেখাব। শুধু পড়বেন না, কোড লিখেও শিখবেন।

সফলতার মূলমন্ত্র: শুধু দেখবেন না, কোড করবেন

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

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

প্র্যাকটিসই হলো আসল শিক্ষক। ভুল করুন, আবার চেষ্টা করুন, বারবার চেষ্টা করুন।

এই টিউটোরিয়ালে প্রতিটি কনসেপ্টের সাথে বাস্তব কোডের উদাহরণ থাকবে। আপনার কাজ শুধু একটাই — হাল না ছাড়া।

// এই কোডটির হেডার ট্যাগ পরিবর্তন করে সেকেন্ড হেডার ট্যাগ দাও

export default function Welcome() {
  return <h1>Welcome to React.js Bangla Tutorial</h1>;
}

React.js-এর সংক্ষিপ্ত ইতিহাস

২০১১ সালে Facebook-এর Jordan Walke React তৈরি করেন। তিনি PHP-এর কম্পোনেন্ট-ভিত্তিক ফ্রেমওয়ার্ক "XHP" থেকে অনুপ্রাণিত হয়ে এটি ডেভেলপ করেন।

React প্রথমে ব্যবহার হয় Facebook-এর News Feed-এ, তারপর ২০১২ সালে Instagram-এ।

২০১৩ সালে Facebook React-কে Open Source হিসেবে প্রকাশ করে। এরপর থেকে এটি দ্রুত পুরো বিশ্বের ডেভেলপার কমিউনিটিতে জনপ্রিয়তা পায়।

React কী?

React হলো ইউজার ইন্টারফেস (UI) তৈরির জন্য একটি JavaScript লাইব্রেরি।

UI হলো ব্যবহারকারী যা ব্রাউজারে দেখেন এবং যার সাথে ইন্টারঅ্যাক্ট করেন।

ভাবুন Facebook-এর কথা। আপনি যখন Facebook খোলেন, তখন দেখতে পান —

• উপরে একটি Navbar।
• বাঁয়ে আপনার Profile Card।
• মাঝখানে News Feed — একের পর এক পোস্ট।
• প্রতিটি পোস্টে Like Button, Comment Section।

এই পুরো পেজটাই হলো UI। আর এই UI তৈরি করার জন্যই React ব্যবহার করা হয়।

React দিয়ে ওয়েব, মোবাইল — সব প্ল্যাটফর্মের জন্যই অ্যাপ তৈরি করা যায়।

React-এর মূল ধারণাসমূহ

১. Component — UI-এর ছোট ছোট টুকরো

React-এ প্রতিটি অ্যাপ তৈরি হয় ছোট ছোট টুকরো দিয়ে। এই টুকরোগুলোকে বলে Component।

ভাবুন Facebook-এর News Feed-এর কথা। পুরো পেজটা একটা বিশাল জিনিস। কিন্তু React-এ এটাকে ছোট ছোট অংশে ভাগ করা হয় —

• <Navbar /> — উপরের নেভিগেশন বার।
• <ProfileCard /> — বাঁয়ের প্রোফাইল কার্ড।
• <NewsFeed /> — মাঝখানের পোস্টের তালিকা।
• <Post /> — একটি একক পোস্ট।
• <LikeButton /> — পোস্টের নিচে লাইক বাটন।
• <CommentSection /> — পোস্টের নিচে কমেন্ট সেকশন।

এই ছোট ছোট Component গুলোকে একসাথে জুড়ে দিয়েই পুরো Facebook তৈরি হয়।

// NewsFeed.jsx
function NewsFeed({ posts }) {
  return (
    <div>
      {posts.map((post) => (
        <Post key={post.id} post={post} />
      ))}
    </div>
  );
}

একটি Component-এর দুটি অংশ আছে —

1. View — ব্যবহারকারী চোখে যা দেখে। এটি লেখা হয় JSX দিয়ে, যা দেখতে HTML-এর মতো।
2. Logic — কখন কী দেখাতে হবে, ডেটা কীভাবে বদলাবে, কোন ইভেন্টে কোন ফাংশন চলবে।

Component-এর একটা জীবনচক্র আছে, তিনটি ধাপে —

• Mount — Component প্রথমবার স্ক্রিনে আসে।
• Update — ডেটা বা State বদলালে নতুনভাবে রেন্ডার হয়।
• Unmount — Component স্ক্রিন থেকে সরে যায়।

২. JSX — JavaScript-এর ভেতরে HTML

React Component মূলত একটি JavaScript ফাংশন, যা JSX রিটার্ন করে। JSX দেখতে HTML-এর মতো, কিন্তু এর ভেতরে JavaScript-এর সব শক্তি আছে।

ভাবুন, একটি পোস্টের মধ্যে ইউজারের নাম আর পোস্টের টেক্সট দেখাতে চান —

function Post({ user, content }) {
  return (
    <div className="post">
      <strong>{user.name}</strong>
      <p>{content}</p>
    </div>
  );
}

এখানে {user.name} আর {content} হলো JavaScript Expression। বাকি অংশটুকু দেখতে HTML-এর মতো — এটাই JSX।

React এই JSX কোডকে পর্দার আড়ালে সাধারণ JavaScript-এ রূপান্তর করে:

React.createElement(
  "div",
  { className: "post" },
  React.createElement("strong", null, user.name),
  React.createElement("p", null, content),
);

JSX ব্যবহারের কারণ একটাই — কোড পরিষ্কার, সহজবোধ্য এবং রক্ষণাবেক্ষণযোগ্য থাকে।

৩. Component দিয়ে UI বানানো — Lego ব্লকের মতো

React-এ UI বানানো অনেকটা Lego ব্লক জোড়া লাগানোর মতো। ছোট ছোট অংশ বানাও, তারপর একসাথে বসিয়ে বড় কিছু তৈরি করো।

Facebook-এর একটি পোস্ট ধরুন। এর ভেতরে থাকে —

function Post({ post }) {
  return (
    <div className="post-card">
      <ProfileCard user={post.author} />
      <p>{post.content}</p>
      {post.image && <img src={post.image} alt="post" />}
      <LikeButton count={post.likes} />
      <CommentSection comments={post.comments} />
    </div>
  );
}

ProfileCard, LikeButton, CommentSection — প্রতিটি আলাদা Component। আবার এই Post Component নিজেই NewsFeed-এর ভেতরে বসে।

এইভাবে ভাগ করলে তিনটি সুবিধা হয় —

• কোড পড়া সহজ হয়।
• একই Component একাধিক জায়গায় ব্যবহার করা যায়।
• পরিবর্তন করতে হলে শুধু সেই Component-এ গেলেই হয়।

৪. Interactivity — ব্যবহারকারীর কাজে সাড়া দেওয়া

একটি ওয়েবসাইট তখনই আকর্ষণীয় হয় যখন এটি ব্যবহারকারীর সাথে কথা বলতে পারে। React-এ এটাকে বলে Interactivity।

ভাবুন Facebook-এর Like Button-এর কথা। ব্যবহারকারী বাটনে ক্লিক করলে —

• বাটনটি নীল হয়ে যায়।
• লাইকের সংখ্যা এক বাড়ে।

এই কাজ করার জন্য Event Handler লিখতে হয়। Event মানে ব্যবহারকারীর অ্যাকশন (ক্লিক, টাইপ), আর Handler মানে সেই অ্যাকশনের জবাবে কী করবে।

function LikeButton({ count }) {
  function handleLike() {
    // লাইক দেওয়ার কাজ
    console.log("লাইক দেওয়া হয়েছে!");
  }

  return <button onClick={handleLike}>👍 {count} Like</button>;
}

React-এর নিয়ম হলো, Event Handler সরাসরি চালাবেন না। শুধু ফাংশনের নাম দেবেন — onClick={handleLike}। React ঠিক সময়ে নিজেই সেটা চালাবে।

৫. State — Component-এর মেমরি

State হলো Component-এর মেমরি।

ভাবুন, একটি Like Button আছে। ব্যবহারকারী ক্লিক করলে লাইকের সংখ্যা বাড়বে। এই সংখ্যাটি কোথাও মনে রাখতে হবে। সেই কাজটাই করে State।

React-এ আমরা useState নামের একটি Hook ব্যবহার করি —

import { useState } from "react";

function LikeButton() {
  const [liked, setLiked] = useState(false);
  const [count, setCount] = useState(0);

  function handleLike() {
    setLiked(true);
    setCount(count + 1);
  }

  return (
    <button onClick={handleLike} style={{ color: liked ? "blue" : "gray" }}>
      👍 {count} Like
    </button>
  );
}

useState আমাদের দেয় দুটি জিনিস —

1. বর্তমান মান — যেমন liked, count।
2. মান পরিবর্তনের ফাংশন — যেমন setLiked, setCount।

State বদলালে React আবার UI আঁকে। তবে State শুধু সেই Component-এর ভেতরেই কাজ করে।

কিন্তু একটা সমস্যা আছে। ভাবুন, News Feed-এ একটি পোস্টে Like দিলে, সেই তথ্যটা Sidebar-এর Notification Section-এও দেখাতে হবে। তখন দুটো আলাদা Component-এ একই ডেটা দরকার।

এই ক্ষেত্রে State-কে উপরের Parent Component-এ নিয়ে যাই, আর Props দিয়ে নিচে পাঠাই। এটাকেই বলে Lifting State Up।

জানা থাকা ভালো — Component মুছে গেলে State-ও মুছে যায়। পুরো অ্যাপ জুড়ে ডেটা শেয়ার করতে Context ব্যবহার করা হয়।

৬. Side Effects — বাইরের দুনিয়ার সাথে কথা বলা

React নিজে নিজে সবকিছু করে না।

অনেক সময় আমাদের দরকার হয় —

• Server থেকে পোস্টের ডেটা আনা।
• Browser-এর Local Storage-এ কিছু সেভ করা।
• কোনো Timer সেট করা।

এই কাজগুলোকে বলে Side Effects — কারণ এগুলো React-এর স্বাভাবিক UI আপডেটের বাইরে ঘটে।

এই কাজ করার জন্য React দিয়েছে useEffect Hook।

ভাবুন, News Feed পেজ খোলার সাথে সাথে Server থেকে পোস্টের তালিকা আনতে হবে —

import { useState, useEffect } from "react";

function NewsFeed() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // Component প্রথমবার স্ক্রিনে আসলে এই কোড চলবে
    fetch("/api/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []); // [] মানে শুধু একবার চলবে

  return (
    <div>
      {posts.map((post) => (
        <Post key={post.id} post={post} />
      ))}
    </div>
  );
}

মনে রাখবেন — Component রেন্ডার ও DOM-এ কমিট হওয়ার পরে useEffect চলে।

৭. Next.js — Full-Stack React

React শুধু UI তৈরির কাজ করে। কিন্তু একটি বড় অ্যাপে Routing, Server থেকে ডেটা আনা, SEO — এসবও দরকার।

এই কাজগুলো সহজ করতে আমরা Next.js ব্যবহার করি। এটা React-এর উপর ভিত্তি করে তৈরি একটি শক্তিশালী Framework।

Facebook-এর মতো যদি নিজের সোশ্যাল মিডিয়া অ্যাপ বানাতে চান, যেখানে News Feed থাকবে, Profile Page থাকবে, Login Page থাকবে — তাহলে Next.js দিয়ে পুরো Full-Stack অ্যাপ বানানো যাবে।

৮. React Native — মোবাইল অ্যাপ

React Native দিয়ে Android ও iOS-এর জন্য Native অ্যাপ বানানো যায়।

এর মানে, React শিখলে আপনি একই স্কিল দিয়ে ওয়েব এবং মোবাইল — দুই প্ল্যাটফর্মেই কাজ করতে পারবেন।

Vanilla JS বনাম React — কখন কোনটি?

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

কমিউনিটির সাথে শিখুন

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

আপনি GitHub, StackOverflow, Discord, Reddit, YouTube, এমনকি Facebook Group-এও কমিউনিটির সাথে যুক্ত হয়ে শিখতে পারেন।

📚 রিসোর্সসমূহ

• React অফিসিয়াল ডকুমেন্টেশন: https://react.dev
• বাংলা ভিডিও সিরিজ: React Bangla Tutorial on YouTube

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