Vue.js - Guide Complet

Vue.js est un framework JavaScript progressif utilisé pour construire des interfaces utilisateur. Il est connu pour sa simplicité, sa flexibilité, et sa capacité à s'intégrer facilement dans des projets existants.

1. Introduction à Vue.js

Vue.js offre une solution complète pour la gestion de l'interface utilisateur et des interactions dynamiques. Grâce à son approche déclarative et réactive, Vue facilite le développement d'applications web modernes.

• Type : Framework JavaScript progressif.
• Langage de base : JavaScript ou TypeScript.
• Utilisation principale : Développement d'interfaces utilisateur réactives.
• Fonctionnalités clés : Composants, directives, gestion de l'état avec Vuex, et système de routage.

2. Configuration de Vue.js

Pour démarrer un projet Vue.js, vous pouvez utiliser l'outil officiel Vue CLI :

# Installer Vue CLI
npm install -g @vue/cli
# Créer un nouveau projet
vue create mon-projet
# Lancer le serveur de développement
npm run serve
        

3. Composants Vue.js

Les composants sont la base d'une application Vue.js. Voici un exemple de composant simple :

// Création d'un composant Vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data: () => ({
    message: 'Bienvenue sur Vue.js!'
  })
};
</script>
        

4. Pourquoi utiliser Vue.js ?

• Facilité d'intégration dans des projets existants.
• Simplicité de l'API et apprentissage rapide.
• Grande flexibilité pour construire des projets de toutes tailles.
• Écosystème riche comprenant Vue Router et Vuex.

5. Exercices pratiques

1. Créez un composant Vue nommé ProfilUtilisateur qui affiche le nom et l'âge d'un utilisateur passé en props.
2. Ajoutez une méthode qui change l'âge lorsque vous cliquez sur un bouton.
3. Implémentez un système de compteur similaire à React.js avec Vue.js.

6. Ressources supplémentaires

• Documentation officielle de Vue.js
• Guide Vue.js (v2 et v3)
• Dépôt GitHub de Vue.js
• Cours Vue.js

Angular - Guide Complet

Angular est un framework JavaScript puissant et basé sur TypeScript, utilisé pour développer des applications web riches et robustes. Maintenu par Google, Angular est largement utilisé pour des projets front-end complexes.

1. Introduction à Angular

Angular permet de créer des applications dynamiques à l'aide d'une architecture basée sur des composants et un système de gestion de données réactif. Contrairement à React ou Vue, Angular est un framework complet qui inclut tout ce dont vous avez besoin pour construire une application.

• Type : Framework front-end complet.
• Langage de base : TypeScript.
• Utilisation principale : Développement d'applications web complexes et scalables.
• Fonctionnalités clés : Composants, services, routage, directives, et gestion des données avec RxJS.

2. Installation et configuration

Pour commencer avec Angular, vous devez installer l'outil CLI Angular :

# Installation de l'Angular CLI
npm install -g @angular/cli
# Créer une nouvelle application Angular
ng new mon-projet-angular
# Lancer le serveur de développement
ng serve
        

Une fois que le serveur est lancé, accédez à http://localhost:4200 pour voir votre application Angular en cours d'exécution.

3. Structure d'un projet Angular

Un projet Angular suit une structure modulaire. Voici un aperçu :

• /src : Contient tout le code source.
• /app : Contient les composants, services, modules, et fichiers spécifiques à l'application.
• /assets : Contient des fichiers statiques (images, JSON, etc.).
• /environments : Contient des configurations spécifiques aux environnements (développement, production).

Projet Angular typique :
mon-projet-angular/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── home/
│   │   │   ├── home.component.ts
│   │   │   └── home.component.html
│   ├── assets/
│   ├── environments/
└── angular.json
        

4. Création de composants Angular

Les composants sont la base d'Angular. Vous pouvez créer un nouveau composant avec la commande CLI suivante :

# Créer un composant nommé "Accueil"
ng generate component Accueil
        

Voici un exemple de fichier accueil.component.ts :

// accueil.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-accueil',
    templateUrl: './accueil.component.html',
    styleUrls: ['./accueil.component.css']
})
export class AccueilComponent {
    message: string = 'Bienvenue sur Angular!';
}
        

5. Gestion des données avec Angular

Angular utilise les services pour gérer les données et la logique métier. Les services peuvent être partagés entre plusieurs composants, offrant une séparation claire des responsabilités.

// Exemple de service Angular
import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root',
})
export class DonneesService {
    getData() {
        return [
            'Donnée 1',
            'Donnée 2',
            'Donnée 3'
        ];
    }
}
        

6. Pourquoi utiliser Angular ?

• Framework complet avec routage, gestion de l'état et génération de code.
• Architecture modulaire adaptée aux grandes applications.
• Utilisation de TypeScript pour un typage robuste.
• Support natif pour les formulaires, les animations et les services HTTP.
• Maintenance assurée par Google avec un cycle de mises à jour régulier.

7. Exercices pratiques

1. Créez un composant nommé ProfilUtilisateur qui affiche le nom et l'email d'un utilisateur passé via des @Input.
2. Implémentez un service qui récupère une liste de tâches à afficher dans un composant.
3. Ajoutez un bouton pour marquer une tâche comme terminée.

8. Ressources supplémentaires

• Documentation officielle Angular
• Guide officiel : Commencer avec Angular
• Dépôt GitHub d'Angular
• Cours Angular

Next.js - Guide Complet

Next.js est un framework basé sur React qui permet de construire des applications web modernes avec des fonctionnalités de rendu côté serveur (SSR) et de génération statique (SSG). Il est idéal pour les applications performantes et SEO-friendly.

1. Introduction à Next.js

Next.js offre des fonctionnalités prêtes à l'emploi telles que le routage, le rendu côté serveur, et la génération de sites statiques. Il permet de combiner les avantages de React avec une architecture optimisée pour les performances et le SEO.

• Type : Framework React.
• Langage de base : JavaScript ou TypeScript.
• Utilisation principale : Applications web performantes et optimisées pour les moteurs de recherche.
• Fonctionnalités clés : Rendu côté serveur (SSR), génération statique (SSG), routage automatique, API intégrées.

2. Installation et configuration

Pour commencer un projet avec Next.js, utilisez la commande suivante :

# Créer une nouvelle application Next.js
npx create-next-app mon-projet-next
# Accéder au projet
cd mon-projet-next
# Lancer le serveur de développement
npm run dev
        

Une fois le serveur lancé, accédez à http://localhost:3000 pour voir votre application Next.js en cours d'exécution.

3. Structure d'un projet Next.js

Un projet Next.js a une structure simple et organisée :

• /pages : Contient les fichiers pour chaque route de l'application.
• /public : Contient des fichiers statiques accessibles publiquement.
• /styles : Contient les fichiers CSS de l'application.
• /api : Contient les API intégrées côté serveur.

Projet Next.js typique :
mon-projet-next/
├── pages/
│   ├── index.js
│   ├── about.js
│   ├── api/
│       └── hello.js
├── public/
│   └── favicon.ico
├── styles/
│   └── globals.css
├── package.json
        

4. Rendu côté serveur avec Next.js

Next.js permet de rendre des pages côté serveur à l'aide de la fonction getServerSideProps :

// Exemple de rendu côté serveur
export async function getServerSideProps() {
    const data = await fetch('https://api.example.com/data');
    const jsonData = await data.json();

    return {
        props: { data: jsonData },
    };
}

