Introduction to Svelte (and SvelteKit)

How to create, build and import a new component.

The first exercise! Create your own Svelte component and discover the current year!

The first solution!

Passing down data from the parent component to the child component.

In Svelte you can use #if statements and #each loops in the HTML code. But how??

Okay now try it yourself.

Let's iterate through those messages!

Have you ever wanted to wait until a promise is resolved?

Calling a function when a button is clicked.

What is event dispatching and how to use it?

Now can you manage to dipatch an event on your own?

This is a way add messages by dispatching an event.

Reactivity is a part where Svelte really shines. All it takes is a '$' and a ':'

Using two-way data binding between an input element and a local variable.

Explaining the concept of the Store - variables accessible from components all across the app.

Svelte Store DIY

Step by step walkthrough to read to and write from a writable store.

Creating variables that are readable by the descendant components.

The project to be implemented in the upcoming videos.

If you want to get the final version, here it is.

NOTE: for syntax highlighting and better autocomplete in VS Code, it's highly recommended to download the Svelte extension ("Svelte for VS Code")

How the app and the component structure should look like.

Adding a store for the Settings values.

The Fact component's job is to display whatever sentence it receives from the Feed component.

An attempt to make the UI just a little bit less ugly.

The API can be found here: https://catfact.ninja/

Explaining some specialities of the setInterval() / clearInterval() functions.

Providing the option to pause and restart the feed, by adding a button to the Settings component.

A few words about onMount(), onDestroy(), beforeUpdate() and afterUpdate() functions.

Tick - a function that returns a promise that resolves as soon as any pending state changes have been applied to the DOM.

Let's assume that the Child component includes both the four lifecycle methods as implemented in the first video and also the implementation of the tick() function as shown in the second video...

What if you want to be up-to-date of your windows width?

Keep track of the details happening around the body!

Is there something you want to add or modify in the HTML head? No problem.

You feel that sometimes this component should be used, sometimes that one? Consider using the <svelte:component> tag!

Be aware of the recursion whenever you use <svelte:self>!

You have the chance to set some specific options with this element.

Slot is not a special element but a quite common one in Svelte.

There is a difference between rendering a div and rendering the content of the div.

Introducing the most popular Svelte framework (as of 2021 December...)

SvelteKit optimizes routing - matching the URL with the components to render.

Two special files in SvelteKit that start with double underscore. What to use them for?

This function takes the request object and returns a session object that is accessible on the client.

A component that defines a page or a layout can export a load function that runs before the component is created.

Is there a file in your routes folder you don't want to reach directly by a URL? Use a file with starting with a single underscore!

How to use variable values as part of the URL?

What's the difference between switching on and off the Server-side Rendering?

Another Svelte Framework, specialized on client-side rounting

The number of Svelte frameworks is increasing.