Installation , Components , Properties and DOM events in a nutshell Hi rocks, Sasha here. In this article we are going to see some core mechanics of Svelte, so you can easily start making your own webapp with this almost perfect UI library. Let's start with setup. Open your terminal, go to the folder you want to create project and execute the next commands: npx svelte3-app
npm run dev This will create a standard "Hello World" project configured with . The project's structure is pretty standard. The entry point is in . It only renders on body and passes name prop to it. rollup src/main.js App.svelte Unfortunately, you have to add at every import, but you can fix it easily by updating : go to object and add: .svelte rollup.config.js resolve extensions: [ ] ".svelte" Component structure As you see, a Svelte component incorporates all the necessary inside a single file. The basic structure is: .svelte < > script // all js code here </ > script  < > style /* all css here */ /* css is scoped by default */ </ > style Let's create our first component. Name it as you like (with .svelte extension, I called it ) and write the above code in there. Import it in and put it in your template. At this point, your must look like this: Page.svelte App.svelte App.svelte < > script Page ; import from "./Page" </ > script < > main < /> Page </ > main I removed style section from it as we don't need it. Placeholders The cool thing is that although Page is an empty component, it won't crash your app. It is very useful when you are prototyping the structure of your application, without implementing it yet. You just use this empty components as placeholders, and then put the content you need inside them. Properties (props) In order to expose a variable as property you just have to export it as in normal javascript. Let's export a variable named from our Page and display it: number < > script number; export let </ > script < > h1 {number} </ > h1 < > style /* all css here */ /* css is scoped by default */ </ > style Props in Svelte are set the same way you do in other libraries: add it as attribute in template: < = /> Page number "5" Now, this component will display . 5 Value binding The last thing we are going to do in this tutorial is to update by adding a button to increase value in . Steps are: Page App Create a variable to store value in ( ); let value = 0 Pass it as a prop to Page ( ); number={value} Create a function to increase value; Add a button that calls increase function( ); <button on:click{increaseValue}>Increase</button> Your should look like this: App.svelte Increase < > script Page ; value = ; increaseValue = {
        value ++;
    } import from "./Page" let 0 const => () </ > script < > main < = /> Page number {value} < = > button on:click {increaseValue} </ > button </ > main The only new thing here is: . I think you can figure it out by your self 😉. In Svelte, you can listen to any DOM event using on:click={increaseValue} on:<event_name>={<listener>} In the next tutorial, we are going to create a classic Guess a Number game. It will be a bit more complex as we are going to use to communicate with parents and learn some hooks. custom events lifecycle : External links degit npx Svelte Rollup Dom events

Svelte: Communication Between Components

Getting Started With Svelte Framework

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Destructuring in Javascript

A Guide for Using Native ECMAScript (ES) Modules

Beginners Guide to Analysis Techniques

Building Blocks of DOM Manipulation - Vanilla JS Tutorial (Part One)

Building TicTacToe Using Vanilla JavaScript

Creating popup Chrome extensions that interact with the DOM

Destructuring in Javascript

A Guide for Using Native ECMAScript (ES) Modules

Beginners Guide to Analysis Techniques

Building Blocks of DOM Manipulation - Vanilla JS Tutorial (Part One)

Building TicTacToe Using Vanilla JavaScript

Creating popup Chrome extensions that interact with the DOM

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps