Svelte Cheatsheet

Découvrez rapidement les bases de Svelte avec notre cheatsheet complète !

Bases & syntaxe

<script>
    let message = 'Bonjour Svelte!';
</script>

<p>{message}</p>

Utilisé pour déclarer et afficher des variables.

Structures de données

<script>
    let items = ['Item 1', 'Item 2', 'Item 3'];
</script>

<ul>
    {#each items as item (item)}
        <li>{item}</li>
    {/each}
</ul>

Utilisé pour itérer sur des tableaux.

Fonctions & methodes essentielles

<script>
    function greet(name) {
        return 'Bonjour, ' + name;
    }

    let message = greet('Svelte');
</script>

<p>{message}</p>

Utilisé pour créer et exécuter des fonctions.

Patterns courants

<script>
    $: filteredItems = items.filter(item => item.startsWith('A'));
</script>

<ul>
    {#each filteredItems as item (item)}
        <li>{item}</li>
    {/each}
</ul>

Utilisé pour créer des états dérivés.

Operations avancées

<script>
    let count = 0;

    function increment() {
        $: count += 1;
    }
</script>

<button on:click={increment}>Incrementer</button>
<p>{count}</p>

Utilisé pour les opérations dérivées avec les états.

Debugging & outils

<script>
    import { onMount } from 'svelte';

    let message = 'Chargement...';

    onMount(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => {
                $: message = data.message;
            })
            .catch(error => {
                console.error('Erreur:', error);
            });
    });
</script>

<p>{message}</p>

Utilisé pour le debugging et la gestion des erreurs.

Projet Svelte a lancer ?

Besoin d'aide sur un projet ? Decrivez-le pour des conseils personnalises.

Recevoir des conseils

Questions frequentes

A quoi sert cette cheatsheet Svelte ?

Cette cheatsheet Svelte regroupe la syntaxe, les commandes et les astuces essentielles pour Svelte. Elle est concue pour servir d'aide-memoire rapide, que vous soyez debutant ou developpeur confirme cherchant une reference rapide.

Comment utiliser cette cheatsheet Svelte ?

Parcourez les sections pour trouver la syntaxe ou la commande dont vous avez besoin. Vous pouvez la garder ouverte dans un onglet pendant que vous codez, ou la copier dans vos notes pour un acces hors ligne.

Cette cheatsheet est-elle a jour ?

Oui, nos cheatsheets sont regulierement mises a jour pour refleter les dernieres versions et bonnes pratiques de Svelte. Si vous remarquez une information obsolete, n'hesitez pas a nous contacter.