Svelte — The New Kids on the Frontend Framework Block

What is Svelte

Getting Started

The Scripts

File Structure

import App from './App.svelte';const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;

A Svelte Component

<script></script><main></main><style></style>
<script>
export let name;
</script>
<main>
<h1>Hello {name}</h1>
</main>

State and Reactivity

<script>
export let name;
let counter = 0;</script>
<main>
<h1>Hello {name}</h1>
<h2>{counter}</h2>
<button>add</button>
</main>
<script>
export let name;
let counter = 0;const addOne = () => {
counter += 1
}
</script>
<main>
<h1>Hello {name}</h1>
<h2>{counter}</h2>
<button on:click={addOne}>add</button>
</main>

Making more components

<script>
</script>
<main>
<h1>Hello World</h1>>
</main>
<style></style>
<script>
import Hello from './components/Hello.svelte'
export let name;
let counter = 0;const addOne = () => {
counter += 1
}
</script>
<main>
<Hello/>
<h2>{counter}</h2>
<button on:click={addOne}>add</button>
</main>

In summary

Alex Merced is a Full Stack Developer, learn more about his work at AlexMercedCoder.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store