`, `

`) React component එකක් වෙන් කර හඳුනාගැනීමට උපකාරී වේ.

මෙන්න සරලම `Welcome` component එකක උදාහරණයක්:

function Welcome() {
  return <h1>Hello, Welcome to React!</h1>;
}

මෙම `Welcome` component එක වෙනත් component එකක් තුළ භාවිතා කිරීමට, අපට එය HTML tag එකක් ලෙස මෙසේ ලිවිය හැක:

<Welcome />

අපි දැන් `Header` නමින් නව component එකක් නිර්මාණය කර, එය අපගේ ප්‍රධාන `App.jsx` file එක තුළ භාවිතා කරමු. හොඳම පුරුද්දක් ලෙස, අපි අපගේ සියලුම components, `src` folder එක තුළ ඇති `components` නමැති අලුත් folder එකක තබමු.

ඉලක්කගත Folder ව්‍යුහය

මෙම කාර්යය අවසානයේ ඔබගේ `src` folder එකේ ව්‍යුහය මෙසේ දිස්විය යුතුය:

/src
├── /components
│   └── Header.jsx   <-- ඔබ අලුතින් සාදන file එක
├── App.css
├── App.jsx          <-- අපි මෙය edit කරනවා
├── index.css
└── main.jsx

අනුගමනය කළ යුතු පියවර:

1. ඔබගේ project එකේ /src folder එක තුළ components නමින් නව folder එකක් සාදන්න.
2. එම `components` folder එක තුළ Header.jsx නමින් නව file එකක් සාදන්න.
3. `Header.jsx` file එකට පහත කේතය ඇතුළත් කරන්න:

   function Header() {
     return (
       <header style={{ background: '#333', color: 'white', padding: '10px 20px', textAlign: 'center' }}>
         <h1>My Awesome React App</h1>
         <nav>
           <a href="#" style={{ color: 'white', margin: '0 10px' }}>Home</a>
           <a href="#" style={{ color: 'white', margin: '0 10px' }}>About</a>
         </nav>
       </header>
     );
   }
   
   export default Header;

4. දැන්, src/App.jsx file එක විවෘත කරන්න.
5. File එකේ ඉහළින්ම, අපගේ `Header` component එක import කරගන්න (නිවැරදි path එක යොදන්න):

   import Header from './components/Header.jsx';

6. අවසාන වශයෙන්, `App` component එකේ `return` statement එක තුළ, default content එකට ඉහළින් `
   ` ලෙස අපගේ component එක එක් කරන්න:

   function App() {
     // You can remove all the default state and content from Vite
     return (
       <>
         <Header />
         <main style={{ padding: '20px', textAlign: 'center' }}>
           <p>Welcome to the main content area!</p>
         </main>
       </>
     );
   }
   
   export default App;

File එක save කර ඔබගේ browser එක දෙස බලන්න. ඔබ අලුතින් සෑදූ Header එක දැන් ප්‍රධාන පිටුවේ ඉහළින්ම දිස්විය යුතුය!