কুইকলি React শিখুন

UI = f(state)

node -v    # v18.x.x বা তার উপরে দেখাবে
npm -v     # 9.x.x বা তার উপরে দেখাবে

# Vite দিয়ে React প্রজেক্ট তৈরি
npm create vite@latest facebook-news-feed -- --template react

# প্রজেক্ট ফোল্ডারে যান
cd facebook-news-feed

# ডিপেন্ডেন্সি ইনস্টল করুন
npm install

# ডেভেলপমেন্ট সার্ভার চালু করুন
npm run dev

npm install tailwindcss @tailwindcss/vite

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

@import "tailwindcss";

facebook-news-feed/
  ├─ index.html
  ├─ vite.config.js
  ├─ package.json
  └─ src/
      ├─ main.jsx               ← Entry point: ReactDOM.createRoot এখানে
      ├─ App.jsx                ← Root component / Route definitions
      ├─ index.css              ← Global styles + Tailwind
      │
      ├─ data/
      │   └─ posts.js           ← Static/mock পোস্ট ডাটা
      │
      ├─ components/
      │   ├─ Header.jsx         ← ফেসবুক-স্টাইল টপ নেভবার
      │   ├─ CreatePostBox.jsx  ← নতুন পোস্ট লেখার ফর্ম
      │   ├─ Feed.jsx           ← পোস্টের লিস্ট
      │   ├─ PostCard.jsx       ← একটা পোস্টের কার্ড
      │   └─ EngagementBar.jsx  ← লাইক/কমেন্ট/শেয়ার বার
      │
      ├─ pages/
      │   ├─ HomePage.jsx       ← মূল ফিড পেজ
      │   ├─ PostDetailPage.jsx ← একটা পোস্টের বিস্তারিত
      │   ├─ ProfilePage.jsx    ← একজনের সব পোস্ট
      │   └─ NotFoundPage.jsx   ← ৪০৪ পেজ
      │
      ├─ hooks/
      │   ├─ useFetchPosts.js   ← Custom hook: API থেকে পোস্ট লোড
      │   └─ useLocalStorage.js ← Custom hook: localStorage sync
      │
      └─ context/
          └─ PostContext.jsx    ← Context API দিয়ে গ্লোবাল state

// src/data/posts.js
export const posts = [
  {
    id: 1,
    author: "রাফি হাসান",
    avatar: "🧑‍💻",
    verified: true,
    content: "আজকে React শেখা শুরু করলাম! 🚀 নতুন কিছু শেখার অনুভূতিই আলাদা।",
    image: null,
    likes: 24,
    comments: 5,
    shares: 2,
    timestamp: "২ ঘণ্টা আগে",
  },
  {
    id: 2,
    author: "নাদিয়া ইসলাম",
    avatar: "👩‍🎨",
    verified: false,
    content:
      "প্রথমবার নিজের পোর্টফোলিও সাইট React দিয়ে বানালাম। লিংক কমেন্টে দিলাম!",
    image: "https://picsum.photos/seed/portfolio/600/400",
    likes: 58,
    comments: 12,
    shares: 4,
    timestamp: "৫ ঘণ্টা আগে",
  },
  {
    id: 3,
    author: "সাকিব রহমান",
    avatar: "🧑‍🚀",
    verified: true,
    content:
      "Next.js শিখছি, মজা লাগছে খুব! Server Component বিষয়টা মাথায় ঢুকছে আস্তে আস্তে।",
    image: null,
    likes: 41,
    comments: 8,
    shares: 1,
    timestamp: "১ দিন আগে",
  },
];

// আপনি লিখুন:
const element = <h3 className="author-name">রাফি হাসান</h3>;

// Babel রূপান্তর করে:
const element = React.createElement(
  "h3",
  { className: "author-name" },
  "রাফি হাসান",
);

// ❌ ভুল — দুটো sibling element
return (
  <h3>রাফি হাসান</h3>
  <p>আজকে React শেখা শুরু করলাম!</p>
);