export default function Page({ data }) {
    return (
        <div>
            <h1>Données récupérées côté serveur :</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
}
        

5. Génération statique avec Next.js

Next.js peut générer des pages statiques à l'avance en utilisant getStaticProps :

// Exemple de génération statique
export async function getStaticProps() {
    const data = await fetch('https://api.example.com/static-data');
    const jsonData = await data.json();

    return {
        props: { data: jsonData },
    };
}

export default function Page({ data }) {
    return (
        <div>
            <h1>Données statiques :</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
}
        

6. Pourquoi utiliser Next.js ?

• Rendu côté serveur et génération statique pour améliorer les performances et le SEO.
• Routage automatique basé sur le système de fichiers.
• API intégrée pour créer des routes backend.
• Support natif pour les CSS et CSS-in-JS.
• Compatible avec React et l'écosystème JavaScript.

7. Exercices pratiques

1. Créez une page Next.js qui récupère et affiche une liste d'utilisateurs depuis une API externe.
2. Ajoutez une API intégrée dans le dossier /api pour retourner une liste d'articles simulés.
3. Utilisez getStaticProps pour générer une page statique affichant des produits.

8. Ressources supplémentaires

• Documentation officielle de Next.js
• Tutoriel interactif Next.js
• Dépôt GitHub de Next.js
• Cours Next.js

Nuxt.js - Guide Complet

Nuxt.js est un framework basé sur Vue.js conçu pour le rendu côté serveur (SSR) et la génération de sites statiques (SSG). Avec Nuxt.js, vous pouvez facilement créer des applications web performantes, optimisées pour le SEO, et intégrées avec des fonctionnalités prêtes à l'emploi comme le routage, les modules et les middleware.

1. Introduction à Nuxt.js

Nuxt.js enrichit Vue.js en ajoutant des fonctionnalités avancées comme le rendu côté serveur, les middleware, et une architecture modulaire. Il est idéal pour des projets allant de simples blogs à des applications complexes.

• Type : Framework Vue.js.
• Langage de base : JavaScript ou TypeScript.
• Utilisation principale : Applications web performantes et SEO-friendly.
• Fonctionnalités clés : Rendu côté serveur (SSR), génération statique (SSG), modules extensibles, middleware, et support des API.

2. Installation et configuration

Pour démarrer un projet avec Nuxt.js, utilisez la commande suivante :

# Créer un nouveau projet Nuxt.js
npx create-nuxt-app mon-projet-nuxt
# Accéder au projet
cd mon-projet-nuxt
# Lancer le serveur de développement
npm run dev
        

Une fois le serveur lancé, accédez à http://localhost:3000 pour voir votre application Nuxt.js en cours d'exécution.

3. Structure d'un projet Nuxt.js

Un projet Nuxt.js suit une organisation modulaire :

• /pages : Définit les routes de l'application avec un système basé sur les fichiers.
• /components : Contient les composants réutilisables de l'application.
• /layouts : Gère la disposition générale des pages (header, footer, etc.).
• /middleware : Définit des fonctions middleware pour gérer les accès et les conditions de navigation.
• /store : Gère l'état global de l'application à l'aide de Vuex.

Projet Nuxt.js typique :
mon-projet-nuxt/
├── pages/
│   ├── index.vue
│   ├── about.vue
├── components/
│   ├── Header.vue
│   └── Footer.vue
├── layouts/
│   ├── default.vue
│   └── error.vue
├── store/
│   └── index.js
└── nuxt.config.js
        

4. Rendu côté serveur avec Nuxt.js

Nuxt.js gère le rendu côté serveur de manière native. Voici un exemple d'utilisation des données dynamiques dans une page :

// Exemple de SSR dans Nuxt.js
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.body }}</p>
  </div>
</template>

<script>
export default {
  asyncData({ params }) {
    return fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
      .then(res => res.json())
      .then(post => ({ post }));
  }
};
</script>
        

5. Génération statique avec Nuxt.js

Nuxt.js peut générer des pages statiques à l'aide de la commande nuxt generate. Idéal pour créer des sites web rapides et SEO-friendly sans serveur.

# Générer un site statique
npm run generate
        

6. Pourquoi utiliser Nuxt.js ?

• Intégration parfaite avec Vue.js pour une architecture modulaire.
• Support natif pour SSR et SSG.
• Système de routage basé sur les fichiers, simplifiant la navigation.
• Écosystème riche avec des modules comme Axios, PWA, et Auth.
• Configuration minimale grâce à nuxt.config.js.

7. Exercices pratiques

1. Créez une page /blog qui récupère et affiche une liste d'articles depuis une API externe.
2. Ajoutez une mise en page personnalisée (/layouts/blog.vue) pour la section blog.
3. Créez un middleware qui redirige les utilisateurs non connectés vers une page de connexion.

8. Ressources supplémentaires

• Documentation officielle de Nuxt.js
• Guide officiel : Commencer avec Nuxt.js
• Dépôt GitHub de Nuxt.js
• Cours Nuxt.js

Svelte - Guide Complet

Svelte est un framework JavaScript moderne qui introduit une approche révolutionnaire au développement d'applications web. Contrairement à React ou Vue, Svelte compile le code au moment de la construction, ce qui élimine l'utilisation du DOM virtuel et offre des performances exceptionnelles.

1. Introduction à Svelte

Svelte simplifie la création d'interfaces utilisateur en combinant HTML, CSS et JavaScript dans un seul fichier. Le framework élimine les frais d'exécution en compilant les composants en JavaScript pur lors de la phase de construction.

• Type : Framework JavaScript compilé.
• Langage de base : JavaScript ou TypeScript.
• Utilisation principale : Applications légères et rapides.
• Fonctionnalités clés : Compilation au moment de la construction, réactivité intégrée, CSS scoped.

2. Installation et configuration

Pour démarrer un projet avec Svelte, vous pouvez utiliser le template officiel via npx :

# Créer une nouvelle application Svelte
npx degit sveltejs/template mon-projet-svelte
# Accéder au projet
cd mon-projet-svelte
# Installer les dépendances
npm install
# Lancer le serveur de développement
npm run dev
        

Une fois le serveur démarré, ouvrez http://localhost:5000 pour voir votre application Svelte.

3. Structure d'un projet Svelte

Un projet Svelte est minimaliste et bien structuré :

• /src : Contient les composants et styles de l'application.
• /public : Contient les fichiers statiques accessibles publiquement.
• rollup.config.js : Configuration pour le bundler Rollup.

Projet Svelte typique :
mon-projet-svelte/
├── src/
│   ├── App.svelte
│   ├── main.js
├── public/
│   └── index.html
├── rollup.config.js
└── package.json
        

4. Exemple de composant Svelte

Les composants Svelte combinent HTML, CSS et JavaScript dans un seul fichier. Voici un exemple :

// App.svelte
<script>
    let count = 0;

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

<style>
    h1 {
        color: red;
    }
</style>

<h1>Compteur : {count}</h1>
<button on:click={increment}>Incrémenter</button>
        

5. Réactivité avec Svelte

Svelte propose une réactivité native, ce qui signifie que toute modification des variables déclenche automatiquement une mise à jour de l'interface.

// Réactivité dans Svelte
<script>
    let name = 'Utilisateur';
</script>

<input bind:value={name} />
<p>Bonjour, {name} !</p>
        

6. Pourquoi utiliser Svelte ?

• Performances exceptionnelles grâce à la compilation.
• Réactivité native et simple.
• Code minimaliste et clair.
• Idéal pour les projets nécessitant des performances élevées.
• Écosystème en croissance rapide avec une forte communauté.

7. Exercices pratiques

1. Créez un composant qui affiche une liste de tâches et permet d'ajouter de nouvelles tâches via un champ de saisie.
2. Ajoutez un bouton pour marquer une tâche comme terminée.
3. Ajoutez un style personnalisé pour les tâches terminées.

8. Ressources supplémentaires

• Documentation officielle de Svelte
• Tutoriel interactif de Svelte
• Dépôt GitHub de Svelte
• Cours Svelte

Redux - Guide Complet

Redux est une bibliothèque JavaScript utilisée pour la gestion de l'état global dans des applications web. Elle est couramment utilisée avec React, mais peut être intégrée dans n'importe quelle application JavaScript. Redux suit des principes stricts pour une gestion prévisible de l'état.

1. Introduction à Redux

Redux repose sur le concept d'un store centralisé qui contient l'état global de l'application. Toutes les modifications de l'état sont effectuées via des actions explicites et des fonctions pur appelées reducers.

• Type : Bibliothèque de gestion de l'état.
• Langage de base : JavaScript ou TypeScript.
• Utilisation principale : Applications nécessitant un état global prévisible.
• Fonctionnalités clés : Store unique, actions, reducers, middleware.

2. Installation de Redux

Pour installer Redux dans un projet, utilisez la commande suivante :

# Installer Redux et React Redux
npm install redux react-redux
        

redux : Le package principal contenant les outils pour créer un store.
react-redux : Fournit des outils pour connecter Redux avec des composants React.

3. Principes de base

Redux repose sur trois principes fondamentaux :

• Un store unique : Toute l'application partage un seul état global.
• État en lecture seule : L'état ne peut être modifié que via des actions explicites.
• Les reducers : Des fonctions pures qui spécifient comment l'état change en réponse à une action.

4. Exemple d'utilisation de Redux

Voici un exemple simple d'application Redux gérant un compteur :

// 1. Définir une action
const increment = () => ({ type: 'INCREMENT' });

// 2. Créer un reducer
function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        default:
            return state;
    }
}

// 3. Créer le store
import { createStore } from 'redux';
const store = createStore(counter);

// 4. Dispatcher une action
store.dispatch(increment());

// 5. Lire l'état actuel
console.log(store.getState()); // Affiche : 1
        

5. Utilisation avec React

Redux s'intègre facilement avec React grâce à react-redux. Voici un exemple de configuration :

// Fournir le store à l'application
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import App from './App';

const store = createStore(counter);

function Root() {
    return (
        <Provider store={store}>
            <App />
        </Provider>
    );
}

export default Root;
        

6. Pourquoi utiliser Redux ?

• Gère efficacement l'état global dans des applications complexes.
• Architecture claire et prévisible.
• Facilite les tests grâce à des fonctions pures (reducers).
• Extensible avec des middleware comme Redux Thunk ou Redux Saga.
• Écosystème riche avec des outils comme Redux DevTools.

7. Exercices pratiques

1. Créez un store Redux qui gère une liste de tâches (ajouter, supprimer, marquer comme terminée).
2. Intégrez Redux avec une application React pour afficher et manipuler cette liste de tâches.
3. Ajoutez un middleware pour enregistrer les actions dans la console.

8. Ressources supplémentaires

• Documentation officielle de Redux
• Documentation officielle de React Redux
• Dépôt GitHub de Redux

Dictionnaire des Termes Clés Redux

Pour comprendre Redux en profondeur, il est essentiel de connaître ses concepts clés. Voici un dictionnaire détaillé :

Action

Une action est un objet JavaScript qui décrit un événement survenu dans l'application. Elle contient une propriété obligatoire type et, éventuellement, des données supplémentaires.

// Exemple d'action
const increment = {
    type: 'INCREMENT',
    payload: { step: 1 }
};
                

Reducer

Un reducer est une fonction pure qui reçoit l'état actuel et une action, puis retourne un nouvel état.

// Exemple de reducer
function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + action.payload.step;
        default:
            return state;
    }
}
                

Store

Le store est un objet centralisé qui contient l'état global de l'application. Il est créé à l'aide de la fonction createStore.

// Création d'un store
import { createStore } from 'redux';
const store = createStore(counter);
                

Middleware

Les middleware interceptent les actions avant qu'elles atteignent le reducer. Ils permettent d'ajouter des fonctionnalités comme les logs ou les appels asynchrones.

// Exemple de middleware
const logger = store => next => action => {
    console.log('Action:', action);
    return next(action);
};
                

Redux DevTools

Un outil puissant pour déboguer les applications Redux. Il permet de visualiser les actions, l'état, et de revenir en arrière dans l'historique.

// Ajout de Redux DevTools
const store = createStore(
    counter,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
                

Pinia - Guide Complet

Pinia est une bibliothèque de gestion d’état pour Vue.js 3, conçue pour être intuitive, légère et puissante. Elle remplace officiellement Vuex dans l’écosystème Vue.js et offre une API moderne basée sur les options de composition et les fonctions réactives.

1. Introduction à Pinia

Pinia est inspirée de Vuex mais simplifie considérablement l’API. Elle est conçue pour être intuitive tout en offrant des fonctionnalités avancées telles que :

• Reactivité native : Utilise les fonctionnalités réactives de Vue.js.
• API intuitive : Simplifie la déclaration et l’utilisation des stores.
• Support TypeScript natif : Fournit un typage robuste pour des applications modernes.
• Mode SSR (Server-Side Rendering) : Compatible avec Nuxt.js et les applications SSR.

2. Installation et configuration

Pour installer Pinia dans un projet Vue.js, utilisez :

# Installer Pinia
npm install pinia
        

Ensuite, configurez Pinia dans votre projet Vue.js :

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');
        

3. Déclaration d’un store avec Pinia

Dans Pinia, chaque store est une unité indépendante qui contient des états, des actions et des getters. Voici comment définir un store :

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
    // État
    state: () => ({
        count: 0,
    }),

    // Getters
    getters: {
        doubleCount: (state) => state.count * 2,
    },

    // Actions
    actions: {
        increment() {
            this.count++;
        },
        decrement() {
            this.count--;
        },
    },
});
        

4. Utilisation d’un store dans un composant

Une fois le store défini, vous pouvez l’utiliser dans vos composants Vue.js :

// Exemple dans un composant
<script setup>
import { useCounterStore } from './stores/counter';

const counterStore = useCounterStore();
</script>

<template>
    <div>
        <p>Compteur : {{ counterStore.count }}</p>
        <button @click="counterStore.increment">Incrémenter</button>
    </div>
</template>
        

5. Pourquoi utiliser Pinia ?

• API intuitive et moderne, facile à apprendre.
• Support natif pour Vue.js 3 et TypeScript.
• Meilleures performances grâce à la réactivité native.
• Compatible avec Nuxt.js et les applications SSR.
• Écosystème riche et en pleine croissance.

6. Exercices pratiques

1. Créez un store pour gérer une liste de tâches avec des actions pour ajouter, supprimer et marquer des tâches comme terminées.
2. Ajoutez un getter pour filtrer les tâches terminées.
3. Utilisez ce store dans un composant Vue.js pour afficher et interagir avec les tâches.

7. Ressources supplémentaires

• Documentation officielle de Pinia
• Dépôt GitHub de Pinia
• Documentation Vue.js

MobX - Guide Complet

MobX est une bibliothèque JavaScript réactive pour la gestion d’état. Elle se distingue par sa capacité à observer automatiquement les changements d’état et à mettre à jour les vues correspondantes sans nécessiter de code complexe. MobX est souvent utilisé avec React, mais il est compatible avec n’importe quel framework JavaScript.

1. Introduction à MobX

MobX repose sur un modèle déclaratif et réactif pour gérer l’état. Contrairement à Redux, il ne suit pas un flux unidirectionnel strict, ce qui le rend plus flexible et facile à adopter pour des projets de différentes tailles.

• Réactivité automatique : L’état observable met automatiquement à jour les composants connectés.
• Simplicité : Pas besoin d’actions, de reducers ou d’une architecture complexe.
• Utilisation flexible : Compatible avec React, Angular, Vue, ou même des projets Vanilla JS.

2. Installation et configuration

Pour utiliser MobX, installez les packages nécessaires :

# Installer MobX et MobX React
npm install mobx mobx-react
        

Le package mobx fournit les fonctionnalités de base, tandis que mobx-react facilite l’intégration avec React.

3. Principes de base

MobX repose sur trois concepts fondamentaux :

• Observables : L’état que MobX surveille pour détecter les changements.
• Actions : Des méthodes qui modifient l’état observable.
• Reactions : Les mises à jour automatiques des vues lorsque l’état change.

4. Exemple simple avec MobX

Voici un exemple d’utilisation de MobX pour gérer un compteur :

// store/counter.js
import { makeAutoObservable } from 'mobx';

class CounterStore {
    count = 0;

    constructor() {
        makeAutoObservable(this);
    }

    increment() {
        this.count++;
    }

    decrement() {
        this.count--;
    }
}

export default new CounterStore();
        

5. Utilisation avec React

Intégrer MobX avec React est simple grâce au package mobx-react. Voici comment connecter un composant à un store MobX :

// CounterComponent.jsx
import React from 'react';
import { observer } from 'mobx-react';
import counterStore from './store/counter';

const CounterComponent = observer(() => (
    <div>
        <p>Compteur : {counterStore.count}</p>
        <button onClick={counterStore.increment}>Incrémenter</button>
        <button onClick={counterStore.decrement}>Décrémenter</button>
    </div>
));

export default CounterComponent;
        

6. Pourquoi utiliser MobX ?

• Gestion de l’état simple et réactive, sans architecture complexe.
• Réduit le boilerplate par rapport à Redux.
• Idéal pour des projets de tailles variées, des prototypes aux applications complexes.
• Compatible avec TypeScript pour un typage robuste.

7. Exercices pratiques

