Question

What are the components in the Svelte.js application?

Answer 1

In Svelte.js, an application is made of one or more components. A component is a reusable, self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together. The components are the building blocks of Svelte applications and are written into .svelte files using a superset of HTML. The 'Hello World' example in the code editor is a simple component.

The <script> section

The <script> section contains the JavaScript that runs when a component instance is created. The variables declared at the top level are 'visible' from the component's markup. Svelte handles the component state by top-level variables, and they are reactive by default.

1. <script>  
2.   export let name;  
3. </script>  

The markup section

In this section you can insert any HTML. You can also insert here valid JavaScript expression inside single curly brackets ({}).

1. <main>  
2.   <h1>Hello {name}!</h1>  
3.   <p>Visit the <a href="https://abc.com">Svelte tutorial</a> Here you can learn Svelte.</p>  
4. </main>  

The <style> section

This is used to add CSS in the application.

For example:

1. <style>  
2.   main {  
3.     text-align: center;  
4.     padding: 1em;  
5.     max-width: 240px;  
6.     margin: 0 auto;  
7.   }  
8.   h1 {  
9.     color: #ff3e00;  
10.     text-transform: uppercase;  
11.     font-size: 4em;  
12.     font-weight: 100;  
13.   }  
14.   @media (min-width: 640px) {  
15.     main {  
16.       max-width: none;  
17.     }  
18.   }  
19. </style>