Jifunze misingi ya Svelte na jinsi ya kutengeneza reactive components kwa web apps. Svelte ni JavaScript framework inayobadilisha code yako kuwa highly optimized JavaScript wakati wa build, ikitoa performance bora na syntax rahisi kwa beginners.
Hatua za Kuanzisha Svelte Project:
Create Svelte Project
npm create svelte@latest my-svelte-app
cd my-svelte-app
npm install
npm run dev
App yako itakuwa inapatikana kwenye http://localhost:5173.
Simple Reactive Counter Component
<!-- src/routes/Counter.svelte -->
<script>
let count = 0;
function increment() {
count += 1;
}
function decrement() {
count -= 1;
}
</script>
<div style="text-align:center; margin-top:2rem;">
<h2>Counter: {count}</h2>
<button on:click={increment} style="margin:5px;">Increase</button>
<button on:click={decrement} style="margin:5px;">Decrease</button>
</div>
Use Component in App.svelte
<script>
import Counter from './routes/Counter.svelte';
</script>
<main>
<h1>Welcome to Svelte!</h1>
<Counter />
</main>
Maelezo ya Code:
let count = 0; inatumika kama reactive variable.
{count} inarender automatically kwenye DOM kila inapobadilika.
on:click inashughulikia events kwa simplicity.
Svelte inafanya reactivity automatic bila hooks kama useState au useEffect.
Tips kwa Beginners:
Components za Svelte ni single-file (.svelte) zenye template, script, na styles.
Use reactive statements kwa calculations automatic:
$: doubled = count * 2;
Tumia stores kwa shared state kati ya components.
🔗 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