Learning Svelte by Converting a React Example

David Bain — Mon, 23 Nov 2020 14:53:31 +0000

To experiment with Svelte I decided to take some React demo code and re-implement it in Svelte. The goal was to re-implement the functionality using my current Svelte knowledge. It took a bit of reading around to get it right. Overall it took me 3 to 4 days on and off. Now that I have the experience under my belt, I can probably rebuild everything in 3 to 4 hours 🙂.

The original React app was created by John Smilga, a web developer from Los Angeles. BTW you really should check out his awesome React tutorial at youtube.

The app presents a listing of tours, I can imagine it being used as a component for a tour company.

Here's what my version looks like:

To save time and setup, I used the Svelte online Repl to create my version. You can interact with the live demo and source code through the Repl.

My version takes advantage of Svelte's reactive declarations, custom stores and context API.
I used Svelte stores to store and modify the array of tours.
To dynamically manage the read more/show less button, I took advantage of Svelte's reactive declarations. Finally, I used Svelte's context API - setContext, getContext to pass information between components.

So far Svelte has been easy to think about. I like that it uses way less syntax than some of the competing approaches out there. I will do some more experimentation to decide if this is for me.

But first, I hope to do a bit more work on this project to implement fetching from the API. Once I'm done, maybe a video tutorial? Who knows?

DEV Community: David Bain

Learning Svelte by Converting a React Example