// ✅ সঠিক — একটা wrapper div
return (
  <div>
    <h3>রাফি হাসান</h3>
    <p>আজকে React শেখা শুরু করলাম!</p>
  </div>
);

// ✅ আরও ভালো — Fragment (DOM-এ এক্সট্রা div যোগ হয় না)
return (
  <>
    <h3>রাফি হাসান</h3>
    <p>আজকে React শেখা শুরু করলাম!</p>
  </>
);

// ❌ ভুল
<div class="post-card">...</div>

// ✅ সঠিক (কারণ 'class' JavaScript-এ reserved keyword)
<div className="post-card">...</div>

const author = "রাফি হাসান";
const likes = 24;

return (
  <div>
    <h3>{author}</h3>
    <p>{likes} জন লাইক দিয়েছে</p>
    <p>{likes > 50 ? "🔥 ভাইরাল পোস্ট!" : "নতুন পোস্ট"}</p>
  </div>
);

// ❌ HTML-এ চলে, JSX-এ না
<img src="avatar.jpg">
<br>

// ✅ JSX-এ সবসময় বন্ধ করতে হবে
<img src="avatar.jpg" />
<br />

// src/components/EngagementBar.jsx

export default function EngagementBar() {
  const likes = 24;
  const comments = 5;
  const shares = 2;

  return (
    <div className="flex justify-between text-sm text-gray-500 border-t pt-2">
      <span>👍 {likes}</span>
      <span>💬 {comments} মন্তব্য</span>
      <span>↗️ {shares} শেয়ার</span>
    </div>
  );
}

function Greeting() {
  return <h1>স্বাগতম, আপনার নিউজফিডে! 👋</h1>;
}

export default Greeting;

App
└── HomePage
    ├── Header
    ├── CreatePostBox
    └── Feed
        └── PostCard (একাধিক)
            └── EngagementBar

// src/App.jsx
import Header from "./components/Header";
import CreatePostBox from "./components/CreatePostBox";
import Feed from "./components/Feed";
import { posts } from "./data/posts";

export default function App() {
  return (
    <div className="min-h-screen bg-gray-100">
      <Header />
      <main className="max-w-xl mx-auto p-4 flex flex-col gap-4">
        <CreatePostBox />
        <Feed posts={posts} />
      </main>
    </div>
  );
}

import { Component } from "react";

export default class Header extends Component {
  render() {
    return (
      <header className="bg-blue-700 text-white p-4 font-bold text-xl">
        facebook
      </header>
    );
  }
}

// Parent (Feed.jsx) থেকে props পাঠানো হচ্ছে
<PostCard
  author="রাফি হাসান"
  avatar="🧑‍💻"
  content="আজকে React শেখা শুরু করলাম! 🚀"
  likes={24}
/>;

// Child (PostCard.jsx) props গ্রহণ করছে
function PostCard({ author, avatar, content, likes }) {
  return (
    <div>
      <h3>
        {avatar} {author}
      </h3>
      <p>{content}</p>
      <p>{likes} জন লাইক দিয়েছে</p>
    </div>
  );
}

// ❌ পুরনো উপায় — verbose
function PostCard(props) {
  return <h3>{props.author}</h3>;
}

// ✅ আধুনিক উপায় — Destructuring
function PostCard({ author }) {
  return <h3>{author}</h3>;
}

function PostCard({ author = "অজানা ব্যবহারকারী", likes = 0 }) {
  return (
    <div>
      <h3>{author}</h3>
      <p>{likes} লাইক</p>
    </div>
  );
}

// src/components/PostCard.jsx
import EngagementBar from "./EngagementBar";

export default function PostCard({
  author,
  avatar,
  content,
  likes,
  comments,
  shares,
  timestamp,
}) {
  return (
    <div className="bg-white rounded-lg shadow p-4 flex flex-col gap-3">
      <div className="flex items-center gap-2">
        <span className="text-2xl">{avatar}</span>
        <div>
          <p className="font-semibold text-gray-800">{author}</p>
          <p className="text-xs text-gray-400">{timestamp}</p>
        </div>
      </div>
      <p className="text-gray-700">{content}</p>
      <EngagementBar likes={likes} comments={comments} shares={shares} />
    </div>
  );
}

