πŸŽ‰ We just launched a new HTML course! Get 3 courses with 33% off! πŸŽ‰
The Building Blocks of Svelte Components

The Building Blocks of Svelte Components

Ferenc Almasi β€’ πŸ”„ 2020 September 12 β€’ πŸ“– 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:

// 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
Copied to clipboard!

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
Looking to improve your skills? Learn how to build reactive apps with Svelte + Tailwind.
Master Svelte

Resources:

Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundreds of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended