docs: update Essentials section to setup (composition api) (#2647)

Author: sofuxro

docs/fr/guide/essentials/a-crash-course.md

@@ -113,7 +113,7 @@ Si nous exécutons ce test, il échouera. Modifions `TodoApp.vue` pour avoir les
 <script setup>
 import { ref } from 'vue'
 
-const newTodo = ref(''),
+const newTodo = ref('')
 const todos = ref([
   {
     id: 1,

docs/fr/guide/essentials/conditional-rendering.md

@@ -8,20 +8,20 @@ Cet article est également disponible sous la forme d'une [courte vidéo](https:
 
 L'une des fonctionnalités les plus basiques de Vue est la capacité d'insérer et de supprimer dynamiquement des éléments avec `v-if`. Voyons comment tester un composant qui utilise `v-if`.
 
-```js
-const Nav = {
-  template: `
-    <nav>
-      <a id="profile" href="/profile">Mon Profil</a>
-      <a v-if="admin" id="admin" href="/admin">Administration</a>
-    </nav>
-  `,
-  data() {
-    return {
-      admin: false,
-    };
-  },
-};
+```vue
+<!-- Nav.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const admin = ref(false)
+</script>
+
+<template>
+  <nav>
+    <a id="profile" href="/profile">Mon Profil</a>
+    <a v-if="admin" id="admin" href="/admin">Administration</a>
+  </nav>
+</template>
 ```
 
 Dans le composant `<Nav>`, un lien vers le profil de l'utilisateur est affiché. De plus, si la valeur `admin` est à `true`, nous affichons un lien vers la section administrateur. Il y a trois scénarios dont le comportement doit être vérifié&nbsp;:
@@ -99,22 +99,22 @@ Parfois, vous ne voulez que masquer/afficher un élément tout en le conservant
 
 Voici à quoi ressemble un composant avec `v-show`&nbsp;:
 
-```js
-const Nav = {
-  template: `
-    <nav>
-      <a id="user" href="/profile">Mon Profil</a>
-      <ul v-show="shouldShowDropdown" id="user-dropdown">
-        <!-- dropdown content -->
-      </ul>
-    </nav>
-  `,
-  data() {
-    return {
-      shouldShowDropdown: false,
-    };
-  },
-};
+```vue
+<!-- Nav.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const shouldShowDropdown = ref(false)
+<script>
+
+<template>
+  <nav>
+    <a id="user" href="/profile">Mon Profil</a>
+    <ul v-show="shouldShowDropdown" id="user-dropdown">
+      <!-- dropdown content -->
+    </ul>
+  </nav>
+</template>
 ```
 
 Dans ce scénario, l'élément n'est pas visible, mais toujours rendu dans le DOM. `get()` ou `find()` retournera toujours un `Wrapper` - `find()` avec `.exists()` retournera toujours `true` - car **l'élément est toujours dans le DOM**.

docs/fr/guide/essentials/easy-to-test.md

@@ -31,23 +31,21 @@ La règle de base est qu'**un test ne devrait pas échouer lors d'une refonte de
 Par exemple, supposons qu'il existe un composant de compteur de base qui comporte un bouton pour incrémenter un compteur :
 
 ```vue
+<!-- Counter.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+const increment = () => {
+  count.value++
+}
+</script>
+
 <template>
   <p class="paragraph">Nombre de clicks: {{ count }}</p>
   <button @click="increment">Incrémenter</button>
 </template>
-
-<script>
-export default {
-  data() {
-    return { count: 0 };
-  },
-  methods: {
-    increment() {
-      this.count++;
-    },
-  },
-};
-</script>
 ```
 
 Nous pourrions écrire le test suivant&nbsp;:

docs/fr/guide/essentials/event-handling.md

@@ -8,21 +8,24 @@ Cet article est également disponible dans cette [courte video](https://www.yout
 
 Voici un composant simple `<Counter>`. Il possède un bouton qui, lorsqu'il est cliqué, incrémente une variable et émet sa valeur.
 
-```js
-const Counter = {
-  template: '<button @click="handleClick">Incrémenter</button>',
-  data() {
-    return {
-      count: 0,
-    };
-  },
-  methods: {
-    handleClick() {
-      this.count += 1;
-      this.$emit('increment', this.count);
-    },
-  },
-};
+```vue
+<!-- Counter.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+const emit = defineEmits(['increment'])
+
+const handleClick = () => {
+  count.value += 1
+  emit('increment', count.value)
+}
+</script>
+
+<template>
+  <button @click="handleClick">Incrémenter</button>
+</template>
 ```
 
 Pour tester complètement ce composant, nous devrions vérifier qu'un événement `increment` avec la dernière valeur de `count` est émis.
@@ -90,25 +93,27 @@ Récapitulons et détaillons le retour de la fonction `emmitted()`. Chaque clé
 
 Imaginons maintenant que notre composant `<Counter>` a besoin d'émettre un objet avec des informations supplémentaires. Par exemple, nous devons informer tout composant parent écoutant l'événement `@increment` si la valeur de `count` est paire ou impaire.
 
-```js {12-15}
-const Counter = {
-  template: `<button @click="handleClick">Incrémenter</button>`,
-  data() {
-    return {
-      count: 0,
-    };
-  },
-  methods: {
-    handleClick() {
-      this.count += 1;
-
-      this.$emit('increment', {
-        count: this.count,
-        isEven: this.count % 2 === 0,
-      });
-    },
-  },
-};
+```vue
+<!-- Counter.vue -->
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+const emit = defineEmits(['increment'])
+
+const handleClick = () => {
+  count.value += 1
+  emit('increment', {
+    count: count.value,
+    isEven: count.value % 2 === 0,
+  })
+}
+</script>
+
+<template>
+  <button @click="handleClick">Incrémenter</button>
+</template>
 ```
 
 Comme nous l'avons fait auparavant, nous devons déclencher l'événement `click` sur l'élément `<button>`. Ensuite, nous utilisons `emitted('increment')` pour nous assurer que les bonnes valeurs sont émises.
@@ -142,10 +147,6 @@ test('émet un évènement avec le compteur quand le boutton est cliqué', () =>
 
 En testant des types complexes tels que des objets, cela ne diffère pas des tests de types primaires tels que des nombres ou des chaînes de caractères.
 
-## API de Composition
-
-Si vous utilisez l'API de Composition, vous devez appeler `context.emit()` à la place de `this.$emit()`. `emitted()` capture les événements de l'un ou l'autre, vous pouvez donc tester votre composant en utilisant les mêmes techniques décrites précédemment.
-
 ## Conclusion
 
 - Utilisez `emitted()` pour accéder aux événements émis par un composant Vue.