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'UI. Ce parcours de formation présente différentes API et différents 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 créer une application React. Tous les autres guides de cette section abordent des 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 eux montrent comment créer des applications React rapides et fiables. Ces guides couvrent tous ces aspects 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 se concentrent pas sur les points suivants :
- Utiliser React
- Fonctionnement de React en arrière-plan
Bien que ces deux concepts soient abordés si nécessaire, tous les guides et ateliers de programmation de cette section se concentrent sur la création de sites React rapides et accessibles. C'est pourquoi une connaissance de base de React est requise.
Créer une appli 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 essentielles intégrées, y compris un système de compilation contenant un bundler de modules (webpack) et un transpileur (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 à 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 nouvellement 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 n'avez pas éjecté l'application de CRA. Il est toujours préférable d'éviter l'éjection dans la mesure du possible, car cela signifie que vous devez intégrer tous ces fichiers de configuration à 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 travailler sur votre application. La documentation de CRA explique cela en détail.
Étape suivante
Maintenant que vous savez comment créer une application React, découvrez comment améliorer ses performances et son accessibilité grâce à tous les guides de ce parcours de formation :