// src/components/EngagementBar.jsx

export default function EngagementBar({ likes, comments, shares }) {
  return (
    <div className="flex justify-between text-sm text-gray-500 border-t pt-2">
      <span>👍 {likes}</span>
      <span>💬 {comments} মন্তব্য</span>
      <span>↗️ {shares} শেয়ার</span>
    </div>
  );
}

import { useState } from "react";

function LikeCounterDemo() {
  // Syntax: const [stateValue, setterFunction] = useState(initialValue);
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>লাইক: {count}</p>
      <button onClick={() => setCount(count + 1)}>👍 লাইক দিন</button>
    </div>
  );
}

// ❌ ভুল — React জানতেই পারবে না state বদলেছে
const [posts, setPosts] = useState([...]);
posts.push(newPost); // রি-রেন্ডার হবে না!

// ✅ সঠিক — নতুন array তৈরি করুন
setPosts([newPost, ...posts]); // রি-রেন্ডার হবে

// ❌ সম্ভাব্য সমস্যা (stale closure)
setLikes(likes + 1);

// ✅ নিরাপদ (functional update)
setLikes((prevLikes) => prevLikes + 1);

const [post, setPost] = useState({ author: "রাফি হাসান", likes: 24 });

// ❌ ভুল — পুরো object replace হয়ে যায়
setPost({ likes: 25 }); // author হারিয়ে যাবে!

// ✅ সঠিক — spread করে নতুন object তৈরি
setPost({ ...post, likes: 25 });

// src/App.jsx (আপডেটেড)
import { useState } from "react";
import Header from "./components/Header";
import CreatePostBox from "./components/CreatePostBox";
import Feed from "./components/Feed";
import { posts as initialPosts } from "./data/posts";

export default function App() {
  const [posts, setPosts] = useState(initialPosts);

  // নতুন পোস্ট সবার উপরে যোগ করা
  function handleAddPost(newPost) {
    setPosts([
      {
        ...newPost,
        id: Date.now(),
        likes: 0,
        comments: 0,
        shares: 0,
        timestamp: "এখনই",
      },
      ...posts,
    ]);
  }

  // পোস্ট মুছে ফেলা
  function handleDeletePost(id) {
    setPosts(posts.filter((post) => post.id !== id));
  }

  // লাইক বাড়ানো/কমানো
  function handleToggleLike(id, delta) {
    setPosts((prevPosts) =>
      prevPosts.map((post) =>
        post.id === id ? { ...post, likes: post.likes + delta } : post,
      ),
    );
  }

  return (
    <div className="min-h-screen bg-gray-100">
      <Header />
      <main className="max-w-xl mx-auto p-4 flex flex-col gap-4">
        <CreatePostBox onAddPost={handleAddPost} />
        <Feed
          posts={posts}
          onDeletePost={handleDeletePost}
          onToggleLike={handleToggleLike}
        />
      </main>
    </div>
  );
}

function LikeButton() {
  function handleLikeClick() {
    console.log("লাইক বাটনে ক্লিক হয়েছে!");
  }

  // ✅ সঠিক — function reference পাস করা হচ্ছে
  return <button onClick={handleLikeClick}>👍 লাইক</button>;

  // ❌ ভুল — render-এর সময়েই function call হয়ে যাবে!
  // return <button onClick={handleLikeClick()}>👍 লাইক</button>;
}

function handleChange(event) {
  console.log(event.target.value); // টেক্সটবক্সে যা টাইপ হচ্ছে
  console.log(event.target.name); // input-এর name অ্যাট্রিবিউট
}

<textarea onChange={handleChange} />;

// src/components/EngagementBar.jsx
import { useState } from "react";

