How to create a component in Svelte

 Components are basic building block in a Svelte app. A Svelte component cane made of simple HTML statements , styles, scripts etc.

Property, Reactivity

There can be only one top level script in a component. Here is a Quick example. 

//src/components/Message.svelte

<script> export let message="Hi";</script>

<h1>{message}<h1>

Property can be defined using a reactive assignment with export state. In Svelte assignment add reactivity. With the special operator $ we can make statements reactive too as follows

<script>
	export let title;

	// this will update `document.title` whenever
	// the `title` prop changes
	$: document.title = title;

	$: {
		console.log(`multiple statements can be combined`);
		console.log(`the current title is ${title}`);
	}
</script>