Svelte est un moyen nouvelle génération de créer des interfaces utilisateur

Alors que des frameworks tels que React, Vue et Angular effectuent l'essentiel de leur travail dans le navigateur, Svelte le fait passer au niveau supérieur. Il fait son travail lorsque vous créez l'application et compile votre application Svelte en JavaScript vanille efficace. Donc, vous obtenez le meilleur des deux mondes. Vous écrivez votre code dans Svelte, ce qui facilite la lecture, la réutilisation et tous les autres avantages que vous obtenez lorsque vous utilisez un framework. Il en résulte une application Web ultra-rapide, conforme au code JavaScript de la vanille, qui vous permet de Vous n'avez pas la surcharge du framework JavaScript que vous utilisez.

Svelte vous permet d'écrire moins de code. Il n'utilise pas non plus le concept de Virtual DOM rendu public par React. Au lieu de cela, il met à jour de façon chirurgicale le DOM lorsque l'état de l'application change, ce qui fait que l'application démarre rapidement et reste rapide.

Conditions préalables

Pour ce didacticiel, vous devez posséder des connaissances de base en HTML, CSS et JavaScript. Nous avons également installé la dernière version de Node.js .

Nous utiliserons également Npx qui est installé par défaut avec Node.js.

Tout au long de ce tutoriel. nous utiliserons le fil . Si vous n'avez pas le fil déjà installé, installez-le à partir de ici .

Pour vous assurer que nous sommes sur la même page, voici les versions utilisées dans ce tutoriel:

• Noeud 12.10.0
• npx 6.11.3
• fil 1.17.3

Bien démarrer avec Svelte

Dans ce tutoriel, nous allons construire un jeu de Tic Tac Toe dans Svelte. À la fin, vous pourrez rapidement utiliser Svelte et commencer à créer vos propres applications dans Svelte.

Pour commencer, nous devons échafauder notre application à l'aide de degit . degit est plus ou moins le même que git clone mais beaucoup plus rapidement. Vous pouvez en apprendre plus à ce sujet ici .

Continuez et créez un nouveau projet en tapant ce qui suit dans le terminal:

 $ npx degit sveltejs / template tic-tac-toe-svelte [19659018] npx  vous permet d'utiliser la commande  degit  sans l'installer globalement. 

 Avant  npx nous devions suivre les deux étapes suivantes pour obtenir le même résultat: [19659017] $ npm install --global degit
$ degit sveltejs / template tic-tac-toe-svelte 

Grâce à npx nous n'affaiblissons pas notre espace de noms global, et nous utilisons toujours la dernière version de degit .

degit clone le dépôt https://github.com/sveltejs/template dans un dossier tic-tac-toe-svelte .

Continuez dans le répertoire tic-tac-toe-svelte et installez les dépendances en tapant ce qui suit dans le terminal:

 $ cd tic-tac-toe-svelte
$ fil 

Lancez maintenant l’application en tapant ce qui suit dans le terminal:

Ouvrez le navigateur et accédez à http: // localhost: 5000 . Vous devriez voir ce qui suit: [19659003]

Si vous accédez au dossier src / vous verrez deux fichiers, App.svelte et . .js . main.js est le point d'entrée d'une application Svelte

Ouvrez le main.js et vous devriez voir ce qui suit:

 import App depuis './App .svelte';

const app = new App ({
    cible: document.body,
    accessoires: {
        nom: 'monde'
    }
});

export default app; 

Le fichier ci-dessus est importé App.svelte et instancié à l'aide d'un élément target . Il place le composant dans le document du corps du DOM . Il passe également le nom du nom au composant App . Cet accessoire sera accessible dans App.svelte .

Les composants dans Svelte sont écrits à l'aide de fichiers .svelte contenant HTML, CSS et JavaScript. Cela vous semblera familier si vous avez travaillé avec Vue .

Ouvrez maintenant App.svelte et vous devriez voir ce qui suit:

  
 Bonjour {name}! 
 

Premièrement, nous avons la balise de script à l'intérieur, dans laquelle nous avons une exportation nommée appelée nom . Cela devrait être similaire à l'accessoire mentionné dans main.js .

Ensuite, nous avons une balise style qui nous permet de styler tous les éléments de ce fichier, qui est limité à ce fichier uniquement, il n'y a donc pas de problème de cascade.

Ensuite, en bas, nous avons une balise h1 à l'intérieur de laquelle nous avons Hello {name}! . Le nom entre accolades sera remplacé par la valeur réelle. Ceci s'appelle l'interpolation de valeur. C'est pourquoi Bonjour tout le monde! est imprimé à l'écran.

Structure de base d'un composant Svelte

Tous les fichiers .svelte auront la structure suivante:

 [1965  

Le balisage HTML comportera une syntaxe supplémentaire propre à Svelte, mais le reste ne concernera que le HTML, le CSS et le JavaScript.

Making Tic Tac Toe dans Svelte

Commençons par construire notre Tic Tac. Jeu d'orteils.

Remplacer main.js par ce qui suit:

 importation de l'application depuis './App.svelte'

const app = new App ({
  cible: document.body,
})

export default app 

Nous avons essentiellement supprimé la propriété props de l'instance de App composant.

Remplacez maintenant App.svelte par les éléments suivants: [19659030]

{title}

   {valeur}  

  

   {# chaque carré comme carré, i}
    
  {/chaque}
 

 {# chaque carré est carré, i}
    
{/ each}