export default function EngagementBar({
  postId,
  likes,
  comments,
  shares,
  onToggleLike,
}) {
  const [liked, setLiked] = useState(false);

  function handleLikeClick() {
    const nextLiked = !liked;
    setLiked(nextLiked);
    onToggleLike(postId, nextLiked ? 1 : -1);
  }

  return (
    <div className="flex justify-between text-sm border-t pt-2">
      <button
        onClick={handleLikeClick}
        className={liked ? "text-blue-600 font-semibold" : "text-gray-500"}
      >
        👍 {likes} {liked ? "· লাইক দেওয়া হয়েছে" : "· লাইক"}
      </button>
      <span className="text-gray-500">💬 {comments} মন্তব্য</span>
      <span className="text-gray-500">↗️ {shares} শেয়ার</span>
    </div>
  );
}

// ❌ key নেই — React ঠিকভাবে ট্র্যাক করতে পারবে না
{
  posts.map((post) => <PostCard post={post} />);
}

// ❌ index key — নতুন পোস্ট সামনে যোগ হলে সব index বদলে যায়, বাগ হবে
{
  posts.map((post, index) => <PostCard key={index} post={post} />);
}

// ✅ unique id key — সবসময় সঠিক পোস্টের সাথে সঠিক state জুড়ে থাকে
{
  posts.map((post) => <PostCard key={post.id} post={post} />);
}

// src/components/Feed.jsx
import PostCard from "./PostCard";

export default function Feed({ posts, onDeletePost, onToggleLike }) {
  return (
    <div className="flex flex-col gap-4">
      {posts.map((post) => (
        <PostCard
          key={post.id}
          post={post}
          onDelete={onDeletePost}
          onToggleLike={onToggleLike}
        />
      ))}
    </div>
  );
}

// src/components/PostCard.jsx
import EngagementBar from "./EngagementBar";

export default function PostCard({ post, onDelete, onToggleLike }) {
  const { id, author, avatar, content, likes, comments, shares, timestamp } =
    post;

  return (
    <div className="bg-white rounded-lg shadow p-4 flex flex-col gap-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="text-2xl">{avatar}</span>
          <div>
            <p className="font-semibold text-gray-800">{author}</p>
            <p className="text-xs text-gray-400">{timestamp}</p>
          </div>
        </div>
        <button
          onClick={() => onDelete(id)}
          className="text-gray-400 hover:text-red-500"
        >
          🗑️
        </button>
      </div>
      <p className="text-gray-700">{content}</p>
      <EngagementBar
        postId={id}
        likes={likes}
        comments={comments}
        shares={shares}
        onToggleLike={onToggleLike}
      />
    </div>
  );
}

<p className="font-semibold text-gray-800">
  {author}{" "}
  {verified && (
    <span className="text-blue-500" title="ভেরিফায়েড">
      ✔️
    </span>
  )}
</p>

{
  post.image ? (
    <img src={post.image} alt="পোস্টের ছবি" className="rounded-lg w-full" />
  ) : null;
}

// একই জিনিস, আরও ছোট করে:
{
  post.image && (
    <img src={post.image} alt="পোস্টের ছবি" className="rounded-lg w-full" />
  );
}

// src/components/Feed.jsx (আপডেটেড)
import PostCard from "./PostCard";

