Vous voulez rendre votre site React aussi rapide et accessible que possible ? Vous êtes au bon endroit !
React est une bibliothèque Open Source qui facilite la création d'interfaces utilisateur. Ce parcours de formation présente différents outils et API de l'écosystème que vous pouvez envisager d'utiliser pour améliorer les performances et la facilité d'utilisation de votre application.
Ce guide vous explique comment utiliser une application React. Tous les autres guides de cette section traiteront de sujets permettant d'optimiser la vitesse ou l'accessibilité d'une application React.
En quoi est-ce utile ?
De nombreux contenus expliquent comment créer des applications rapides et fiables, mais peu d'entre elles expliquent comment créer des applications React rapides et fiables. Ces guides abordent tout cela du point de vue d'une application React où seules les bibliothèques, les API et les fonctionnalités spécifiques à l'écosystème React sont mentionnées.
Qu'allez-vous apprendre ?
Les tutoriels de ce parcours de formation ne portent pas sur les sujets suivants:
- Utiliser React
- Fonctionnement de React
Bien que nous revenions sur ces deux concepts si nécessaire, tous les guides et ateliers de programmation de cette section se concentreront plutôt sur la création de sites React rapides et accessibles. Pour cette raison, une connaissance de base de React est requise.
Créer une application React
Create React App (CRA) est le moyen le plus simple de commencer à créer des applications React. Il fournit une configuration par défaut avec un certain nombre de fonctionnalités de base intégrées, y compris un système de compilation contenant un bundler de module (webpack) et un transpiler (Babel).
Dans une interface système de ligne de commande, il vous suffit d'exécuter la commande suivante pour créer une application:
npx create-react-app app-name
Une fois l'exécution de la commande terminée, vous pouvez accéder à l'application et l'exécuter à l'aide des commandes suivantes:
cd new-app
npm start
L'intégration suivante montre la structure de répertoires et la page Web d'une application CRA qui vient d'être amorcée.
CRA utilise plusieurs fichiers de configuration et scripts de compilation pour configurer un processus de compilation Webpack et Babel, qui inclut une configuration Jest de base pour les tests. Pour simplifier les choses pour l'utilisateur, ces fichiers sont masqués et ne sont pas accessibles tant que vous ne les avez pas éjectés de l'ARC. Il est toujours préférable d'éviter les exclusions autant que possible, car cela implique d'utiliser tous ces fichiers de configuration comme votre propre code source, ce qui peut devenir difficile à gérer.
La structure de répertoires d'une nouvelle application CRA ne contient que les fichiers que vous devez réellement modifier pour utiliser votre application. La documentation CRA explique ce point en détail.
Étape suivante
Maintenant que vous savez comment créer une application Create React, découvrez comment améliorer les performances et l'accessibilité de votre application grâce à tous les guides de ce parcours de formation:
- Division du code avec React.lazy et Suspense
- Virtualiser les grandes listes avec la fenêtre de réaction
- Mise en cache préalable dans Créer une application React avec Workbox
- Précharger les routes avec l'ancrage
- Ajouter un fichier manifeste d'application Web avec Créer une application React
- Audit de l'accessibilité avec responsive-axe et eslint-plugin-jsx-a11y