1. Créez un store MobX pour gérer une liste de tâches, avec des actions pour ajouter et supprimer des tâches.
2. Connectez ce store à un composant React pour afficher la liste et interagir avec les tâches.
3. Ajoutez un compteur pour afficher le nombre total de tâches.

8. Ressources supplémentaires

• Documentation officielle de MobX
• Dépôt GitHub de MobX
• Documentation MobX React

Zustand - Guide Complet

Zustand est une bibliothèque de gestion d’état légère et flexible pour JavaScript et React. Contrairement à Redux ou MobX, Zustand offre une API minimale, sans boilerplate, tout en étant puissante et extensible.

1. Introduction à Zustand

Zustand permet de créer des stores simples et réactifs, tout en offrant une intégration transparente avec React. Sa flexibilité le rend idéal pour des projets allant de petites applications à des systèmes complexes.

• API minimaliste : Créez et gérez l'état avec un code réduit.
• Sans boilerplate : Pas besoin d'actions, de reducers ou de flux complexes.
• Support natif pour React : Mise à jour automatique des composants connectés.
• Extensible : Compatible avec TypeScript, middleware et fonctionnalités avancées.

2. Installation et configuration

Pour installer Zustand, utilisez :

# Installer Zustand
npm install zustand
        

3. Création d'un store avec Zustand

Créer un store avec Zustand est simple et direct :

// store/counter.js
import create from 'zustand';

const useCounterStore = create((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
    decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useCounterStore;
        

4. Utilisation d'un store dans un composant

Pour utiliser le store dans un composant React, appelez simplement le hook :

// CounterComponent.jsx
import React from 'react';
import useCounterStore from './store/counter';

const CounterComponent = () => {
    const { count, increment, decrement } = useCounterStore();

    return (
        <div>
            <p>Compteur : {count}</p>
            <button onClick={increment}>Incrémenter</button>
            <button onClick={decrement}>Décrémenter</button>
        </div>
    );
};

export default CounterComponent;
        

5. Pourquoi utiliser Zustand ?

• API simple et intuitive, adaptée aux projets de toutes tailles.
• Performance optimisée : Mise à jour seulement des composants qui en ont besoin.
• Pas de boilerplate ou de structure complexe à suivre.
• Extensible avec des middleware comme des outils de débogage ou des intégrations tierces.
• Compatible avec TypeScript pour des projets modernes.

6. Exercices pratiques

1. Créez un store Zustand pour gérer une liste de tâches, avec des actions pour ajouter, supprimer et filtrer les tâches.
2. Connectez ce store à plusieurs composants pour afficher les tâches et interagir avec elles.
3. Ajoutez une fonctionnalité pour enregistrer l’état du store dans le localStorage.

7. Ressources supplémentaires

• Documentation officielle de Zustand
• Dépôt GitHub de Zustand
• Tutoriels vidéo sur Zustand

Recoil - Guide Complet

Recoil est une bibliothèque de gestion d’état pour React, conçue pour fournir une gestion d’état globale et locale avec une API minimaliste. Elle offre une approche réactive, où l’état est divisé en petites unités appelées atoms, et une vue dérivée appelée selectors.

1. Introduction à Recoil

Recoil est intégré nativement à React, ce qui signifie qu’il n’a pas besoin de configuration externe complexe. Il permet de gérer l’état de manière granulaire, en offrant des mises à jour réactives et une performance optimisée grâce à son architecture basée sur les graphes.

• Atoms : Les plus petites unités d’état dans Recoil, partageables entre les composants.
• Selectors : Les données dérivées des atoms, recalculées automatiquement lorsque l’état change.
• Écosystème React natif : Conçu pour être utilisé exclusivement avec React.
• Performances optimisées : Mise à jour uniquement des composants impactés par l’état.

2. Installation et configuration

Pour installer Recoil dans un projet React :

# Installer Recoil
npm install recoil
        

Ensuite, configurez le contexte de Recoil au niveau racine de votre application :

// index.js
import { RecoilRoot } from 'recoil';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <RecoilRoot>
        <App />
    </RecoilRoot>,
    document.getElementById('root')
);
        

3. Atoms et Selectors

Recoil utilise des atoms pour stocker l’état et des selectors pour dériver les données :

// store.js
import { atom, selector } from 'recoil';

// Définir un atom
export const counterState = atom({
    key: 'counterState', // Identifiant unique
    default: 0, // Valeur initiale
});

// Définir un selector
export const doubleCounterState = selector({
    key: 'doubleCounterState',
    get: ({ get }) => {
        const count = get(counterState);
        return count * 2;
    },
});
        

4. Utilisation dans un composant

Une fois que vous avez défini vos atoms et selectors, vous pouvez les utiliser dans vos composants avec les hooks de Recoil :

// CounterComponent.jsx
import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { counterState, doubleCounterState } from './store';

const CounterComponent = () => {
    const [count, setCount] = useRecoilState(counterState);
    const doubleCount = useRecoilValue(doubleCounterState);

    return (
        <div>
            <p>Compteur : {count}</p>
            <p>Compteur doublé : {doubleCount}</p>
            <button onClick={() => setCount(count + 1)}>Incrémenter</button>
        </div>
    );
};

export default CounterComponent;
    

5. Selectors asynchrones

// Selector asynchrone
export const fetchDataState = selector({
    key: 'fetchDataState',
    get: async () => {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
    },
});
    

6. Meilleures pratiques

• Organisez vos atoms : Placez-les dans des fichiers dédiés par domaine (par exemple, `authState.js`, `cartState.js`).
• Utilisez des selectors pour dériver des données : Évitez de calculer des valeurs directement dans les composants.
• Hydratez l’état au démarrage : Utilisez des selectors asynchrones pour initialiser l’état avec des données externes.
• Limitez les rendus inutiles : Utilisez useRecoilValue au lieu de useRecoilState si vous ne modifiez pas l’état.

7. Exercices pratiques

1. Créez un atom pour gérer un panier d'achat et un selector pour calculer le total des articles.
2. Implémentez un selector asynchrone pour récupérer des articles depuis une API et les afficher dans un composant.
3. Ajoutez une fonctionnalité pour filtrer les articles dans une liste en utilisant plusieurs selectors.

8. Ressources supplémentaires

• Documentation officielle de Recoil
• Dépôt GitHub de Recoil
• Tutoriels vidéo sur Recoil

Webpack - Guide Complet

Webpack est un outil de build JavaScript qui permet de regrouper les fichiers et modules de votre application en un ou plusieurs fichiers de sortie. Il est particulièrement utile pour gérer des applications complexes, en combinant JavaScript, CSS, images, et autres types de fichiers dans un flux de construction optimisé.

1. Introduction à Webpack

Webpack fonctionne en créant un graphe de dépendances de tous les fichiers de votre projet, puis en les empaquetant dans des fichiers de sortie optimisés. Voici ses principales fonctionnalités :

• Bundling : Combine plusieurs fichiers en un seul.
• Code splitting : Chargez uniquement les parties nécessaires de votre application.
• Loaders : Traitez les fichiers CSS, images, etc.
• Plugins : Étendez les fonctionnalités avec des outils tiers.

2. Installation et configuration

Pour installer Webpack et son CLI :

# Installer Webpack
npm install --save-dev webpack webpack-cli
        

Ensuite, créez un fichier webpack.config.js pour configurer Webpack :

// webpack.config.js
const path = require('path');

module.exports = {
    entry: './src/index.js', // Point d'entrée principal
    output: {
        path: path.resolve(__dirname, 'dist'), // Dossier de sortie
        filename: 'bundle.js', // Nom du fichier de sortie
    },
    module: {
        rules: [
            {
                test: /\.css$/, // Traiter les fichiers CSS
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    mode: 'development', // Mode de build
};
        

3. Points d'entrée et de sortie

Webpack utilise un point d'entrée pour construire un graphe de dépendances et produit un ou plusieurs fichiers de sortie.

// Exemple avec plusieurs points d'entrée
module.exports = {
    entry: {
        main: './src/index.js',
        admin: './src/admin.js',
    },
    output: {
        filename: '[name].bundle.js', // Produit main.bundle.js et admin.bundle.js
        path: path.resolve(__dirname, 'dist'),
    },
};
    

4. Loaders et Plugins

Les loaders et plugins permettent à Webpack de traiter différents types de fichiers et d'ajouter des fonctionnalités avancées.

Exemple de loaders

Les loaders transforment les fichiers avant qu'ils ne soient ajoutés au bundle :

// Exemple de loader Babel pour transpiler du JavaScript moderne
rules: [
    {
        test: /\.js$/, // Fichiers JS
        exclude: /node_modules/, // Exclure node_modules
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env'],
            },
        },
    },
];
    

Exemple de plugins

Les plugins ajoutent des fonctionnalités avancées, comme la minification ou l'injection automatique dans le HTML :

// Exemple avec HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',
    }),
];
    

