Table of contents
What is Svelte?
Svelte is a tool that allows you to build web applications
It allows you to create reactive applications
It's very much like vanilla JavaScript
What makes Svelte different to React?
Does not have a virtual DOM
Does not introduce a new language such as JSX to learn
Svelte essentially allows you to code like you normally would with vanilla javascript, HTML, and CSS, this means that people can pick it up rather quickly coming in. You can then use the added Svelte bits and syntax language to add in reactivity.
As we can see in the below example there's not much going on, I have declared a script block, some HTML using a div that holds some text, and a style tag that styles the class.
<script lang="ts">
let name: string = 'StartName';
</script>
<div class="name-wrapper">
The name is {name}
</div>
<style>
.name-wrapper {
color: rebeccapurple;
}
</style>
What's cool is that we are doing so little to get in the variable, right now it's not that impressive but all we have to do is throw some curly braces around our variable name and it gets displayed on the page.
The other thing to keep in mind is that the CSS and everything are scoped to this file.
I want to keep these short, so this is all I'll show you this week, next week I'll go over changing the name by using a text input and binding that value to the output.