Svelte posts
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
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, you will see something like this.
If you are using your favorite Code Editor (VS Code cof cof 🤭) you will see the following folder structure.
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.
<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.
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.
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.
Top comments (0)