5. Code Splitting

Webpack peut diviser le code en plusieurs fichiers pour optimiser le chargement des ressources :

// Exemple de code splitting
module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all', // Divise le code en plusieurs chunks
        },
    },
};
    

6. Meilleures pratiques

• Utilisez des loaders pour chaque type de fichier : JavaScript, CSS, images.
• Divisez le code : Activez le code splitting pour optimiser les performances.
• Minifiez le code pour la production : Configurez le mode production pour réduire la taille des fichiers.
• Ajoutez des outils de débogage : Configurez devtool pour générer des sourcemaps.

7. Exercices pratiques

1. Configurez un projet Webpack avec Babel pour transpiler du JavaScript moderne.
2. Ajoutez un loader pour importer et gérer les fichiers CSS.
3. Implémentez le code splitting pour diviser le code en chunks séparés.
4. Utilisez HtmlWebpackPlugin pour générer automatiquement un fichier HTML.

8. Ressources supplémentaires

• Documentation officielle de Webpack
• Dépôt GitHub de Webpack
• Tutoriels Webpack

Vite - Guide Complet

Vite est un outil de build rapide et moderne conçu pour les projets JavaScript et TypeScript. Il se distingue par son serveur de développement ultra-rapide et sa capacité à générer des builds optimisés pour la production. Il est particulièrement adapté aux projets utilisant des frameworks modernes comme Vue, React ou Svelte.

1. Introduction à Vite

Créé par Evan You, le créateur de Vue.js, Vite se concentre sur la simplicité et les performances. Il utilise des fonctionnalités modernes du navigateur, comme les modules ES natifs, pour offrir une expérience de développement fluide et rapide.

• Serveur de développement rapide : Charge uniquement les fichiers nécessaires.
• Build optimisé : Utilise Rollup pour générer des builds de production efficaces.
• Support des modules ES : Simplifie la configuration et améliore la vitesse.

2. Installation et configuration

Pour démarrer avec Vite, utilisez la commande suivante pour initialiser un projet :

# Initialiser un projet Vite
npm create vite@latest mon-projet
        

Ensuite, suivez les instructions pour choisir votre framework (React, Vue, Svelte, etc.).

3. Structure du projet

Une fois le projet créé, voici une structure typique :

mon-projet/
├── index.html // Point d'entrée principal
├── src/
│   ├── main.js // Entrée JavaScript
│   └── App.vue // Composant principal (si vous utilisez Vue)
├── public/ // Contient les fichiers statiques
├── package.json
├── vite.config.js // Configuration de Vite
└── node_modules/
    

4. Configuration de Vite

Voici un exemple de configuration de base pour Vite :

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [vue()], // Ajout de plugins, ici pour Vue
    server: {
        port: 3000, // Définit le port du serveur de dev
    },
    build: {
        sourcemap: true, // Génère des sourcemaps pour le débogage
    },
});
    

5. Commandes principales

Les commandes suivantes sont disponibles pour développer et déployer votre projet :

# Démarrer le serveur de développement
npm run dev

# Générer un build optimisé pour la production
npm run build

# Prévisualiser le build de production
npm run preview
    

6. Utilisation des plugins

Vite dispose d’un écosystème riche en plugins pour ajouter des fonctionnalités. Voici un exemple d’ajout de Tailwind CSS :

# Installer Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
# Initialiser la configuration
npx tailwindcss init
    

// vite.config.js
import tailwindcss from 'tailwindcss';
export default defineConfig({
    css: {
        postcss: {
            plugins: [tailwindcss()],
        },
    },
});
    

7. Optimisations

Vite supporte le code splitting et d'autres optimisations de build grâce à Rollup :

// vite.config.js
build: {
    rollupOptions: {
        output: {
            manualChunks: {
                vendor: ['react', 'react-dom'], // Sépare les dépendances principales
            },
        },
    },
},
    

8. Meilleures pratiques

• Utilisez des plugins officiels : Comme @vitejs/plugin-vue ou @vitejs/plugin-react.
• Optimisez les imports : Préférez les imports dynamiques pour les grandes dépendances.
• Servez des fichiers statiques : Placez vos fichiers dans le dossier public.
• Gérez les variables d’environnement : Utilisez un fichier .env pour vos configurations.

9. Exercices pratiques

1. Configurez un projet Vite pour React avec Tailwind CSS.
2. Ajoutez un plugin pour analyser la taille du bundle et optimisez-le.
3. Implémentez le code splitting pour charger dynamiquement des composants React.

10. Ressources supplémentaires

• Documentation officielle de Vite
• Dépôt GitHub de Vite
• Modèles de projets Vite

Rollup - Guide Complet

Rollup est un bundler JavaScript moderne conçu pour regrouper les modules ES en bundles optimisés. Il est particulièrement adapté aux bibliothèques et frameworks en raison de sa capacité à produire un code léger et performant, avec des fonctionnalités avancées comme l'arbre de secouage (tree-shaking).

1. Introduction à Rollup

Rollup se distingue par sa simplicité et son efficacité dans la création de bundles optimisés. Il prend en charge les modules ES nativement, ce qui lui permet d'éliminer le code inutile grâce à l'arbre de secouage.

• Modules ES natifs : Prise en charge complète des standards modernes.
• Tree-shaking : Élimination du code non utilisé pour des bundles plus légers.
• Extensible : Large écosystème de plugins pour ajouter des fonctionnalités.

2. Installation et configuration

Pour démarrer avec Rollup, installez-le dans votre projet :

# Installer Rollup
npm install --save-dev rollup
        

Ensuite, créez un fichier de configuration rollup.config.js :

// rollup.config.js
export default {
    input: 'src/index.js', // Point d'entrée principal
    output: {
        file: 'dist/bundle.js', // Fichier de sortie
        format: 'es', // Format du module (es, cjs, etc.)
    },
};
        

3. Formats de sortie

Rollup prend en charge plusieurs formats de sortie pour s’adapter à différents environnements :

• ES Modules (es) : Idéal pour les navigateurs modernes.
• CommonJS (cjs) : Compatible avec Node.js.
• UMD : Format universel pour les navigateurs et Node.js.

// Exemple avec plusieurs formats
export default {
    input: 'src/index.js',
    output: [
        { file: 'dist/bundle.esm.js', format: 'es' },
        { file: 'dist/bundle.cjs.js', format: 'cjs' },
        { file: 'dist/bundle.umd.js', format: 'umd', name: 'MyLibrary' },
    ],
};
    

4. Utilisation des plugins

Rollup propose un écosystème riche en plugins pour étendre ses fonctionnalités. Voici un exemple avec Babel pour transpiler du JavaScript moderne :

// Installer le plugin Babel
npm install --save-dev @rollup/plugin-babel

// Ajouter le plugin Babel à la configuration
import babel from '@rollup/plugin-babel';

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'es',
    },
    plugins: [babel({ babelHelpers: 'bundled' })],
};
    

5. Tree-shaking

Rollup élimine automatiquement le code inutilisé pour réduire la taille du bundle :

// src/math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// src/index.js
import { add } from './math.js';
console.log(add(2, 3)); // La fonction `subtract` ne sera pas incluse dans le bundle
    

6. Code Splitting

Rollup supporte le code splitting pour diviser le bundle en plusieurs fichiers :

// rollup.config.js
export default {
    input: {
        main: 'src/main.js',
        admin: 'src/admin.js',
    },
    output: {
        dir: 'dist',
        format: 'es',
    },
};
    

7. Meilleures pratiques

• Choisissez le bon format : Utilisez es pour les navigateurs modernes et cjs pour Node.js.
• Combinez avec Babel : Pour une compatibilité avec les anciens navigateurs.
• Optimisez avec des plugins : Utilisez des plugins pour minifier le code, gérer les fichiers CSS ou les imports dynamiques.
• Configurez un package.json : Fournissez différents points d’entrée pour différents environnements (module, main).

