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 permet de créer des interfaces utilisateur plus facile. Ce parcours de formation présente différents outils et API du que vous devriez envisager d'utiliser pour améliorer les performances la facilité d'utilisation de votre application.
Ce guide vous explique comment utiliser une application React. Tous les autres guides de cette section abordent des sujets permettant d'optimiser la vitesse l'accessibilité d'une application React.
En quoi est-ce utile ?
Il existe de nombreux contenus qui expliquent comment créer des applications rapides et fiables applications, mais peu d'entre elles montrent comment créer des applications React rapides et fiables applications. Ces guides abordent tout cela du point de vue d'une instance React. dans laquelle seules des bibliothèques, des API et des fonctionnalités l'écosystème React.
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 les ateliers de programmation de cette section se concentreront plutôt sur la création sites React accessibles. Pour cette raison, une connaissance de base de React est obligatoire.
Créer une application React
Create React App (CRA) est la le plus simple pour commencer à créer des applications React. Il fournit une configuration avec un certain nombre de fonctionnalités de base intégrées, y compris un système de compilation contenant un module bundler (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 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'élément intégré suivant montre la structure de répertoires et la page Web réelle d'un nouvel une application CRA amorcée.
CRA utilise plusieurs fichiers de configuration et scripts de compilation un processus de compilation webpack et Babel qui inclut une base Jest à des fins de test. Pour simplifier les choses ces fichiers sont masqués et inaccessibles tant que vous ne les avez pas éjectés de l'ARC. Il Évitez de les éjecter autant que possible, car cela implique de prendre en charge de ces fichiers de configuration en tant que 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 qui que vous devrez réellement modifier pour travailler sur votre application. La Documentation CRA explique cela en détail.
Étape suivante
Maintenant que vous savez comment créer une application Create React, découvrez comment pour améliorer les performances et l'accessibilité de votre application grâce à tous les guides 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