Quickstart with Svelte 3 - Your first component
Tags: svelte, javascript, webdev, beginners
Published: 2020-05-01 16:36:39

# Svelte posts
1. [Quickstart with Svelte 3](https://dev.to/lukocastillo/quickstart-with-svelte-3-creating-your-first-component-3mm2)
2. [Adding Routing to Svelte App](https://dev.to/lukocastillo/svelte-3-how-to-integrate-with-svelte-routing-4j3b)

Hello everyone, this is a series of posts that I want to write to show the capacities and how to easy is create components with **Svelte**, but before all, we need to start from the beginning.

## What is Svelte? (with my words🙊)

Svelte is a FrontEnd framework as Vue, React, and Angular but with another approach to developing the components and also the way to handle the resources of our Browser, for example, Svelte runs at build time. You can find more detail in this [Link](https://svelte.dev/blog/svelte-3-rethinking-reactivity)
After knowing a little bit about Svelte and we can jump to my favorite part.

## Let's Code!!

Work with Svelte is very simple but before to start, we need to be sure that we have **Installed Node** to execute the following commands, **Note:** _please execute in the same order._

```
npx degit sveltejs/template project-name
cd project-name
npm i
npm run dev
```
Once that the commands have been executed successfully, now you can access in your browser and the app will be running in the server [http://localhost:5000](http://localhost:5000), you will see something like this.

![Browser with svelte](https://miro.medium.com/max/963/1*GT3Rl3vyBF4LFBTuReYh3A.png)

If you are using your favorite **Code Editor** (VS Code cof cof 🤭) you will see the following folder structure.

![Browser with svelte](https://miro.medium.com/max/1650/1*kz3To1JnpDu6WwIj3xCWSA.png)

As you see, the application looks like a normal Javascript application with **package.json** and **src** folder, but the important part here is the following files.

### App.svelte ⚙️

This is the first **Svelte** component in the application, it is for that reason has the extension **.svelte**. Something important here is that all components need to have this extension and also the same structure. There are two important tags here.

**Style:** Here we will have all the CSS styles of the component, and we can use a simple CSS notation.

**Script:** This one, is the section to locate our javascript logic, and also here we can import other components or receive our props as the previous example with the name prop.

### Main.js
This file is the application entry point, so basically here is where we reference the main components of the app. For now, we don’t need to change anything here.

## Creating our first component 📝

At this point, you can play with the **App.svelte** file, maybe changing the styles or add more HTML elements inside, but I want to show you how to create a new component from scratch.

First, we need to create a new file in our src folder, for simplicity, I will call this component **Counter.svelte**, please don’t forget the extension, this is very important.

Our component needs to have 2 important tags, the **style**, and **script** section as we saw in **App.svelte** and also I will add a `<div>` tag, this is a native HTML tag.

The counter has a variable to save the result of the counter and also we need a function to execute every time that we click the button.

```javascript
<script>
  let counter = 0;  // counter variable
  const handleClick = () => { //Function to add 1 to our variable
    counter += 1;
  };
</script>
<style>
  button{
    border:0px;
    background: #3380ef;
    color:white;
  }
</style>
<div class=”counterComponent”>
  <button on:click={handleClick}>plus 1</button>
  <section>My couter is: {counter}</section>
</div>
```
The next step is copy and paste this code in our **Counter** component and then we need to modify the **App.svelte** file to import the new component. The App.Svelte needs to look something similar to this.

![App.svelte modified](https://miro.medium.com/max/1046/1*ifvrVLU4LAsfzu_iA62iEA.png)

If everything is working properly your page will be refreshing automatically and you will see a blue button and every time that you click it, the number will be added by 1.

![Component working](https://miro.medium.com/max/1091/1*rm5HPNflXn0qPeVRRcHQrQ.png)

So, congratulation now you created your first component, I recommend you work more with that, for example, **change styles, add new functionalities** and **create new components**.

## Conclusion 👩‍🎓

Svelte is the new kid in the neighborhood but shows a lot potential and it is a good way to create lightweight apps, maybe it is not convenient to implement in an enterprise application or in a big project but could be very useful for a quick run or middle projects.
Please let me know what do you think about svelte and if you are using it in a project, and I hope that this small tutorial was helpful for you. If you have any questions please, left in the comment section.