8. Exercices pratiques

1. Configurez un projet Rollup pour créer une bibliothèque JavaScript avec des points d'entrée multiples.
2. Ajoutez un plugin pour minifier les fichiers de sortie.
3. Implémentez le tree-shaking en éliminant les fonctions inutilisées dans votre code.

9. Ressources supplémentaires

• Documentation officielle de Rollup
• Dépôt GitHub de Rollup
• Plugins officiels de Rollup

Esbuild - Guide Complet

Esbuild est un bundler JavaScript écrit en Go, connu pour sa vitesse incroyable. Il est capable de gérer des projets complexes en quelques millisecondes tout en offrant des fonctionnalités modernes comme la transpilation ES6+, le tree-shaking et le code splitting.

1. Introduction à Esbuild

Esbuild se concentre sur la performance et la simplicité. Grâce à son implémentation en Go, il est des dizaines de fois plus rapide que les autres bundlers écrits en JavaScript. Il supporte également TypeScript, JSX et de nombreux autres formats sans dépendances supplémentaires.

• Ultra-rapide : Optimisé pour des temps de compilation courts.
• Compatibilité moderne : Supporte ES6+, TypeScript et JSX.
• Tree-shaking automatique : Élimine le code non utilisé pour des bundles optimisés.

2. Installation et configuration

Pour commencer avec Esbuild, installez-le via npm :

# Installer Esbuild
npm install --save-dev esbuild
        

Ensuite, utilisez une commande simple pour compiler votre code :

# Exemple de compilation
npx esbuild src/index.js --bundle --outfile=dist/bundle.js
        

3. Configuration avec un fichier script

Pour gérer des projets plus complexes, vous pouvez créer un script de build personnalisé :

// build.js
const esbuild = require('esbuild');

esbuild.build({
    entryPoints: ['src/index.js'],
    bundle: true,
    outfile: 'dist/bundle.js',
    sourcemap: true, // Génère un sourcemap pour le débogage
    minify: true, // Minifie le code pour la production
    target: 'es2015', // Définit la cible de compatibilité
}).catch(() => process.exit(1));
    

4. Tree-shaking et code splitting

Esbuild gère automatiquement le tree-shaking pour éliminer le code inutilisé. Voici un exemple :

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// index.js
import { add } from './math.js';
console.log(add(2, 3)); // `subtract` sera éliminé
    

Le code splitting est également simple avec l’option splitting :

npx esbuild src/index.js --bundle --splitting --outdir=dist --format=esm
    

5. Support TypeScript et JSX

Esbuild prend en charge TypeScript et JSX sans configuration supplémentaire :

# Compiler TypeScript
npx esbuild src/index.ts --bundle --outfile=dist/bundle.js

# Compiler React (JSX)
npx esbuild src/index.jsx --bundle --outfile=dist/bundle.js
    

6. Meilleures pratiques

• Utilisez des scripts : Configurez vos builds avec un fichier build.js.
• Combinez avec d’autres outils : Esbuild est souvent utilisé avec d’autres outils comme PostCSS pour les styles.
• Minifiez en production : Activez l’option minify pour réduire la taille de vos bundles.
• Activez le code splitting : Pour diviser le code en fichiers indépendants.

7. Exercices pratiques

1. Créez un script Esbuild pour gérer un projet React avec JSX.
2. Ajoutez la prise en charge de TypeScript dans votre build.
3. Configurez un build avec code splitting et générez des sourcemaps pour le débogage.

8. Ressources supplémentaires

• Documentation officielle d’Esbuild
• Dépôt GitHub d’Esbuild
• Démos d’Esbuild

Parcel - Guide Complet

Parcel est un bundler JavaScript "zero-config" qui simplifie le développement d'applications modernes. Il prend en charge de nombreux types de fichiers par défaut, comme JavaScript, TypeScript, CSS, HTML, et bien d’autres. Avec son approche intuitive, Parcel est parfait pour les développeurs qui veulent démarrer rapidement sans perdre de temps avec une configuration complexe.

1. Introduction à Parcel

Parcel combine simplicité et performance. Il offre un hot-reloading intégré, une gestion automatique des dépendances, et supporte les fonctionnalités avancées comme le tree-shaking et le code splitting.

• Zero-config : Fonctionne immédiatement, sans configuration.
• Support multi-format : Compatible avec JavaScript, CSS, HTML, images, et plus encore.
• Hot-reloading : Recharge automatiquement les fichiers pendant le développement.
• Optimisation automatique : Minification, tree-shaking et code splitting en production.

2. Installation et configuration

Pour démarrer avec Parcel, installez-le via npm :

# Installer Parcel
npm install --save-dev parcel
        

Ensuite, créez un fichier HTML d’entrée :

// index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Mon projet Parcel</title>
    </head>
    <body>
        <script src="src/index.js"></script>
    </body>
</html>
        

3. Commandes principales

Pour démarrer un serveur de développement ou créer un build de production, utilisez les commandes suivantes :

# Démarrer le serveur de développement
npx parcel index.html

# Créer un build optimisé pour la production
npx parcel build index.html
    

4. Fonctionnalités avancées

Gestion multi-entrée

Parcel supporte plusieurs fichiers d’entrée sans configuration complexe :

npx parcel src/index.js src/admin.js
    

Hot Module Replacement (HMR)

Parcel recharge automatiquement les modules modifiés pendant le développement, ce qui accélère le cycle de développement.

Tree-shaking

Parcel élimine automatiquement le code inutilisé pour réduire la taille des fichiers :

// src/math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// src/index.js
import { add } from './math.js';
console.log(add(2, 3)); // `subtract` ne sera pas inclus dans le bundle
    

Code splitting

Parcel génère automatiquement des chunks pour optimiser le chargement des ressources :

import('./module').then((module) => {
    module.default();
});
    

5. Meilleures pratiques

• Utilisez le dossier src/ : Placez vos fichiers sources dans un répertoire dédié pour une meilleure organisation.
• Exploitez les fichiers .env : Utilisez des variables d’environnement pour vos configurations sensibles.
• Optimisez les images : Parcel optimise automatiquement les fichiers image utilisés dans vos projets.
• Combinez avec TypeScript : Ajoutez simplement des fichiers .ts, Parcel les gère nativement.

6. Exercices pratiques

1. Configurez un projet Parcel avec plusieurs points d’entrée.
2. Ajoutez un fichier TypeScript et compilez-le avec Parcel.
3. Intégrez un fichier SCSS dans votre projet et compilez-le automatiquement avec Parcel.
4. Utilisez un fichier .env pour gérer vos variables d’environnement.

7. Ressources supplémentaires

• Documentation officielle de Parcel
• Dépôt GitHub de Parcel
• Caractéristiques de Parcel

Jest - Guide Complet

Jest est une bibliothèque de tests JavaScript développée par Facebook. Elle est particulièrement adaptée pour tester des applications React, mais fonctionne également très bien avec d'autres frameworks et bibliothèques. Jest offre une interface simple et intuitive pour écrire des tests unitaires, des tests d'intégration, et des tests de snapshot.

1. Introduction à Jest

Jest est un framework complet pour les tests JavaScript. Il inclut un test runner, un simulateur de DOM (via jsdom), et des fonctionnalités avancées comme les mocks, les spies, et les snapshots.

• Rapide et isolé : Exécute les tests en parallèle dans un environnement sandboxé.
• Snapshots : Capture l'état d'un composant pour détecter les changements inattendus.
• Mocks intégrés : Simulez des modules ou des fonctions pour tester en isolation.
• Compatible TypeScript : Fonctionne parfaitement avec TypeScript et Babel.

2. Installation et configuration

Pour démarrer avec Jest, installez-le via npm :

# Installer Jest
npm install --save-dev jest
        

Ajoutez ensuite un script dans votre fichier package.json :

// package.json
"scripts": {
    "test": "jest"
}
        

3. Écrire un test de base

Les tests dans Jest sont écrits dans des fichiers avec l'extension .test.js ou .spec.js. Voici un exemple simple :

// math.js
export const add = (a, b) => a + b;

// math.test.js
import { add } from './math';

test('Addition de deux nombres', () => {
    expect(add(2, 3)).toBe(5);
});
    

4. Tests de snapshot

