React Project Folder Structure (React প্রোজেক্টের ফোল্ডার স্ট্রাকচার)

React অ্যাপ তৈরি করার পর যখন আপনি প্রোজেক্ট ফোল্ডার ওপেন করবেন, তখন অনেকগুলো ফাইল ও ফোল্ডার দেখতে পাবেন। একজন বিগিনার হিসেবে এগুলো বুঝতে একটু কঠিন মনে হতে পারে। এই লেকচারে আমরা React প্রোজেক্টের প্রতিটি ফোল্ডার ও ফাইল সহজভাবে ব্যাখ্যা করবো যাতে আপনার শেখা আরও সহজ হয়।

১. node_modules/

এই ফোল্ডারে আপনার প্রোজেক্টে ব্যবহৃত সব লাইব্রেরি, প্যাকেজ এবং তাদের ডিপেন্ডেন্সিগুলো থাকে। আপনি যখন npm install বা yarn install দেন—React, React DOM, Vite বা CRA সহ সব প্যাকেজ এই ফোল্ডারে সেভ হয়।

• আপনাকে কখনোই এই ফোল্ডারের ভিতরে কিছু পরিবর্তন করতে হবে না।
• এটা GitHub-এ পুশ করাও প্রয়োজন নেই।

২. public/

এই ফোল্ডারে স্ট্যাটিক অ্যাসেট থাকে যা ব্রাউজার সরাসরি লোড করে। যেমন:

• favicon.ico — ব্রাউজারের ট্যাবে আইকন
• logo.png — লোগো ফাইল
• robots.txt — SEO সম্পর্কিত ফাইল

Vite প্রোজেক্টে এটি অনেক লাইটওয়েট থাকে।

৩. src/ (সবচেয়ে গুরুত্বপূর্ণ)

React অ্যাপ্লিকেশনের সব কোড থাকে src ফোল্ডারের ভিতরে। এখানেই আপনার Component, CSS, Hooks, Pages, Services ইত্যাদি লিখবেন।

৩.১ main.jsx

React অ্যাপের entry point ফাইল। এই ফাইল থেকে React DOM এর মাধ্যমে অ্যাপটিকে index.html-এ রেন্ডার করা হয়।

৩.২ App.jsx

এটি আপনার পুরো অ্যাপ্লিকেশনের মূল Component। এখান থেকেই রাউটিং, লেআউট এবং প্রধান UI কন্ট্রোল হয়।

৩.৩ assets/

এই ফোল্ডারে ইমেজ, ফন্ট এবং স্ট্যাটিক অ্যাসেট রাখা হয় যা অ্যাপের ভিতরে প্রয়োজন হয়।

৩.৪ components/

এখানে ছোট-ছোট reusable UI component থাকে। যেমন:

• Button
• Navbar
• Card
• Footer

৩.৫ pages/

রাউট ভিত্তিক সম্পূর্ণ পেজগুলো এখানে রাখা হয়। যেমন:

• Home Page
• About Page
• Contact Page
• Dashboard Page

৩.৬ hooks/

Custom React Hooks রাখা হয় এখানে। যেমন:

• useFetch.js
• useAuth.js

৩.৭ context/

React Context API ব্যবহার করলে আপনার global state (Auth, Theme, Cart data ইত্যাদি) এখানে রাখা হয়।

৩.৮ services/

API কল বা backend সার্ভিস ফাইলগুলো এখানে থাকে।

• api.js
• authService.js

৩.৯ styles/

এই ফোল্ডারে global CSS, variables, utility style রাখা হয়।

৪. .gitignore

GitHub বা Git এ পুশ করার সময় যেসব ফাইল বা ফোল্ডার বাদ দিতে চান তা এখানে লিখতে হয়। সবচেয়ে বড়টি হলো:

• node_modules/

৫. package.json

React প্রোজেক্টের "হৃদয়" বলা যায়। এখানে থাকে:

• Project name
• Version
• Dependencies
• Scripts (start, build ইত্যাদি)

৬. package-lock.json

আপনার প্যাকেজগুলোর exact version লক করে রাখে যাতে অন্য কেউ প্রোজেক্ট ইন্সটল করলে একই version পান।

৭. vite.config.js বা webpack.config.js

এগুলো build tool-এর কনফিগারেশন ফাইল। Vite ব্যবহার করলে vite.config.js এবং CRA ব্যবহার করলে Webpack কনফিগ থাকে।

React প্রোজেক্টের জন্য Best Folder Structure

src/
 ├── assets/
 ├── components/
 ├── pages/
 ├── hooks/
 ├── context/
 ├── services/
 ├── styles/
 ├── App.jsx
 ├── main.jsx

শেষ কথা

React প্রোজেক্টে একটি পরিষ্কার ও সুন্দর ফোল্ডার স্ট্রাকচার রাখা খুবই গুরুত্বপূর্ণ। এটি আপনার প্রোজেক্টকে সুসংগঠিত রাখে এবং ভবিষ্যতে স্কেল করতে সাহায্য করে। যত বড় অ্যাপ তৈরি করবেন, তত বেশি ফোল্ডার স্ট্রাকচার গুরুত্বপূর্ণ হয়ে ওঠে।