export default function Feed({ posts, onDeletePost, onToggleLike }) {
  if (posts.length === 0) {
    return (
      <div className="text-center py-10 text-gray-400">
        <p className="text-4xl mb-2">📭</p>
        <p>এখনো কোনো পোস্ট নেই। প্রথম পোস্টটি আপনিই দিন!</p>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-4">
      {posts.map((post) => (
        <PostCard
          key={post.id}
          post={post}
          onDelete={onDeletePost}
          onToggleLike={onToggleLike}
        />
      ))}
    </div>
  );
}

// src/components/PostCard.jsx (আপডেটেড)
import EngagementBar from "./EngagementBar";

export default function PostCard({ post, onDelete, onToggleLike }) {
  const {
    id,
    author,
    avatar,
    verified,
    content,
    image,
    likes,
    comments,
    shares,
    timestamp,
  } = post;

  return (
    <div className="bg-white rounded-lg shadow p-4 flex flex-col gap-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="text-2xl">{avatar}</span>
          <div>
            <p className="font-semibold text-gray-800">
              {author}{" "}
              {verified && (
                <span className="text-blue-500" title="ভেরিফায়েড">
                  ✔️
                </span>
              )}
            </p>
            <p className="text-xs text-gray-400">{timestamp}</p>
          </div>
        </div>
        <button
          onClick={() => onDelete(id)}
          className="text-gray-400 hover:text-red-500"
        >
          🗑️
        </button>
      </div>

      <p className="text-gray-700">{content}</p>

      {image && (
        <img src={image} alt="পোস্টের ছবি" className="rounded-lg w-full" />
      )}

      <EngagementBar
        postId={id}
        likes={likes}
        comments={comments}
        shares={shares}
        onToggleLike={onToggleLike}
      />
    </div>
  );
}

// src/components/CreatePostBox.jsx
import { useState } from "react";

const initialFormData = { content: "", imageUrl: "" };

export default function CreatePostBox({ onAddPost }) {
  const [formData, setFormData] = useState(initialFormData);
  const [error, setError] = useState("");

  // একটিমাত্র handler দিয়ে দুটো input-ই পরিচালনা
  function handleChange(event) {
    const { name, value } = event.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
    if (error) setError("");
  }

  function handleSubmit(event) {
    event.preventDefault(); // পেজ রিলোড বন্ধ করা

    if (!formData.content.trim()) {
      setError("কিছু একটা তো লিখুন!");
      return;
    }

    onAddPost({
      author: "আপনি",
      avatar: "🙂",
      verified: false,
      content: formData.content.trim(),
      image: formData.imageUrl.trim() || null,
    });

    setFormData(initialFormData); // ফর্ম রিসেট
  }

  return (
    <form
      onSubmit={handleSubmit}
      className="bg-white rounded-lg shadow p-4 flex flex-col gap-2"
    >
      <textarea
        name="content"
        value={formData.content}
        onChange={handleChange}
        placeholder="আপনার মনে কী চলছে?"
        rows={3}
        className="w-full border rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none"
      />

      <input
        type="text"
        name="imageUrl"
        value={formData.imageUrl}
        onChange={handleChange}
        placeholder="ছবির লিংক (ঐচ্ছিক)"
        className="w-full border rounded-lg p-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
      />

      {error && <p className="text-red-500 text-sm">{error}</p>}

      <button
        type="submit"
        className="self-end bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition"
      >
        পোস্ট করুন
      </button>
    </form>
  );
}

useEffect(() => {
  // ১. এখানে side effect কোড লেখা হয়

  return () => {
    // ২. Cleanup ফাংশন (ঐচ্ছিক) —
    //    কম্পোনেন্ট Unmount হওয়ার আগে বা
    //    effect আবার চলার আগে এটা কল হয়
  };
}, [dependency1, dependency2]); // ৩. Dependency array

// src/App.jsx (useEffect যোগ করা হলো)
import { useState, useEffect } from "react";
import Header from "./components/Header";
import CreatePostBox from "./components/CreatePostBox";
import Feed from "./components/Feed";
import { posts as mockServerPosts } from "./data/posts";

export default function App() {
  const [posts, setPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // বাস্তবে এখানে fetch("/api/posts") দিয়ে সার্ভার থেকে ডাটা আনা হতো।
    // আমরা setTimeout দিয়ে নেটওয়ার্ক দেরি সিমুলেট করছি।
    const timerId = setTimeout(() => {
      setPosts(mockServerPosts);
      setIsLoading(false);
    }, 800);

    // ক্লিনআপ — কম্পোনেন্ট Unmount হয়ে গেলে টাইমার বাতিল করা
    return () => clearTimeout(timerId);
  }, []); // খালি অ্যারে — শুধু Mount-এ একবারই চলবে

  // students... থুড়ি, posts state ও handler ফাংশনগুলো আগের মতোই থাকবে
  function handleAddPost(newPost) {
    setPosts([
      {
        ...newPost,
        id: Date.now(),
        likes: 0,
        comments: 0,
        shares: 0,
        timestamp: "এখনই",
      },
      ...posts,
    ]);
  }

  function handleDeletePost(id) {
    setPosts(posts.filter((post) => post.id !== id));
  }

  function handleToggleLike(id, delta) {
    setPosts((prevPosts) =>
      prevPosts.map((post) =>
        post.id === id ? { ...post, likes: post.likes + delta } : post,
      ),
    );
  }

  if (isLoading) {
    return (
      <p className="text-center p-10 text-gray-400">পোস্ট লোড হচ্ছে... ⏳</p>
    );
  }

  return (
    <div className="min-h-screen bg-gray-100">
      <Header />
      <main className="max-w-xl mx-auto p-4 flex flex-col gap-4">
        <CreatePostBox onAddPost={handleAddPost} />
        <Feed
          posts={posts}
          onDeletePost={handleDeletePost}
          onToggleLike={handleToggleLike}
        />
      </main>
    </div>
  );
}

