একটি কম্পোনেন্ট হলো JSX রিটার্ন করা একটি JavaScript ফাংশন। এটাই পুরো সংজ্ঞা — এই অংশে আপনি যা কিছু শিখবেন তা এই একটি ধারণা দিয়ে আপনি কী করতে পারেন তাই।
function Welcome() {
return <h1>Hello, world!</h1>;
}কম্পোনেন্টের নাম সবসময় ক্যাপিটালাইজ করুন
কম্পোনেন্টের নাম অবশ্যই বড় হাতের অক্ষর দিয়ে শুরু হতে হবে — Welcome, welcome নয়। একটি কম্পোনেন্টকে একটি সাধারণ HTML ট্যাগ থেকে আলাদা চিনতে React ঠিক এই নিয়মটাই ব্যবহার করে; <welcome />-কে একটি (অবৈধ) HTML এলিমেন্ট হিসেবে গণ্য করা হবে, আপনার কম্পোনেন্ট হিসেবে নয়।
একবার সংজ্ঞায়িত হয়ে গেলে, একটি কম্পোনেন্ট অন্য যেকোনো JSX ট্যাগের মতো ব্যবহৃত হয়:
function App() {
return (
<div>
<Welcome />
</div>
);
}বাস্তব React প্রজেক্ট প্রতিটি কম্পোনেন্টকে নিজের ফাইলে রাখে, JavaScript মডিউল পাঠে শেখা ES module export/import ব্যবহার করে:
// Welcome.jsx
export default function Welcome() {
return <h1>Hello, world!</h1>;
}// App.jsx
import Welcome from './Welcome';
export default function App() {
return (
<div>
<Welcome />
</div>
);
}বাস্তবে পুরো ধারণাটা এটাই — ছোট অংশ একত্রিত হয়ে বড় কিছু হয়ে ওঠে:
function Header() {
return <h1>My Site</h1>;
}
function Footer() {
return <p>© 2026</p>;
}
function App() {
return (
<div>
<Header />
<p>Page content goes here.</p>
<Footer />
</div>
);
}