Svelte – Make Prev To Component

1 min read


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….

Bima Sena

Leave a Reply

Your email address will not be published. Required fields are marked *