The Building Blocks of Svelte Components

The Building Blocks of Svelte Components

Ferenc Almasi β€’ Last updated 2020 September 12 β€’ Read time 1 min read
  • twitter
  • facebook

Svelte is built up from components, just like React, Angular, or Vue. The difference from them is that in Svelte, you have everything in one place; your logic, the styles, and your markup as well. The structure of a Svelte component looks like the following:

Copied to clipboard!
// The building blocks of a svelte app are components
// They are made up of three parts, all optional ⬇️

<script>
  // Your script
</script>

<style>
  /* your CSS */
</style>

<!-- Your HTML markup -->
App.svelte

These components are written into .svelte files and all three sections are optional.

The Building Block of Svelte
If you would like to see more Webtips, follow @flowforfrank

Looking into Svelte 3

Resources:

  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.