Jak vytvářet komponenty v Svelte

V mém minulém článku jsme se podívali na to, jak vytvořit svou první aplikaci Svelte pomocí SvelteKit. Dnes se podíváme na další krok – jak vyrobit komponenty, abyste mohli začít vytvářet skutečné aplikace Svelte.

Co jsou komponenty a proč je potřebujeme?

Komponenty jsou společným tématem všech moderních frontendových frameworků. V podstatě, když jsme začali vytvářet stále složitější aplikace, zjistili jsme, že neustále používáme stejné typy věcí. Například registrační formulář se může objevit na více různých místech a používat přesně stejný kód.

Komponenty se nakonec snaží s tímto problémem vypořádat. Vytváříme tyto opakovaně použitelné části kódu a zahrnout je tam, kde je chceme mít. Tímto způsobem napíšeme kód pouze jednou a můžeme jej umístit kamkoli chceme. Komponenty fungují jako vlastní HTML tag ve Svelte, který lze přidat kamkoli chceme, aby se zobrazoval.

Jak vyrobit komponenty ve Svelte

Než začnete, ujistěte se, že jste pomocí SvelteKit nastavili nový projekt Svelte. V rámci SvelteKit již máme složku nazvanou routes, která obsahuje všechny stránky naší aplikace Svelte. Chcete-li to nastartovat, vytvořte v src novou složku s názvem komponenty. Zde uložíme všechny naše komponenty.

Vytvořte nový soubor a nazvěte jej MyFirstComponent.svelte - to bude fungovat jako náš první komponent Svelte. Pokud jste postupovali podle mého posledního tutoriálu, naše struktura složek bude nyní vypadat takto:

static                   <-- where we store all of our public assets like favicons, images, and fonts
|- favicon.png           <-- our favicon
tests                    <-- a folder to store our tests
|- test.js               <-- an example test using @playwright
src                      <-- our main Svelte app files
|- routes                <-- a folder to store all of our routes in
|- components            <-- a folder for all of our components
|-- MyFirstComponent.vue <-- our first component
|-- index.svelte         <-- our index route file. This will be the file displayed at the route of the site
|- app.d.ts              <-- our core Svelte app file
|- app.html              <-- our main index file where the app will appear
.gitignore               <-- files we wish to ignore for git
.npmrc                   <-- config file for npm
.prettierrc              <-- config file for prettier
.eslintrc.cjs            <-- config file for eslint
package.json             <-- our NPM installed packages
playwright.config.js     <-- config file for playwright
svelte.config.js         <-- config file for svelte itself
tsconfig.json            <-- config file for typescript

Skvělé, nyní máme soubor, můžeme začít pracovat na vytvoření naší první komponenty.

Vytváření naší štíhlé komponenty

Pro tuto příručku vytvořím jednoduchou komponentu čítače, která může mít přednastavenou výchozí hodnotu. Na Svelte je hezké, že soubory vypadají a působí přesně jako běžný kód CSS, HTML a Javascript.

Abychom vytvořili jednoduchý čítač, začneme s tímto:

<script>
    // we write export let to say that this is a property
    // that means we can change it later!
    export let x = 0;
    const addToCounter = function() {
        ++x;
    }
</script>

<button id="counter" on:click="{addToCounter}">{x}</button>

<style>
    button {
        background: #ffb334;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        padding: 0.5rem 2rem;
        color: white;
        font-size: 1.5rem;
    }
</style>

Svelte funguje hodně jako ostatní frameworky, až na to, že kód pro komponenty je podle mého názoru výrazně zjednodušený.

Klikněte na Událost

Výše jsme jednoduše přidali jednu událost, klikněte a můžeme přidat události do libovolného prvku DOM pomocí on:event={functionName} syntax. Výše jsme přidali on:click={addToCounter} což znamená, že spustíme addToCounter() kdykoli někdo klikne na tlačítko.

Vlastnosti

V pohybu HTML máme vlastnosti nebo rekvizity. Můžeme například nastavit vlastnost href <a> tag pro nastavení odkazu. Pokud chceme vytvořit vlastní rekvizity ve Svelte, přidáme je do Javascriptu naší komponenty pomocí klíčového slova export:

export let x = 0;

To znamená, že ji můžeme použít jako rekvizitu, když ji použijeme – když už o tom mluvíme, podívejme se, jak bychom to implementovali v našem projektu Svelte.

Použití komponent v Svelte

Nyní, když jsme vytvořili základní komponentu, můžeme ji přidat kamkoli budeme chtít. Zkusme to přidat do routes/index.svelte. Svou novou komponentu můžete importovat a používat takto:

<script>
    import MyFirstComponent from "../components/MyFirstComponent.svelte";
</script>

<MyFirstComponent />

Vytvoření komponenty čítače ve Svelte pomocí SvelteKit
Nyní máme jednoduchý čítač, který můžeme přidat kamkoli do naší aplikace. Ještě lépe můžeme změnit výchozí hodnotu, protože jsme definovali číslo addToCounter jako rekvizitu v naší komponentě:

<MyFirstComponent x={5} />

Nyní komponenta zobrazí 5 jako svou první hodnotu, nikoli 0!

Testujeme to

Pokud jste svou aplikaci Svelte vytvořili na základě našeho původního tutoriálu, můžete nyní otestovat své komponenty spuštěním následujícího příkazu v terminálu:

npm run dev

Nyní budete mít vývojářskou instanci svého kódu k dispozici na adrese http://localhost:3000 .

Závěr

Vytváření aplikací Svelte a nových komponent je snadné a Svelte je tak lehký jazyk, že si možná ani neuvědomujete, že nepoužíváte pouze HTML, CSS a Javascript. Doufám, že se vám tento rychlý úvod do komponent Svelte líbil. Zůstaňte naladěni na další obsah Svelte.