Svelte - Tutorial untuk Pemula

Dalam tutorial ini, kita akan melihat dasar-dasarnya dengan membangun aplikasi fiksi sederhana.

Ada baiknya melihat file dan folder yang ditemukan dalam aplikasi Svelte Kita.

> node_modules
> public
> src
.gitignore
package-lock.json
package.json
README.md
rollup.config.js

Ini secara mengejutkan sangat sederhana pada pandangan pertama, dibandingkan dengan struktur file dan folder seperti yang ditemukan di pesaing seperti Angular dan Vue.

Di bagian bawah kita melihat rollup.config.js yang merupakan modul bundler untuk JavaScript. Anggap saja sebagai pesaing Webpack dan Parcel.

Selanjutnya, kami memiliki / src yang mencakup .js dan App.svelte.

utama.js adalah titik awal / entri aplikasi.

import App from './App.svelte';

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

export default app;

Seperti yang Kita lihat, ia mengimpor file lain di bagian atas, yang merupakan komponen awal untuk aplikasi. Ini juga menentukan target, yang menentukan ke mana output aplikasi akan pergi, dan properti apa pun dalam bentuk objek alat peraga.

Dalam App.svelte:

<script>
	export let name;
</script>

<style>
	h1 {
		color: purple;
	}
</style>

<h1>Hello {name}!</h1>

Di sini, kami memiliki 3 blok bangunan dasar dari kerangka kerja Javascript modern:

• Logika<krip></skrip> 
• Gaya
• Templat HTML