Vous souhaitez 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 les différentes API et outils de l'écosystème que vous devriez envisager d'utiliser pour améliorer les performances et la facilité d'utilisation de votre application.
Ce guide vous explique comment vous lancer avec 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 expliquent comment créer des applications React rapides et fiables. Ces guides couvrent tout cela du point de vue d'une application React, où seules les bibliothèques, les API et les fonctionnalités propres à l'écosystème React sont mentionnées.
Qu'allez-vous apprendre ?
Les tutoriels de ce parcours de formation ne portent pas sur les éléments suivants :
- Utiliser React
- Fonctionnement de React
Bien que ces deux concepts soient abordés si nécessaire, tous les guides et ateliers de programmation de cette section se concentreront sur la création de sites React rapides et accessibles. Pour cette raison, des connaissances de base sur React sont requises.
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 outil de regroupement de modules (Webpack) et un transpilateur (Babel).
Dans un shell 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 avec les commandes suivantes :
cd new-app
npm start
L'intégration suivante montre la structure de répertoire et la page Web réelle d'une application CRA nouvellement démarrée.
CRA utilise plusieurs fichiers de configuration et scripts de compilation pour configurer un processus de compilation webpack et Babel qui inclut une configuration de base Jest pour les tests. Pour simplifier la tâche à l'utilisateur, ces fichiers sont masqués et ne sont pas accessibles tant que vous n'avez pas quitté CRA. Il est toujours préférable d'éviter l'éjection dans la mesure du possible, car cela signifie que vous devez gérer tous ces fichiers de configuration comme votre propre code source, ce qui peut devenir difficile.
La structure de répertoires d'une nouvelle application CRA ne contient que les fichiers que vous devez réellement modifier pour travailler sur votre application. La documentation de la CRA explique cela en détail.
Étape suivante
Maintenant que vous savez comment commencer à créer une application Create React App, découvrez comment améliorer les performances et l'accessibilité de votre application avec 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
- Préchargement dans Create React App avec Workbox
- Prérendre en charge les routes avec react-snap
- Ajouter un fichier manifeste d'application Web avec Create React App
- Audit de l'accessibilité avec react-axe et eslint-plugin-jsx-a11y