Learn to Code via Tutorials on Repl.it!

← Back to all posts
Svelte Web Framework Tutorial #2 - Routify, components and reactivity
h
xfinnbar (149)

Requirements

For you to be able to follow along with this guide, you'll need to understand:

What is a component?

A component is a piece of HTML, CSS and JavaScript that you can reuse multiple times in your site. For example, I made a loading spinner. It looks like this:

<span  class="spinner"  ><div  class="line"  /></span>

<style>
.spinner  {
position:  fixed;
top:  50%;
left:  50%;
margin-top:  -35px;  /* Negative half of height. */
margin-left:  -35px;  /* Negative half of width. */
width:  70px;
height:  70px;
display:  flex;
align-items:  center;
justify-content:  center;
}
.line  {
width:  10%;
height:  100%;
background:  rgb(0,  100,  200);
animation:  rotate  1s  ease;
animation-iteration-count:  infinite;
} 
@keyframes  rotate  {
from  {
transform:  rotate(0deg);
}
to  {
transform:  rotate(360deg);
}
}
</style>

If I wanted to use it in multiple places, I'd have to copy the code every time I make a change. In Svelte, I can create a file and therefore component called Spinner.svelte. Then, I can import the file in another page like so:

<script> // Only have one of these!!!
import  Spinner  from  './Spinner.svelte' // ./Spinner.svelte is the path to the file. If you are in pages, you'll need to use a '../' before it instead to go back a directory.
</script>

and then use it in your HTML like this:

<Spinner />

Understanding how pages work in Routify

Routify is a file-based router - this means that components (.svelte files) are pages and folders are, well, folders. Let me show you an example:
src/pages/index.svelte - example.com
src/pages/login.svelte - example.com/login
src/pages/app/dashboard.svelte - example.com/app/dashboard

Understanding the template

Now that you've created your Routify app, There should be some files in your repl or folder. You should see a src folder. This is where your code lives. First, let's open up App.svelte. You should see that near the top of the file we are importing a thing called Router. This is routify doing it's magic. Below that, you should see a CSS file being imported. This is the CSS file in assets. Files in assets are served normally and are not touched by Svelte at all. It controls the CSS for all components (More on that later). Then, we use the Router in the HTML, which shows all the pages.

Next, Let's take a look at the pages/index.sveltefile. This file is the starting page for our site, and is what the user sees when they enter our website. As you can see, it imports metatags. Metatags allow you to specify info about your page for the browser and other websites, for example, Discord's link previews. metatags.title also sets the title of the site in the browser.

The _fallback.svelte file is the page that is shown when there is no page found.

Building a counter example

The good old counter example. Here is the end result: https://Svelte-Counter-Example.xfinnbar.repl.co (Code: https://replit.com/@xfinnbar/Svelte-Counter-Example#src/pages/index.svelte). This teaches the concepts of reactive state well. Reactive state is a thing that allows you to sync up your JavaScript variables with your HTML. It's very useful. First, let's create some basic HTML. Open up src/pages/index.svelte and write any HTML you like. My HTML looks a bit like this:

<button>Click me</button>
<h1>You have clicked the button x times!</h1>

Now for the fun bit, the JavaScript. First, let's open a script tag and declare a variable.

<script>
var count = 0;
</script>

In Svelte, we can execute JavaScript in our HTML using braces. Let's edit the h1 to show this working:

<h1>You have clicked the button {count} times!</h1>

Now, if you assign a value to that variable, it will be reflected in the HTML. So let's test that out by adding a click event to our button!

<button on:click={() => count++}>Click me</button>

In Svelte, we use events using the on:syntax. If you don't understand the stuff inside the braces, it's an arrow function, which executes count++, adding one to count. So now let's test it.

Uh oh.

It doesn't work??? Well, it does work, but when we display the variable, it is not re-rendered every time we change it! To fix this, we can use a reactive declaration. Reactive declarations re-render the HTML every time the JS variable changes. Change the var to a $:. It should now be working!

That's it for today!

Comment below and I will mention you to give you a notification when the next one comes out! Found any flaws in the tutorial? I'd love to fix them. Comment them below.