Jest peut capturer l'état des composants ou objets et comparer automatiquement les snapshots :

// Button.js
const Button = () => (
    <button>Click me</button>
);

export default Button;

// Button.test.js
import renderer from 'react-test-renderer';
import Button from './Button';

test('Snapshot du composant Button', () => {
    const tree = renderer.create().toJSON();
    expect(tree).toMatchSnapshot();
});
    

5. Tests asynchrones

Pour tester des fonctions asynchrones, utilisez les mots-clés async et await :

// api.js
export const fetchData = () =>
    new Promise((resolve) => {
        setTimeout(() => resolve('Données reçues'), 1000);
    });

// api.test.js
import { fetchData } from './api';

test('fetchData renvoie les données', async () => {
    const data = await fetchData();
    expect(data).toBe('Données reçues');
});
    

6. Mocks et Spies

Jest offre des fonctionnalités intégrées pour créer des mocks et des spies, ce qui permet de tester des fonctions en isolation :

// Exemple de mock
const myMock = jest.fn();
myMock('appel 1');
expect(myMock).toHaveBeenCalledWith('appel 1');

// Exemple de spy
const obj = {
    method: () => 'test',
};
jest.spyOn(obj, 'method');
obj.method();
expect(obj.method).toHaveBeenCalled();
    

7. Meilleures pratiques

• Isoler les tests : Testez les unités de code indépendamment.
• Utilisez des mocks : Mockez les dépendances externes comme les API.
• Organisez vos fichiers : Placez les tests dans un dossier dédié ou avec les fichiers sources.
• Exploitez les snapshots : Pour vérifier les changements dans les composants visuels.
• Nettoyez les mocks : Utilisez jest.clearAllMocks() après chaque test.

8. Exercices pratiques

1. Écrivez un test pour une fonction asynchrone qui interroge une API.
2. Utilisez un snapshot pour vérifier un composant React dynamique.
3. Mockez une bibliothèque externe et testez son intégration avec votre code.

9. Ressources supplémentaires

• Documentation officielle de Jest
• Dépôt GitHub de Jest
• React Testing Library

Mocha - Guide Complet

Mocha est un framework de tests JavaScript flexible et extensible qui fonctionne aussi bien côté client (navigateur) que côté serveur (Node.js). Il offre une API simple pour écrire des tests, tout en vous laissant choisir les bibliothèques d'assertion, de mock ou de stub que vous souhaitez utiliser.

1. Introduction à Mocha

Mocha est conçu pour exécuter des tests de manière asynchrone, avec des rapports détaillés et des fonctionnalités comme les hooks pour organiser vos tests. Mocha est souvent utilisé avec des bibliothèques comme Chai pour les assertions, et Sinon pour les mocks et les spies.

• Flexible : Compatible avec différentes bibliothèques d’assertions.
• Rapports détaillés : Fournit des sorties claires pour les résultats des tests.
• Support des tests asynchrones : Idéal pour tester les API ou les appels réseau.
• Extensible : S'intègre facilement avec d'autres outils comme Chai, Sinon, et Supertest.

2. Installation et configuration

Pour démarrer avec Mocha, installez-le globalement ou dans votre projet :

# Installer Mocha globalement
npm install -g mocha

# Ou localement dans un projet
npm install --save-dev mocha
        

Ajoutez un script dans votre fichier package.json :

// package.json
"scripts": {
    "test": "mocha"
}
        

3. Écrire un test de base

Voici un exemple de test simple avec Mocha et les assertions Node.js intégrées :

// math.js
export const add = (a, b) => a + b;

// math.test.js
const assert = require('assert');
const { add } = require('./math');

describe('Fonctions mathématiques', () => {
    it('devrait additionner deux nombres', () => {
        assert.strictEqual(add(2, 3), 5);
    });
});
    

4. Utilisation avec Chai

Chai est une bibliothèque populaire pour écrire des assertions expressives et puissantes :

# Installer Chai
npm install --save-dev chai

// math.test.js
const chai = require('chai');
const { expect } = chai;
const { add } = require('./math');

describe('Fonctions mathématiques', () => {
    it('devrait additionner deux nombres', () => {
        expect(add(2, 3)).to.equal(5);
    });
});
    

5. Organisation avec les hooks

Mocha offre des hooks comme before, after, beforeEach, et afterEach pour organiser vos tests :

describe('Tests avec hooks', () => {
    let count = 0;

    beforeEach(() => {
        count++;
    });

    it('compteur devrait être 1', () => {
        assert.strictEqual(count, 1);
    });

    it('compteur devrait être 2', () => {
        assert.strictEqual(count, 2);
    });
});
    

6. Tests asynchrones

Pour tester des fonctions asynchrones, utilisez le mot-clé async ou un done callback :

// Exemple avec async/await
it('devrait attendre les données', async () => {
    const data = await fetchData();
    assert.strictEqual(data, 'Données reçues');
});

// Exemple avec done
it('devrait utiliser done', (done) => {
    fetchData().then((data) => {
        assert.strictEqual(data, 'Données reçues');
        done();
    });
});
    

7. Utilisation avec Sinon

Sinon est une bibliothèque populaire pour créer des mocks et des spies :

# Installer Sinon
npm install --save-dev sinon

// Exemple de spy
const sinon = require('sinon');
const myFunction = sinon.spy();

myFunction();
expect(myFunction.calledOnce).to.be.true;
    

8. Meilleures pratiques

• Organisez vos tests : Groupez les tests par fonctionnalité avec describe.
• Utilisez des hooks : Préparez les données ou nettoyez après chaque test.
• Combinez avec Chai et Sinon : Pour des assertions et des mocks expressifs.
• Rendez les tests isolés : Mockez les dépendances pour éviter les effets de bord.

9. Exercices pratiques

1. Créez un test pour vérifier qu'une fonction renvoie un tableau trié.
2. Testez une API asynchrone avec Mocha et Chai.
3. Utilisez Sinon pour mocker une fonction et vérifier son appel.

10. Ressources supplémentaires

• Documentation officielle de Mocha
• Documentation officielle de Chai
• Documentation officielle de Sinon

Chai - Guide Complet

Chai est une bibliothèque d’assertions pour JavaScript qui permet d’écrire des tests lisibles et expressifs. Elle est compatible avec de nombreux frameworks de tests comme Mocha et Jasmine, et prend en charge différents styles d’assertions, notamment BDD (Behavior-Driven Development) et TDD (Test-Driven Development).

1. Introduction à Chai

Chai offre une flexibilité exceptionnelle grâce à ses trois interfaces principales :

• Expect : Syntaxe intuitive et lisible.
• Assert : Style classique utilisé dans les approches TDD.
• Should : Style fluide, adapté aux tests en BDD.

2. Installation et configuration

Pour utiliser Chai, installez-le dans votre projet avec npm :

# Installer Chai
npm install --save-dev chai
        

3. Interface Expect

Le style expect est très lisible et intuitif :

// Exemple avec expect
const chai = require('chai');
const { expect } = chai;

describe('Tests avec expect', () => {
    it('devrait vérifier les égalités', () => {
        expect(2 + 2).to.equal(4);
    });

    it('devrait vérifier les types', () => {
        expect('Hello').to.be.a('string');
    });
});
    

4. Interface Assert

Le style assert est idéal pour ceux qui préfèrent une syntaxe plus stricte :

// Exemple avec assert
const chai = require('chai');
const { assert } = chai;

describe('Tests avec assert', () => {
    it('devrait vérifier les égalités', () => {
        assert.equal(2 + 2, 4);
    });

    it('devrait vérifier les types', () => {
        assert.typeOf('Hello', 'string');
    });
});
    

5. Interface Should

Le style should ajoute des assertions directement aux objets via des prototypes :

// Exemple avec should
const chai = require('chai');
chai.should();

describe('Tests avec should', () => {
    it('devrait vérifier les égalités', () => {
        (2 + 2).should.equal(4);
    });

    it('devrait vérifier les propriétés', () => {
        const obj = { name: 'Alice' };
        obj.should.have.property('name').that.is.a('string');
    });
});
    

6. Plugins avec Chai

Chai prend en charge des plugins pour ajouter des fonctionnalités supplémentaires. Par exemple, chai-as-promised permet de tester des promesses :

# Installer chai-as-promised
npm install --save-dev chai-as-promised