useEffect(() => {
  const controller = new AbortController();

  async function fetchPosts() {
    try {
      setIsLoading(true);
      const response = await fetch("https://api.example.com/posts", {
        signal: controller.signal,
      });
      if (!response.ok) throw new Error(`Server Error: ${response.status}`);
      const data = await response.json();
      setPosts(data);
    } catch (err) {
      if (err.name !== "AbortError") {
        console.error(err.message);
      }
    } finally {
      setIsLoading(false);
    }
  }

  fetchPosts();
  return () => controller.abort(); // Unmount হলে রিকোয়েস্ট বাতিল
}, []);

useEffect(() => {
  if (!isLoading) {
    localStorage.setItem("posts", JSON.stringify(posts));
  }
}, [posts, isLoading]);

App (posts state এখানে)
├── CreatePostBox (onAddPost → App)
└── Feed (posts ← App)
    └── PostCard (onDelete, onToggleLike ← App)

// src/context/PostContext.jsx
import { createContext, useContext, useState, useEffect } from "react";
import { posts as mockServerPosts } from "../data/posts";

// ধাপ ১: Context তৈরি করা
const PostContext = createContext(null);

// ধাপ ২: Provider Component তৈরি করা
export function PostProvider({ children }) {
  const [posts, setPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const timerId = setTimeout(() => {
      setPosts(mockServerPosts);
      setIsLoading(false);
    }, 800);
    return () => clearTimeout(timerId);
  }, []);

  function addPost(newPost) {
    setPosts((prev) => [
      {
        ...newPost,
        id: Date.now(),
        likes: 0,
        comments: 0,
        shares: 0,
        timestamp: "এখনই",
      },
      ...prev,
    ]);
  }

  function deletePost(id) {
    setPosts((prev) => prev.filter((post) => post.id !== id));
  }

  function toggleLike(id, delta) {
    setPosts((prev) =>
      prev.map((post) =>
        post.id === id ? { ...post, likes: post.likes + delta } : post,
      ),
    );
  }

  const value = { posts, isLoading, addPost, deletePost, toggleLike };

  return <PostContext.Provider value={value}>{children}</PostContext.Provider>;
}

// ধাপ ৩: কাস্টম হুক দিয়ে সহজে ব্যবহার
export function usePosts() {
  const context = useContext(PostContext);
  if (!context) {
    throw new Error("usePosts অবশ্যই PostProvider-এর ভেতরে ব্যবহার করতে হবে");
  }
  return context;
}

// src/main.jsx — Provider দিয়ে App wrap করা
import { PostProvider } from "./context/PostContext";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <PostProvider>
      <App />
    </PostProvider>
  </React.StrictMode>,
);

