Svelte for React dev

My main frontend framework is React, I use them in all my commercial project by default. It is some word, the best technology for the project is that you know, but sometimes we need to expand our experience and knowledge. For me, the best way to do this is to try new tech on my personal projects. And this is shine time for Svelte!

The project that I built is to track what booby you feed the baby last time. So my wife can click on a bubble, and add time and category to the list. You can see it deployed here
https://boobs-app.vercel.app/
and also you can take a look full code here:
https://github.com/detoner777/boobs-app

To initialize the svelte project, I use the REPL https://svelte.dev/blog/the-easiest-way-to-get-started
and ready to go.

Svelte is a component-based framework like the most modern popular ones. So if you are familiar with React you will without a problem handle Svelte. Let's take a look first at the project structure:

In the src directory, I have App.svelte this is our root svelte file. And main.js, this is the file has a code:

import App from "./App.svelte";

const app = new App({
  target: document.body,
});

export default app;

and used by rollup for bundling app.

In the component folder is two files which have .svelte

This is how we define Svelte components.

In the Item.svelte component that looks like this:

<script>
  export let time;
  export let boob;
  export let index;
</script>

<style>
  .item {
    font-size: 20px;
    padding: 0.5rem;
    border: 1px solid #03e2fc;
    border-width: 0 0 1px;
    width: 60%;
    margin: 0 auto;
    transition: all 0.3s;
  }
  .active {
    background: rgba(255, 255, 255, 0.1);
    border-width: 0.1px 0;
    transform: scale(1.3);
    margin-bottom: 0.5rem;
    transition: all 0.3s;
  }
</style>

<div class={`item ${index === 0 && 'active'}`}>
  <span>{time}</span>
  <span>{boob}</span>
</div>

it has 3 main sections:

<script>
all js file writs here
</script>

css

<style>
  .item {
    font-size: 20px;
    padding: 0.5rem;
    ...
  }
</style>

and layout:

<div>
  <span></span>
  <span></span>
</div>

In this structure App.svelte components parent for child Boobs.svelte and Item.svelte. Like in React we can pass propse from parent to child. In the App :

 <Item time={event.time} boob={event.boob} {index} />

{index} index value that passed itself. So it's the cool syntax in this case.
In the Item:

<script>
  export let time;
  export let boob;
  export let index;
</script>

Exporting values passed as props to our component.

Svelte based on a "true" reactivity for keeping the DOM in sync with your application state. It mins that you don't need to setState if need to update value, but directly assign new value

in React:

const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}

same in Svelte:

let count = 0;

function increment() {
  count += 1;
}

it youse the same concept but less code to write.

In React, we often use pattern map() to loop over components to render multiple lists and if/else block for conditional rendering. In the Svelte this pattern has a special syntax, intuitive for React developers

 <div class="item-container">
    {#if JSON.parse($events)?.length > 0}
      {#each JSON.parse($events).reverse() as event, index   (event.id)}
         <Item time={event.time} boob={event.boob} {index} />
      {/each}
    {/if}
  </div>

The expression JSON.parse($events).reverse() array but it can be array-like object (i.e. it has a length property). You can loop over generic iterables with each [...iterable].

This is a basic meeting with this technology. Svelte has very detailed and comfortably to use documentation https://svelte.dev/. As a developer personally I don't know when I use this on a real commercial project, but definitely, I will be using him on small apps.