// Utiliser chai-as-promised
const chai = require('chai');
const chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);

const promise = new Promise((resolve) => resolve('Résolu'));
promise.should.eventually.equal('Résolu');
    

7. Meilleures pratiques

• Choisissez une interface adaptée : Utilisez expect pour une syntaxe lisible ou assert pour une syntaxe stricte.
• Combinez avec un framework : Utilisez Chai avec Mocha pour des tests complets.
• Ajoutez des plugins : Exploitez des plugins comme chai-as-promised pour des cas spécifiques.
• Organisez vos assertions : Groupez les assertions pour des tests plus clairs.

8. Exercices pratiques

1. Testez une fonction qui vérifie si un nombre est pair avec expect.
2. Créez un objet et utilisez should pour vérifier ses propriétés.
3. Utilisez chai-as-promised pour tester une fonction asynchrone retournant une promesse.

9. Ressources supplémentaires

• Documentation officielle de Chai
• Dépôt GitHub de Chai
• Liste des plugins Chai

Cypress - Guide Complet

Cypress est un outil puissant et intuitif pour les tests end-to-end. Il permet de tester vos applications web directement dans un navigateur tout en offrant une interface interactive pour voir les tests en temps réel. Conçu pour être facile à configurer et rapide à utiliser, Cypress est idéal pour automatiser les tests utilisateur et garantir la qualité de vos applications web.

1. Introduction à Cypress

Cypress se distingue par son approche unique : il s'exécute directement dans le navigateur, ce qui lui permet d'interagir avec votre application comme le ferait un utilisateur. Il est particulièrement adapté aux tests d'intégration et de bout en bout, mais peut aussi être utilisé pour des tests unitaires.

• Tests en temps réel : Interagissez avec l'interface utilisateur de votre application.
• Hot-reloading : Recharge les tests automatiquement après chaque modification.
• Snapshots : Capture l'état de l'application à chaque étape d'un test.
• API intuitive : Des commandes simples pour écrire des tests lisibles.

2. Installation et configuration

Pour démarrer avec Cypress, installez-le via npm :

# Installer Cypress
npm install --save-dev cypress
        

Ensuite, ouvrez Cypress avec la commande suivante :

# Ouvrir Cypress
npx cypress open
        

Cela ouvre une interface interactive où vous pouvez exécuter et visualiser vos tests.

3. Écrire un premier test

Les tests Cypress sont écrits dans le dossier cypress/integration. Voici un exemple de test simple :

// example.spec.js
describe('Page d'accueil', () => {
    it('devrait afficher le titre correct', () => {
        cy.visit('https://example.com'); // Visite la page
        cy.contains('Exemple').should('exist'); // Vérifie le contenu
    });
});
    

4. Commandes principales

Cypress offre une API riche et intuitive pour interagir avec votre application :

• cy.visit(url) : Navigue vers une URL.
• cy.get(selector) : Sélectionne un élément avec un sélecteur CSS.
• cy.contains(text) : Trouve un élément contenant un texte spécifique.
• cy.click() : Clique sur un élément sélectionné.
• cy.type(text) : Tape du texte dans un champ.
• cy.should(assertion) : Vérifie une assertion sur un élément.

// Exemple d'interaction
cy.visit('https://example.com');
cy.get('.btn-login').click();
cy.get('#username').type('mon_nom');
cy.get('#password').type('mon_mot_de_passe');
cy.get('.submit').click();
cy.url().should('include', 'dashboard');
    

5. Tests asynchrones

Cypress gère automatiquement les opérations asynchrones grâce à son système de chaînes de commandes :

// Test d'une API
cy.request('GET', 'https://api.example.com/data').then((response) => {
    expect(response.status).to.equal(200);
    expect(response.body).to.have.property('data');
});
    

6. Tests de formulaire

Testez facilement les interactions utilisateur dans des formulaires :

// Exemple de test de formulaire
cy.visit('https://example.com/login');
cy.get('#email').type('user@example.com');
cy.get('#password').type('password123');
cy.get('.login-btn').click();
cy.url().should('include', '/dashboard');
    

7. Meilleures pratiques

• Isoler les tests : Écrivez des tests indépendants pour éviter les dépendances entre eux.
• Nettoyer après chaque test : Réinitialisez l’état de votre application avec des hooks comme beforeEach.
• Utilisez les commandes personnalisées : Créez des commandes réutilisables avec Cypress.Commands.add.
• Gérez les données sensibles : Stockez vos mots de passe ou clés API dans des variables d’environnement.

8. Exercices pratiques

1. Écrivez un test qui vérifie qu'un utilisateur peut s'inscrire et se connecter.
2. Testez une page qui utilise une API pour charger des données dynamiques.
3. Créez un test qui vérifie les erreurs de validation d’un formulaire.

9. Ressources supplémentaires

• Documentation officielle de Cypress
• Guide utilisateur de Cypress
• Dépôt GitHub de Cypress

Playwright - Guide Complet

Playwright est un framework de tests open-source conçu par Microsoft. Il permet d'automatiser des interactions avec des navigateurs modernes comme Chromium, Firefox et WebKit. Avec son support natif pour les tests en parallèle et les tests dans différents navigateurs, Playwright est idéal pour garantir la qualité des applications web modernes.

1. Introduction à Playwright

Playwright offre une API puissante et intuitive pour interagir avec des applications web dans des environnements multi-navigateurs. Il est particulièrement adapté aux tests end-to-end et supporte des fonctionnalités avancées comme le test des appareils mobiles et le rendu en mode sans tête (headless).

• Multi-navigateurs : Compatible avec Chromium, Firefox, WebKit, et Edge.
• Mode headless : Exécute des tests sans afficher de fenêtre.
• Prise en charge des appareils mobiles : Simule des navigateurs mobiles.
• API intuitive : Des commandes faciles à utiliser pour écrire des tests robustes.

2. Installation et configuration

Pour démarrer avec Playwright, installez-le via npm :

# Installer Playwright
npm install --save-dev playwright
        

Vous pouvez aussi installer les navigateurs nécessaires avec :

# Installer les navigateurs
npx playwright install
        

3. Écrire un premier test

Voici un exemple de test simple avec Playwright :

// test.js
const { chromium } = require('playwright');

(async () => {
    // Lancer un navigateur
    const browser = await chromium.launch();
    // Ouvrir une nouvelle page
    const page = await browser.newPage();
    // Naviguer vers une URL
    await page.goto('https://example.com');
    // Vérifier le contenu de la page
    await page.screenshot({ path: 'screenshot.png' });
    await browser.close();
})();
    

4. Tests multi-navigateurs

Playwright supporte plusieurs navigateurs. Voici comment tester avec Chromium, Firefox, et WebKit :

// multi-browser-test.js
const { chromium, firefox, webkit } = require('playwright');

const browsers = [chromium, firefox, webkit];

browsers.forEach(async (browserType) => {
    const browser = await browserType.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await browser.close();
});
    

5. Tests asynchrones

Playwright gère automatiquement les opérations asynchrones grâce à des await :

// async-test.js
const { chromium } = require('playwright');

async function test() {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    const title = await page.title();
    console.log('Titre:', title);
    await browser.close();
}

test();
    

6. Tests sur appareils mobiles

Simulez des appareils mobiles avec Playwright :

// mobile-test.js
const { chromium, devices } = require('playwright');

const iPhone = devices['iPhone 11'];

(async () => {
    const browser = await chromium.launch();
    const context = await browser.newContext({
        ...iPhone,
    });
    const page = await context.newPage();
    await page.goto('https://example.com');
    await browser.close();
})();
    

7. Meilleures pratiques

• Utilisez des contextes : Créez des contextes séparés pour isoler les sessions utilisateur.
• Utilisez des tests en parallèle : Exécutez des tests sur plusieurs navigateurs pour maximiser la couverture.
• Utilisez des captures d’écran : Prenez des captures pour vérifier les changements visuels.
• Exploitez les fixtures : Configurez vos tests avec des configurations réutilisables.

8. Exercices pratiques

1. Écrivez un test qui vérifie le titre et le contenu d'une page web.
2. Créez un test pour une page de formulaire et soumettez les données.
3. Simulez un appareil mobile et vérifiez le rendu d'une application responsive.

9. Ressources supplémentaires

• Documentation officielle de Playwright
• Dépôt GitHub de Playwright
• API Playwright