Jinsi ya Kutumia JS Classes kwa Component Structure

JavaScript Classes hukuwezesha kuunda components modularly, kufanya code iwe readable, reusable, na maintainable. Ni mbadala wa function-based components.

✅ A. HTML Example
<div id="app"></div>

✅ B. JavaScript (Class Component Example)
// Define a Card component using JS Class
class Card {
constructor(title, content) {
this.title = title;
this.content = content;
}

render() {
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<h2>${this.title}</h2>
<p>${this.content}</p>
`;
return card;
}
}

// Use the component
const app = document.getElementById('app');
const card1 = new Card('Faulink Card 1', 'This is a sample card content.');
const card2 = new Card('Faulink Card 2', 'Another example of card content.');

app.appendChild(card1.render());
app.appendChild(card2.render());

✅ C. CSS (Optional Styling)
.card {
background: #0d6efd;
color: #fff;
padding: 20px;
border-radius: 10px;
margin: 10px 0;
transition: transform 0.3s;
}

.card:hover {
transform: translateY(-5px);
}

✅ Jinsi Inavyofanya Kazi

class → inaunda blueprint ya component

constructor → inaseti properties (title, content, etc.)

render() → inatengeneza DOM element ya component

Components zinakuwa modular, reusable, maintainable

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

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

📲 WhatsApp Msaada:
https://wa.me/255693118509