# Pengenalan Svelte

Svelte adalah framework javascript yang modern, cepat dan handal. Keunggulan menggunakan framework utamanya adalah standarisasi kode dan reusable komponen.

### Mengapa Svelte

* Write less code
* No virtual DOM
* Truly reactive

### Installasi

Untuk instalasi dan membuat project, lakukan langkah-langkah berikut:  

* npx degit sveltejs/template nama-project
* npm install
* npm run dev

Sekarang aplikasi sudah bisa dibuka melalui [http://localhost:5000](http://localhost:5000/)

![](/files/-MjbqLGCoB1Exak2BsII)

### Struktur Halaman

Struktur halaman svelte sangat sederhana mirip seklai dengan HTML biasa. Terdiri dari tag \<script> untuk mengelola kode-kode javascript, tag-tag html biasa, dan dilengkapi dengan tag \<style> untuk css.

```markup
<script>
	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>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>
```

### Prop

prop adalah variabel yang diexport dari external. variabel ini bisa dilempar dari parent saat memanggil komponen, maupun dari url. Pada contoih kode di atas, name adalah sebuah prop, yang ditandai dari kata kunci : export.

Jika kita buka file src/main.js

```javascript
import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		name: 'world'
	}
});

export default app;
```

Tampak bahwa ketika memanggil komponen App.Svelte, melempar sebuah props dengan nama "*name*" dan value "*world*".

### State

state adalah suatu variabel yang dibuat di internal dan value-nya bisa berubah-ubah tergangung pada operasi yang berhubungan dengan variabel tersebut. Untuk membuat state cukup dengan membuat variabel seperti biasa dengan kata kunci let maupun const.

Pada contoh kode berikut, selamat adalah sebuah state, yang isinya berubah-ubah tergantung jam. Jika PM akan berisi "*malam*" dan sebaliknya akan berisi "*pagi*".&#x20;

```javascript
<script>
	export let name

	let selamat = "pagi"
	
	if (new Date().toLocaleString("en-US", { hour: 'numeric', hour12: true }).split(" ")[1] === "PM") {
    selamat = "malam"
  } 
</script>

<main>
	<h1>Selamat {selamat} {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://seri-belajar-pemrograman.rijalasepnugroho.com/svelte/pengenalan-svelte.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.