Learning Svelte and how it compares to React.js

As I approach my final weeks here in my Software Engineer bootcamp at Flatiron School, I have started to look ahead to the future and have begun looking at various other languages to become familiar with. One that has caught my eye has been the Svelte framework due to its simplicity and the similarities it carries with React. however there are some fundamental differences.

Awesome right? Setting up a svelte application is quite easy. just like react, there is an easy way to create an application. Follow these steps to start it up!

This seems quite familiar? Doesn’t react have a similar process for creating app?

So, our next step is to pull from an external api. In React.js this is accomplished as follows:

Lets see how we do this in Svelte:

Super similar again! The difference is we have to import onMount from Svelte itself and from there it’s pretty self explanatory if you have experience with JSX and JavaScript.

First, we would create a container to hold all of the planets and a component to render each planet. Then I would render the container in the App.js and pass the state into it:

Next, I would map through, the array I received as props into my Planet.js Component:

Finally, I would build out how each planet card would render:

Fun stuff!

Heres How I did it in Svelte!

I was able to create the same exact app, one page, using very similar language taking place all within the App.svelte page. Take a moment to find the similarities of this app to Svelte and what is different. The main takeaways I had with using this are how we set state, fetch, iterate through our arrays and displaying the attributes of each JSON Object.

I find that while the differences are not truly substantive, I believe that the difference between building in Svelte and building in React are based upon the context of the app that you are creating. If you are building a very simple one page application whose primary job is to just render information, probably easier to use Svelte. If you are doing a more robust and dynamic app, React may be better for you. It’s really just based on your priorities! If you would like to learn more about Svelte, here is a link to the documentation, as well as a link to the Github for this simple app I created!

Related posts:

First week at Ironhack was about working in group. My group and I were asked to design a project for a brand of groceries that we had to choose. We chose to work with Naturalia. First of all, we…

I practice Buddhism and have for some time. But I used to keep it a secret, so does that mean I really was not practicing it? I see the irony, indeed I do, but I also sat with fear of ridicule should…

This question has been bugging me lately, at what point in time do you call someone a friend. Does it take you an hour after meeting? A day, a week, 2 weeks, a month, 2 months, a year or may two or…