Understand the Structure of a Svelte Component
In svelte, you define components in a file.
This is a special file extension that allows you to add your script, style and template all in one place. You’ll see how a counter component will hold state in Svelte as well as interact and style that component through the different parts of the file.
We'll implement the classic counter example that will show you how to update component state.
You can do a deep dive on Svelte with Tomasz Łakomy’s Up and running with Svelte 3
Instructor: [0:01] Svelte files lets you house your HTML, CSS, and JavaScript in a single file. The HTML, CSS, and JavaScript is co-located to that file. Here, we already have our HTML. To show this further, we can add in some other text. We save it. There it is. [0:25] We can come up here and we can add some style tags. Let's give our H1 a color, red. Now, we've styled our H1. Let's also add the typical counterexample. Let's let it start as a four.
[0:52] We'll paste in a little bit of code. We want to show our count and then on the onClick, we want to increment our count. If we save that, there we go.
[1:06] In review, we went over house Svelte components, lets you have HTML, CSS, and JavaScript in a single file. If you want to dive further into Svelte components, I would recommend checking out "Up and Running" with Svelte 3 on Egghead's website.