How to add components in Svelte

In our last article (here), We learn how to get started with the Svelte. In this article, we see:

• How to add data in Svelte HTML
• How to add Components in Svelte

In the App.svelte file under the main tag, remove all the contents of <p>

and add the following:

<h1>Hello {authorName}!</h1>

Under the main.js, and replace the App content with:

const app = new App({
  target: document.body,
  props: {
    name: 'world',
    authorName: 'Ash'
  }
});

Refresh the webpage and we'll see

So, it's easy to add the data in the Svelte.  Everything in Svelte is component-based. Above, we added data in the default component. The upcoming section shows how to create the new component in Svelte.

Create Component

Create a new file FistComponent.svelte and add the following:

<p> This is my first component </p>

<style>
  p {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }
</style>

Go to the App.svelte and the following line under the script tag:

import FirstComponent from './FirstComponent.svelte';

And to render the component in the main tag add:

<FirstComponent />

That's it. You have added your first component in the Svelte.