index.html আর index.js কিভাবে connected হয়?
“index.html আর index.js কিভাবে connected হয়?”
কারণ তুমি index.html ফাইলে কোথাও <script src="index.js"> বা কোন লিঙ্ক দেখতে পাচ্ছো না।
চলো বিষয়টা পরিষ্কার করি ধাপে ধাপে। 😊
🧠 প্রশ্ন:
index.html ফাইলে তো কোথাও index.js কে link করা হয়নি। তাহলে কিভাবে কাজ করে বা connect হয়?
✅ উত্তর: এই কনেকশনটা করে Build Tool (যেমন Vite, Webpack, CRA ইত্যাদি)
React app যখন তুমি Vite বা Create-React-App দিয়ে তৈরি করো, তখন:
1. 🛠️ Build Tool (Vite/Webpack) একটি বিল্ড প্রসেস চালায়
এই বিল্ড প্রসেস:
তোমার
index.js(বাmain.jsx) ফাইল থেকে সব dependency বের করে-
CSS, JS, images, সবকিছু bundle করে
-
এবং index.html ফাইলে নিজে থেকে script ট্যাগ ঢুকিয়ে দেয়
2. 🧪 Development-এ কি হয়?
যখন তুমি npm run dev চালাও (Vite/CRA তে), তখন:
Vite/CRA একটি dev-server চালু করে
-
ওরা internally index.html ফাইল detect করে
-
এবং JavaScript bundle (যেমন:
index.js) কে inject করে<body>-র শেষে
তুমি চাইলে npm run build দিয়ে build করলে দেখা যাবে /dist ফোল্ডারে একটি HTML ফাইল তৈরি হবে, যার মধ্যে এইভাবে JavaScript যুক্ত থাকে:
<body>
<div id="root"></div>
<script type="module" src="/assets/index-abc123.js"></script>
</body>
👉 এই স্ক্রিপ্টটা auto-generate হয়।
🔍 সংক্ষেপে বলতে গেলে:
| ফাইল | কাজ |
|---|---|
index.html |
শুধু একটা খালি #root div রাখে |
index.js |
JavaScript দিয়ে React render করে এই #root div এর ভেতরে |
| Build Tool | এই দুটোকে একত্র করে — এবং final HTML ফাইলে <script> ট্যাগ inject করে |
✅ Visualization:
index.html
⬇
<div id="root"></div> ← এই div টার ভেতরে JS থেকে React render হয়
index.js
⬇
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
Vite/Webpack
⬇
Automatically injects <script src="..."> into index.html
📌 Bonus: কোথা থেকে শুরু হয় সব?
React project এ "entry point" হচ্ছে index.js বা main.jsx
এই ফাইলেই ReactDOM.createRoot(...).render(...) দিয়ে পুরো অ্যাপ start হয়।
✅ উপসংহার:
React প্রজেক্টে
index.htmlএবংindex.jsএর সংযোগটা Build Tool (Vite/Webpack) নিজেই manage করে।
তাই তুমি HTML ফাইলে manually<script>link না দেখলেও, সেটা বিহাইন্ড দ্য সিন কাজ করে।