Alright guysss.. balik lagi kita terusin project solo kita tentang Svelte, jadi terakhir sudah sampai di Svelte – Reactive statements.. Okay langsung aja di post ini saya akan merapihkan code dulu menjadi berbentuk component supaya nantinya project/materi ini mudah dibaca (human readable) hahah ….
Okay jadi pada strukture project kita akan menjadi seperti ini ya guyssss…
src
:
├─ App.svelte
├─ components
│ ├─ animations
│ │ └─ custom-transitions.js
│ ├─ Condition.svelte
│ ├─ Counter.svelte
│ ├─ Img.svelte
│ ├─ shapes
│ │ └─ shape.js
│ ├─ Statement.svelte
│ ├─ String.svelte
│ └─ Toggle.svelte
└─ main.js
dan di App.svelte akan seperti ini :
<script>
import Counter from './components/Counter.svelte'
import Toggle from './components/Toggle.svelte'
import Img from './components/Img.svelte'
import String from './components/String.svelte'
import Statement from './components/Statement.svelte'
import Condition from './components/Condition.svelte';
export let name;
</script>
<main>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
<Counter />
<Toggle />
<Img />
<String />
<Statement />
<Condition />
</main>
<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet">
Okay sekarang project kita udah rapih ya.. untuk link github ada disini.. cyaaaa….