Jinsi ya Kutumia Components na Props katika React

Jifunze jinsi ya kutumia Components na Props katika React ili kutengeneza reusable, modular, na interactive UI elements. Components zinasaidia kupanga code vizuri, na props zinaruhusu kuingiza data kwenye components mbalimbali.

Mfano wa Code:

Create a Functional Component

// src/Greeting.js
import React from 'react';

function Greeting(props) {
return <h2>Hello, {props.name}!</h2>;
}

export default Greeting;


Use Component with Props in App.js

import React from 'react';
import Greeting from './Greeting';

function App() {
return (
<div className="App">
<Greeting name="Faustine" />
<Greeting name="Aisha" />
<Greeting name="John" />
</div>
);
}

export default App;


Maelezo ya Code:

Component: Greeting ni functional component inayopokea props.

Props: Hizi ni properties zinazotumwa kutoka parent component (App) kwenda child component (Greeting).

Hii inaruhusu component kuwa reusable na dynamic.

Tips za Components na Props:

Components ziwe small and focused (single responsibility).

Props ni read-only; usiya-modify props ndani ya child component.

Tumia defaultProps au destructuring kwa usability zaidi:

function Greeting({ name = "Guest" }) {
return <h2>Hello, {name}!</h2>;
}


🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509