Svelte, Javascript but coolest
Tags: javascript, svelte, webdev, watercooler
Published: 2020-11-02 10:08:47

# This Looks Strange

If you're a first-time Svelte user such as myself, you might be asking yourself, "What is this strange framework, everything seems **not** redundant, **not** confusing and **EASY**, is this even used?" No worries, I have some answers for you first-time Svelte users. Svelte is a compiler that takes your component code and converts it into a clean JS code. "Svelte makes it joyful and to create interactive UIs."

![](https://media1.tenor.com/images/86f10ba7a8990f0915d76dfa374a1b3b/tenor.gif?itemid=3294524)
<figcaption>
Remember all I am offering is the truth, nothing more.
</figcaption>

Svelte does make it joyful once you understand some of the basics that make Svelte so great. Soon you'll be creating apps much sooner and learn along with the process, giving Agent Smith a much-deserved prescription of Svelte magic if you catch what I'm pitching. Svelte is straightforward and comes with [batteries](https://www.swyx.io/svelte-why/) and the learning curve is much less and you understand much quickly with a lot less boilerplate code. Let's take a look at some of the basics of creating Svelte apps.



# Creating a New Svelte Application

![](https://media1.tenor.com/images/b8a73bad29f68ed19a31e211f19645c6/tenor.gif?itemid=17872701)
<figcaption>
Know HTML, know Svelte.
</figcaption>

[Cybernetically enhanced web apps](https://svelte.dev/), and so are the creators, contributors and [discord chat](https://svelte.dev/chat) most friendly and welcoming members of Svelte have made it simple for anyone with HTML and Javascript experience to create Svelte applications. Just enter in these 4 commands (separately) in your command prompt to get started:

```
npx degit sveltejs/template my-coolest-svelte-project
cd my-coolest-svelte-project
npm install
npm run dev
```

You will find .svelte files and Svelte components are built on top of HTML. Also, we have a cool [REPL](https://svelte.dev/repl) and [Examples](https://svelte.dev/examples).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/77nlja5wtx0f1ugdicty.png)
<figcaption>
Just add data. No boilerplate
</figcaption>

Variables are reactive. No Virtual DOM. [Don't battle with what's rendered](https://www.youtube.com/watch?v=AdNJ3fydeao). You [write less code](https://www.youtube.com/watch?v=BzX4aTRPzno) which means fewer errors.

# Props and Imports

Zero worries components "But wait? where are the complex classes that are exported in React?" Just export variables that are going to be props as simple as that 😉.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qyluns7oz0j09r4sjcn9.png)

# State via Stores

Svelte's most simplistic approach needs no installation of external libraries and anything on the store can be manipulated by using `$` before what is variable is in the store. You do not need Redux.

Please read more about how joyful svelte can be at [Shawn's blog](https://www.swyx.io/svelte-why/) and also about [Stores + Auth](https://www.swyx.io/svelte-auth/)

![](https://media1.tenor.com/images/b92b971b752c4dc78b60b0be823910dc/tenor.gif?itemid=19038192)
<figcaption>
Were you listening to me neo or looking at the woman in the red dress? *I was..* Look again! 
https://youtu.be/YgJ5ZEn67tk?t=38
</figcaption>


Now you know how to start with Svelte you have become much cooler 


Links
* [github](https://github.com/sveltejs/svelte)
* [svelte.dev](https://svelte.dev/)

Community
* [Official Twitter](https://twitter.com/sveltejs)
* [Svelte Society](https://www.youtube.com/channel/UCZSr5B0l07JXK2FIeWA0-jw)
* Come join our [discord](https://svelte.dev/chat) You can find me active there and when you get stuck somewhere say hi!

Other favourite talks.
* [Ron Au: Web à la Mode
](https://www.youtube.com/watch?v=7J3Ij3vuIOY)
* [Rich Harris - Rethinking reactivity](https://www.youtube.com/watch?v=AdNJ3fydeao)
* [The Return of 'Write Less, Do More' by Rich Harris | JSCAMP 2019](https://www.youtube.com/watch?v=BzX4aTRPzno)





![](https://media1.tenor.com/images/5e6a720ede0f7556e8ea9f8004061a2a/tenor.gif?itemid=14310969)




###### post inspired from [here, React, Javascript but Cooler] (https://dev.to/jlonetree/react-javascript-but-cooler-2o59)