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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!