React components හැඳින්වීම

ඕනෑම වෙබ් අඩවියක් දෙස බලන්න. එය ස්වාධීන බ්ලොක් කිහිපයකින් සමන්විත වේ: header, sidebars, footer, content. මෙම බ්ලොක් React හි අදහස් කරන අර්ථයෙන් components යැයි අපට පැවසිය හැකිය.

එම header එක දෙස බැලුවහොත්, එහි logo එක සහිත බ්ලොක්, contacts බ්ලොක්, menu බ්ලොක් වැනි දේවල් වෙන්කර හඳුනාගත හැකිය. එනම් components වෙනත් subcomponents වලින් සමන්විත විය හැකිය.

එලෙසම React හිද වෙබ් අඩවියක් components කුලකයකින් ගොඩනගා ඇති අතර, ඒවා ප්‍රත්‍යාවර්තව වෙනත් components අඩංගු කළ හැකිය.

React හි එක් එක් component වෙනම module එකක් වේ. සාමාන්‍යයෙන් වැඩ වර්ධනය ප්‍රධාන component එක වන App සමඟ ආරම්භ වේ, එය අනෙක් සියල්ල අඩංගු කරයි.

අපි නව components සෑදීමට පුහුණු වෙමු.

උදාහරණයක් ලෙස අපට product දත්ත ප්‍රදර්ශනය කරන component එකක් අවශ්‍ය යැයි සිතමු. මේ සඳහා අපගේ වැඩ කරන ෆෝල්ඩරය තුළ Product.js ගොනුවක් සාදා එහි පහත දැක්වෙන කේතය එකතු කළ යුතුය:

import React from 'react';

function Product() {
	return <p>
		product
	</p>;
}

export default Product;

ඔබට පෙනෙන පරිදි, දැන් අපගේ component එක text සමඟ ඡේදයක් return කරයි. ඊළඟ පාඩම් වලදී අපි මෙම කේතය product දත්ත return කරන පරිදි සංවර්ධනය කරමු. නමුත් දැනට ආරම්භක text සහිත ඡේදයක් තබමු.

දැන් අපි සෑදූ component එක App component එක තුළ ප්‍රදර්ශනය කරමු. දැන් අපගේ App හි පහත කේතය ඇතැයි සිතමු:

import React from 'react';

function App() {
	return <div>
		text
	</div>;
}

export default App;

පළමුව අපි සෑදූ product component එක import කළ යුතුය:

import React from 'react';
import Product from './Product'; // product import කරමු

function App() {
	return <div>
		text
	</div>;
}

export default App;

මෙවැනි import කිරීමකින් පසුව, App component එක තුළ Product component එක භාවිතා කළ හැකිය.