How I moved from React to Svelte
Tags: react, svelte, webdev, javascript
Published: 2023-08-28 22:43:11

In today's ever-evolving front-end landscape, React has been the crown jewel for many developers, including me. Its component-based structure, the efficiency of the Virtual DOM, and the vast community support made it a clear favorite. 



![Bill Burr However ...](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofsvuv09pire2o0xdh00.png)


Another thing called [Svelte](https://svelte.dev/) reached my ears. So I jumped into messing around with it and here is what I found:

## 1. Why Svelte?

Before diving into the transition, it's important to understand why one might consider moving. Svelte brings:

**Simplicity**: No Virtual DOM, less boilerplate, and straightforward syntax.

**Performance**: Svelte compiles components to vanilla JavaScript at build time, making it incredibly fast.

**Reactivity**: Reactive statements make data binding a breeze.

## 2. Initial Steps

The first thing I did was set up a Svelte project using Svelte's official template. Then, I spent some quality time with the official [Svelte tutorial](https://learn.svelte.dev/tutorial/welcome-to-svelte), which provides hands-on experience with the framework's core concepts.

## 3. Translating Components

Moving components from React to Svelte involved understanding the subtle differences:

_JSX vs Svelte's Template Language_: Instead of JSX, Svelte uses its HTML-like syntax, which made templates much more readable.

_State Management_: In Svelte, mutable state is handled with simple variables, and reactivity is achieved with a mere `$:` before a statement.

## 4. Event Handling
While React uses synthetic events, Svelte employs native event listeners. Transitioning meant:
 
Replacing `onClick` with `on:click`. 

Eliminating `event.persist()` since Svelte uses native events.

## 5. Lifecycle Methods
React's lifecycle methods such as `componentDidMount` or `componentWillUnmount` got translated to Svelte's `onMount` and `beforeDestroy`.

## 6. Styling
Moving from CSS-in-JS (or any other React styling paradigm) to Svelte's scoped styles was refreshing. Each Svelte component gets its own encapsulated style, reducing the fear of global styles interfering with component-specific designs.

## 7. State Management on Steroids
While React has `Context` or `Redux` or `Zustand` for global state management, Svelte offers stores. These writable and readable stores made state management straightforward and less verbose.

## 8. Integrations & Plugins
Transitioning also meant looking for equivalent Svelte plugins and integrations or creating custom solutions when needed. Luckily, the Svelte community is robust and growing, offering ample resources.

## 9. Community and Support
I won't lie; the React community is vast. But the Svelte community, although smaller, is enthusiastic and rapidly expanding. Platforms like Discord, Reddit, and Stack Overflow provided ample support during my transition.

## 10. Conclusion

The journey from React to Svelte was awesome. While both have their strengths and use cases, Svelte's simplicity, speed, and clean syntax it's all I wanted. 

All my new projects this year were built with [Svelte](https://svelte.dev/). Here is my last one (a solo adventure):

[https://salarioo.com](https://salarioo.com?referrer=dev.to) - a job board with salaries only. :rocket:

![Salarioo.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mcq8qrf5jmtm01ucr6t.png)

On another project (full blown e-commerce) I encouraged my team of experienced React developers to try it out and they loved it and yes we have almost finished it using Svelte. 

That said I doubt I will go back to React. :coffin:

In another words **Svelte** ruined **React** for me just as [The Expanse](https://www.imdb.com/title/tt3230854/) ruined **every other space science fiction**.

:fire:

![The Expanse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfoyup7briipjmqtwor5.png)

:fire:

**Have you tried Svelte yet?** 

Share your experiences and thoughts below and thank you for reading!

If you enjoyed this post and want to stay updated, follow me on [Twitter](https://twitter.com/KedziorArtur) for the latest updates and check out my projects on [GitHub](https://github.com/kedzior-io).


May the code be with you!