// src/pages/HomePage.jsx
import Header from "../components/Header";
import CreatePostBox from "../components/CreatePostBox";
import Feed from "../components/Feed";
import { usePosts } from "../context/PostContext";

export default function HomePage() {
  const { posts, isLoading, addPost, deletePost, toggleLike } = usePosts();

  if (isLoading) {
    return (
      <p className="text-center p-10 text-gray-400">পোস্ট লোড হচ্ছে... ⏳</p>
    );
  }

  return (
    <>
      <CreatePostBox onAddPost={addPost} />
      <Feed posts={posts} onDeletePost={deletePost} onToggleLike={toggleLike} />
    </>
  );
}

npm install react-router-dom

/                    → HomePage (মূল নিউজফিড)
/post/:id            → PostDetailPage (একটা পোস্টের বিস্তারিত)
/profile/:author     → ProfilePage (একজনের সব পোস্ট)

// src/main.jsx
import { BrowserRouter } from "react-router-dom";
import { PostProvider } from "./context/PostContext";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <PostProvider>
        <App />
      </PostProvider>
    </BrowserRouter>
  </React.StrictMode>,
);

// src/App.jsx — এখন শুধু Route ডিফাইন করে
import { Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import HomePage from "./pages/HomePage";
import PostDetailPage from "./pages/PostDetailPage";
import ProfilePage from "./pages/ProfilePage";
import NotFoundPage from "./pages/NotFoundPage";

export default function App() {
  return (
    <div className="min-h-screen bg-gray-100">
      <Header />
      <main className="max-w-xl mx-auto p-4 flex flex-col gap-4">
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/post/:id" element={<PostDetailPage />} />
          <Route path="/profile/:author" element={<ProfilePage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
    </div>
  );
}

import { Link, useNavigate, useParams } from "react-router-dom";

// Link — anchor ট্যাগের মতো, কিন্তু পেজ রিলোড হয় না
<Link to={`/profile/${author}`} className="font-semibold hover:underline">
  {author}
</Link>;

// src/pages/PostDetailPage.jsx
import { useParams, Link } from "react-router-dom";
import { usePosts } from "../context/PostContext";
import EngagementBar from "../components/EngagementBar";

export default function PostDetailPage() {
  const { id } = useParams(); // /post/123 → id = "123"
  const { posts, toggleLike } = usePosts();

  const post = posts.find((p) => p.id === Number(id));

  if (!post) {
    return (
      <div className="text-center py-10 text-gray-400">
        <p>এই পোস্টটি খুঁজে পাওয়া যায়নি।</p>
        <Link to="/" className="text-blue-600">
          ফিডে ফিরে যান
        </Link>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-lg shadow p-6 flex flex-col gap-3">
      <Link to="/" className="text-sm text-blue-600">
        ← ফিডে ফিরে যান
      </Link>
      <div className="flex items-center gap-2">
        <span className="text-3xl">{post.avatar}</span>
        <div>
          <Link
            to={`/profile/${post.author}`}
            className="font-semibold text-gray-800 hover:underline"
          >
            {post.author}
          </Link>
          <p className="text-xs text-gray-400">{post.timestamp}</p>
        </div>
      </div>
      <p className="text-gray-700 text-lg">{post.content}</p>
      {post.image && (
        <img src={post.image} alt="পোস্টের ছবি" className="rounded-lg w-full" />
      )}
      <EngagementBar
        postId={post.id}
        likes={post.likes}
        comments={post.comments}
        shares={post.shares}
        onToggleLike={toggleLike}
      />
    </div>
  );
}

// src/pages/ProfilePage.jsx
import { useParams } from "react-router-dom";
import { usePosts } from "../context/PostContext";
import Feed from "../components/Feed";

export default function ProfilePage() {
  const { author } = useParams(); // /profile/রাফি হাসান → author
  const { posts, deletePost, toggleLike } = usePosts();

  const authorPosts = posts.filter((post) => post.author === author);

  return (
    <div className="flex flex-col gap-4">
      <div className="bg-white rounded-lg shadow p-4">
        <h2 className="text-xl font-bold">{author}</h2>
        <p className="text-sm text-gray-500">{authorPosts.length}টি পোস্ট</p>
      </div>
      <Feed
        posts={authorPosts}
        onDeletePost={deletePost}
        onToggleLike={toggleLike}
      />
    </div>
  );
}

// src/hooks/useFetchPosts.js
import { useState, useEffect } from "react";

export function useFetchPosts(url) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!url) return;

    const controller = new AbortController();

    async function fetchData() {
      try {
        setIsLoading(true);
        setError(null);
        const res = await fetch(url, { signal: controller.signal });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const json = await res.json();
        setData(json);
      } catch (err) {
        if (err.name !== "AbortError") setError(err.message);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
    return () => controller.abort();
  }, [url]);

  return { data, isLoading, error };
}

// যেকোনো কম্পোনেন্টে সহজে ব্যবহার
function RemoteFeed() {
  const {
    data: posts,
    isLoading,
    error,
  } = useFetchPosts("https://api.example.com/posts");

  if (isLoading) return <p>লোড হচ্ছে...</p>;
  if (error) return <p className="text-red-500">Error: {error}</p>;

  return <Feed posts={posts} />;
}

// src/hooks/useLocalStorage.js
import { useState, useEffect } from "react";

export function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// PostContext.jsx-এ ব্যবহার — posts এখন রিফ্রেশ করলেও থেকে যাবে
const [posts, setPosts] = useLocalStorage("posts", []);

import { memo } from "react";

const PostCard = memo(function PostCard({ post, onDelete, onToggleLike }) {
  console.log("রেন্ডার হচ্ছে:", post.author);
  // ... বাকি কোড আগের মতোই
});

export default PostCard;

// ❌ সমস্যা — প্রতি render-এ নতুন ফাংশন তৈরি হয়
//    → React.memo কাজ করে না, কারণ props প্রতিবার "নতুন" মনে হয়
function PostProvider({ children }) {
  function deletePost(id) {
    /* ... */
  } // প্রতিবার নতুন reference!
  // ...
}

// ✅ সমাধান — useCallback দিয়ে ফাংশন memoize করা
function PostProvider({ children }) {
  const deletePost = useCallback((id) => {
    setPosts((prev) => prev.filter((post) => post.id !== id));
  }, []); // dependency নেই, একই ফাংশন সবসময়

  // ...
}

function HomePage() {
  const { posts } = usePosts();

  // ✅ totalLikes শুধু posts পরিবর্তনে recalculate হবে
  const totalLikes = useMemo(() => {
    return posts.reduce((sum, post) => sum + post.likes, 0);
  }, [posts]);

  // ✅ sortedPosts শুধু posts পরিবর্তনে recalculate হবে
  const sortedPosts = useMemo(() => {
    return [...posts].sort((a, b) => b.likes - a.likes);
  }, [posts]);

  return (
    <>
      <p>মোট লাইক: {totalLikes} ❤️</p>
      <Feed posts={sortedPosts} />
    </>
  );
}

import { lazy, Suspense } from "react";

// Lazy load — /profile-এ না গেলে এই কোড লোড হবে না
const ProfilePage = lazy(() => import("./pages/ProfilePage"));

function App() {
  return (
    <Suspense fallback={<p>পেজ লোড হচ্ছে...</p>}>
      <Routes>
        <Route path="/profile/:author" element={<ProfilePage />} />
      </Routes>
    </Suspense>
  );
}

npm run build

npm install -g netlify-cli
npm run build
netlify deploy --prod --dir=dist

React Basics ✅ (এই টিউটোরিয়াল)
    ↓
TypeScript with React
    ↓
React Query (TanStack Query) — Server State Management
    ↓
Zustand বা Redux Toolkit — Client State Management
    ↓
Next.js — Full Stack React Framework (SSR, SSG, API Routes)
    ↓
Testing — React Testing Library + Vitest