Architecture de composants

Labo 1

Installer NPM
04:16

Instructions

  1. Allez sur le site web the nodejs: http://nodejs.org
  2. Téléchargez la version appropriée pour votre machine (la version LTS suffit, il n'est pas nécéssaire de prendre la toute dernière version)

Installer VS Code et Svelte for VS Code
04:16

Svelte Code extension

Instructions

  • Allez sur le site de VS Code
  • Téléchargez la version adaptée à votre ordinateur
Svelte Code extension

Instructions

Installer l'extension Svelte for VS Code

Créer un projet Svelte
04:16

Instructions

  1. Ouvrez le terminal
  2. Executez la commande:
    en veillant bien à sélectionner Svelte et JavaScript.
    Screenshot of npm create vite
  3. Exécutez ensuite les commandes suivantes:

Création d'un premier composant
04:16

Instruction

  1. Créez un fichier src/lib/HelloWorld.svelte
  2. Écrivez-y quelque chose comme
  3. Importez et utilisez le composant dans src/App.svelte:

Exercice 1: CV
04:16

Exercise

Écrivez un composant CvLine qui vous permettra ensuite d'écrire votre CV. Enjolivez-le avec du CSS

Rappels

  • Les composants sont définis par un fichier .svelte dans ./src/lib/
  • Les props se déclarent dans le composant avec le mot clé export:
  • Dans le composant, la balise <slot /> indique où injecter le contenu du slot.

Exercice 2: Formulaires et two-way data binding
04:16

Exercise

Implémentez un formulaire simplifié qui permet de créer un compte sur un site. Il doit vérifier les critères suivants:

  • L'email entré doit être valide (voir indication)
  • Le mot de passe doit avoir au moins 6 caractères
  • Les deux mots de passe doivent être identiques

Démo

Email:

Password:

Enter your password again:

Rappels et indications

  • On peut lier une variable avec un champ via la directive bind:
  • L'affichage conditionnel se fait avec {#if ...}, {:else if ...}, {:else} et {/if}
  • Une assignation précédée par $: est réactive

Quickstart

Exercice 3: Pokemon
04:16

Exercise

Implémentez une version simplifiée d'une bataille avec un Pokemon sauvage. Au plus le Pokemon a de PV, au plus il doit être difficile à capturer.

Mewtwo
HP:
416 / 416

Exercice 4: Tic-Tac-Toe
04:16

Tic Tac Toe

Exercise

Implémentez le jeu du Morpion (ou OXO).