Understand the Structure of a Svelte Component

Ben Patton
InstructorBen Patton
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated a year ago

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.

egghead
egghead
~ 6 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today