React.js এ Reusable Components ও Folder Architecture বিস্তারিত ব্যাখ্যা

React.js হলো একটি Component-Based UI লাইব্রেরি, যেখানে বড় অ্যাপকে ছোট ছোট অংশে ভাগ করে তৈরি করা হয়। এই ছোট অংশগুলোকেই Components বলা হয়। ভালো React ডেভেলপার হতে হলে Reusable Components এবং Proper Folder Architecture বোঝা অত্যন্ত গুরুত্বপূর্ণ। এটি শুধু কোডকে পরিষ্কার রাখে না, বরং প্রজেক্ট স্কেল করতে, মেইনটেইন করতে ও টিমে কাজ করা সহজ করে দেয়।

🔵 Reusable Component কী?

যে Component বারবার বিভিন্ন জায়গায় ব্যবহার করা যায় তাকে Reusable Component বলা হয়। উদাহরণঃ Button, Input, Card, Modal, Navbar, Loader ইত্যাদি।

🎯 কেন Reusable Component ব্যবহার করবেন?

• কোড কম লিখতে হয়
• Bug কম হয়
• Design consistency বজায় থাকে
• প্রজেক্ট স্কেল করা সহজ হয়
• পুনরায় ব্যবহারযোগ্যতা বৃদ্ধি পায়

🟢 একটি Simple Reusable Button Component Example

// Button.jsx
function Button({ text, onClick, type = "button" }) {
  return (
    <button type={type} onClick={onClick} className="btn">
      {text}
    </button>
  );
}

export default Button;

➡️ ব্যবহারঃ

import Button from "./components/Button";

function App() {
  return (
    <div>
      <Button text="Save" onClick={() => alert("Saved!")} />
      <Button text="Delete" onClick={() => alert("Deleted!")} />
    </div>
  );
}

একই Component দিয়ে বিভিন্ন কাজ করা যায় — এটিই Reusable Component এর মূল সুবিধা।

🟣 আরও কিছু Common Reusable Component উদাহরণ

• Input Field
• Modal / Popup
• Card Component
• Loader / Spinner
• Table / List Component
• Form Group

🔵 Proper Folder Architecture in React

Folder Architecture হলো এমনভাবে প্রজেক্ট স্ট্রাকচার সেট করা যাতে কোড পড়তে, খুঁজে পেতে, মেইনটেইন করতে সহজ হয়। Proper folder structure বড় অ্যাপ্লিকেশনে অত্যন্ত গুরুত্বপূর্ণ।

📁 Recommended Folder Structure

src/
│── components/
│   ├── ui/
│   │   ├── Button.jsx
│   │   ├── Input.jsx
│   │   └── Card.jsx
│   ├── layout/
│   │   ├── Header.jsx
│   │   └── Footer.jsx
│   └── shared/
│       └── Modal.jsx
│
│── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   └── Contact.jsx
│
│── hooks/
│   ├── useFetch.js
│   └── useAuth.js
│
│── context/
│   └── AuthContext.js
│
│── services/
│   └── api.js
│
│── assets/
│   ├── images/
│   ├── css/
│   └── icons/
│
│── utils/
│   └── helpers.js
│
│── App.jsx
│── main.jsx

🟢 Folder Explanation

📁 components/

এই ফোল্ডারে সব ছোট UI এবং Reusable Components রাখা হয়। যেমনঃ Button, Input, Card, Modal ইত্যাদি।

১. ui/

এই ফোল্ডারে ছোট ছোট basic UI components থাকে।

২. layout/

Header, Navbar, Footer এর মতো layout elements থাকে।

৩. shared/

Modal, Tooltip, Loader ইত্যাদি Shared Components থাকে।

📁 pages/

এখানে প্রতিটি route অনুযায়ী page component থাকে।

• Home.jsx
• About.jsx
• Blog.jsx

📁 hooks/

Custom hooks রাখতে হয় আলাদা ফোল্ডারে → কোড রিইউজ করা সহজ হয়।

📁 context/

Context API দিয়ে global state ব্যবস্থাপনার ফাইল এখানে থাকে।

📁 services/

API বা Backend এর রিকোয়েস্টগুলো আলাদা রাখা হয়।

📁 utils/

Helper functions (যেমন: formatDate, validateEmail) রাখার জন্য।

🔴 কেন Proper Folder Architecture প্রয়োজন?

• বড় প্রজেক্ট মেইনটেইন করা সহজ হয়
• নতুন ডেভেলপার টিমে এলে বুঝতে সময় কম লাগে
• File searching & workflow দ্রুত হয়
• Component reuse বেশি হয়
• Clean & professional project structure তৈরি হয়

🟢 Reusable Component Pattern – Best Practices

• Component ছোট রাখুন (Single Responsibility Rule)
• Props flexible রাখুন
• Component highly customizable করুন
• Common UI Components আলাদা ui/ ফোল্ডারে রাখুন
• Hard coded স্টাইল ব্যবহার এড়িয়ে চলুন

🔵 Example: Highly Reusable Input Component

// Input.jsx
function Input({ label, type="text", value, onChange, placeholder }) {
  return (
    <div className="input-group">
      <label>{label}</label>
      <input 
        type={type}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
      />
    </div>
  );
}

export default Input;

🎯 সারসংক্ষেপ

• Reusable Components React প্রজেক্টে efficiency বৃদ্ধি করে
• Folder Architecture কোডকে professional ও maintainable করে
• UI components, pages, hooks, services — আলাদা ফোল্ডারে রাখা উচিত
• Reusable Component মানে একই কোড দিয়ে বহু কাজ করা