Trying Svelte....(react fanboy)
Tags: svelte, tutorial
Published: 2020-10-03 11:42:43

I am a React guy from the start of my web development career. Today I decided to try Svelte! Heard a lot of good things about Svelte so I'm really curious to see how it goes.

**NOTE:** This is not a tutorial, just my experience.

## What is Svelte?

Official docs say,

> Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.


As usual with every new technology, I decided to make a simple todo list without any databases and all those stuff.


## Setup first project

The setup process was fairly easy, simply clone their repo and you're good to go!

```bash
npx degit sveltejs/template svelte-todolist
```

Now go into the folder and install all the necessary packages,

```bash
yarn install
```

That's it. You're good to go now!

## Building the header component

This is the code I used,

```js
<script>
    // your script goes here
</script>

<div class="header">
    <h3>Svelte Todo list</h3>
</div>

<style>

    .header {
        background-color: orange;
        padding: 1px;
        margin: 0px;
        color: black;
        text-align: center;
        font-size: 15px;
    }

</style>
```
Simple, nothing fancy.

## Building the todo component

The main struggle (initial) I faced is here, unlike react there are no states or hooks. I searched their docs and found that they have a concept called `reactive` which is very similar to `state` in react and vue.

So, this is the final code that I made,

```js
<script>
    let title = ''
    let todos = []

    const addTodo = () => {
        todos = [...todos, {
            "name": title,
            "id": Math.random()
        }]
    }
</script>

<div class="container">
    <div class="box">
        <input bind:value={title} type="text" placeholder="Enter todo" />
        <button on:click={addTodo}>Add</button>
    </div>
    <h2 style="text-align:center">Todos</h2>
    <hr />
   <div class="todos">
    {#each todos as todo}
            <p class="todo-item">{todo.name}</p>
        {:else}
            <p>No Todos</p>
        {/each}
   </div>
</div>

<style>
    .container {
        width: 80%;
        margin: 0 auto;
    }
    .box {
        padding: 10px;
        display: flex;
        justify-content: space-around;
        margin: 10px auto;
    }

    input {
        padding: 10px;
        width: 60%;
        font-family: 'Segoe UI';
        font-weight: bold;
    }

    button {
        padding: 3px 20px;
        border: none;
        background-color: tomato;
        font-family: 'Segoe UI';
        font-weight: bold;
        color: white;
        box-shadow: 2px 2px 5px #ccc;
        border-radius: 4px;
    }

    .todo-item {
        background-color: blue;
        padding: 10px;
        border-radius: 4px;
        box-shadow: 2px 2px 5px #ccc;
        margin: 10px;
        color: white;
        text-align: center;
        width: 50%;
        margin: 20px auto;
    }

    .todos {
        margin: 20px;
    }
</style>
```

This is the output


![Annotation 2020-10-03 170629.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601725006654/B-zW3DBFi.png)

As far as the first impressions go, I really enjoyed the short time that I spent on Svelte. Later, I'll redo the same app with firebase and all those good stuff! Stay tuned. Cheers!