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 au sein de l'écosystème, que vous devez 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 portent sur l'optimisation de la vitesse ou de 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 eux 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 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 détaillé de React
Nous aborderons ces deux concepts si nécessaire, mais tous les guides et ateliers de programmation de cette section seront consacrés à la création de sites React rapides et accessibles. Pour cette raison, des connaissances de base de React sont requises.
Créer une application React
La création d'une application React (CRA) est le moyen le plus simple pour commencer à créer des applications React. Il fournit une configuration par défaut avec un certain nombre de fonctionnalités essentielles, y compris un système de compilation contenant un bundler de modules (webpack) et un transpilateur (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 réelle d'une application CRA nouvellement démarrée.
L'ARC utilise plusieurs fichiers de configuration et scripts de compilation pour configurer un webpack et un processus de compilation Babel qui inclut une configuration Jest de base à des fins de test. Pour simplifier les choses pour l'utilisateur, ces fichiers sont masqués et ne sont pas accessibles tant que vous ne les avez pas exclu de l'ARA. Il est toujours préférable d'éviter l'exclusion dans la mesure du possible, car cela implique d'utiliser tous ces fichiers de configuration comme code source, ce qui peut s'avérer difficile à gérer.
La structure de répertoires d'une nouvelle application CRA ne contient que les fichiers que vous devez modifier pour fonctionner sur votre application. La documentation de la CRA explique ce point en détail.
Étape suivante
Maintenant que vous savez comment créer une application React, découvrez comment améliorer les performances et l'accessibilité de votre application grâce à tous les guides de ce parcours de formation:
- Scindation du code avec React.lazy et Suspense
- Virtualiser de grandes listes avec la fenêtre de réaction
- Mise en cache dans la fenêtre "Créer une application React avec Workbox"
- Prérendu des routes avec réaction-snap
- Ajouter un fichier manifeste d'application Web avec Créer une application React
- Audit de l'accessibilité avec réactif-axe et eslint-plugin-jsx-a11y