À retenir
- Créez des applications Web plus rapides et plus faciles à maintenir en utilisant la structure de composants réutilisables de React.
- Configurez efficacement un nouveau projet React en choisissant un outil de création comme Create React App ou le plus rapide Vite.
- Améliorez votre flux de travail de développement grâce à la communauté de soutien et aux vastes ressources d'apprentissage de React.
- Découvrez comment React rend les pages Web plus rapides en mettant à jour uniquement les parties nécessaires avec son DOM virtuel.
Avant que React ne gagne en popularité, le développement Web était florissant mais était confronté à des défis importants dans la création d'interfaces utilisateur interactives.
Il reposait principalement sur le rendu côté serveur, où chaque interaction de l'utilisateur, comme cliquer sur un lien ou un bouton, rechargeait la page entière à partir du serveur.jQuery a facilité ce processus en simplifiant la manipulation HTML et la gestion des événements. Cependant, à mesure que les applications se sont développées et que les ressources statiques sont devenues plus complexes, la maintenance du code lourd jQuery et de ses méthodes DOM spécifiques est devenue de plus en plus difficile. Les développeurs ont eu du mal à gérer l'état des applications et à créer des composants React réutilisables de manière cohérente pour chaque projet React.
Cette complexité croissante a créé le besoin d'une solution plus évolutive et organisée, une solution que React finirait par satisfaire avec son outil de construction, son architecture basée sur des composants, son fractionnement de code et sa gestion efficace de l'état.
Introduction à Réagir
Une bibliothèque JavaScript populaire qui prend son envol avec succès dans le développement Web en créant des interfaces utilisateur avec des composants React réutilisables que vous pouvez facilement importer dans le DOM React et agir sur les changements de comportement dans l'état de l'application.
React adopte une approche déclarative lors du développement d'une application avec une architecture basée sur des composants, en partant souvent d'un élément racine désigné. Cette bibliothèque open source utilise une combinaison d'éléments JSX et de code JavaScript pour créer des éléments réutilisés dans l'application.
Il permet de maintenir des applications complexes basées sur une interface utilisateur en utilisant le DOM virtuel et en optimisant les performances grâce au fractionnement du code. Le DOM virtuel permet aux applications de mettre à jour uniquement des modifications spécifiques plutôt que de recharger la page entière à chaque fois qu'une application monopage détecte une mise à jour, ce qui améliore considérablement les performances.
Une communauté importante et active au sein de l'écosystème React continue d'apporter des améliorations, d'accélérer le développement et d'encourager les passionnés de React à contribuer. React reste entièrement open source et largement accessible aux développeurs.
Avantages de React
React offre de nombreux atouts qui méritent d'être soulignés, et lorsque vous commencez à travailler avec lui, nous visons à vous guider à travers les fonctionnalités clés qui ont amélioré l'expérience du développeur.
Rendu plus rapide
React utilise un DOM virtuel, ce qui minimise l'interaction directe avec le DOM réel. Il met à jour uniquement les composants modifiés au lieu de recharger la page entière, ce qui entraîne rendu haute performance.
Débogage plus rapide
React propose des outils puissants comme Outils de développement React et le chargeur Babel qui permettent aux développeurs d'inspecter les hiérarchies, l'état et les accessoires des composants React en temps réel, ce qui débogage efficace et intuitif.
Composants réutilisables
L'architecture basée sur les composants de React permet aux développeurs créer des éléments d'interface utilisateur modulaires qui peut être réutilisé dans différentes parties d'une application, garantissant la cohérence, réduisant la duplication de code et rendant le code source plus facile à maintenir.
Utilisation du DOM virtuel
React maintient un DOM virtuel en mémoire, ce qui lui permet de suivre efficacement fichiers nécessaires et change et mettre à jour le DOM réel uniquement lorsque cela est nécessaire. Cela améliore les performances et la réactivité.
Courbe d'apprentissage facile
React a un syntaxe simple (en particulier avec JSX), et sa documentation claire et concise aide les développeurs à se mettre rapidement à niveau.
Demande d'une page unique (SPA)
React est idéal pour créer des SPA, où la navigation ne recharge pas la page entière. React est la solution idéale. met à jour dynamiquement le contenu, conduisant à des transitions plus rapides et à une expérience utilisateur plus fluide.
Séparation des préoccupations
React favorise un code propre en créant des applications qui séparent la logique, l'interface utilisateur et la gestion de l'état en composants bien structurés, ce qui rend l'application plus facile à développer, à maintenir et à faire évoluer.
Reliure de données
Utilisations de React liaison de données unidirectionnelle en mode développement, ce qui signifie que les données circulent dans une seule direction (du parent vers l'enfant). Cette approche simplifie le débogage et rend le comportement de l'application plus prévisible.
Soutien communautaire
React a un communauté mondiale massive, soutenu par Facebook et des contributeurs open source. Cela garantit un flux constant de tutoriels, de bibliothèques tierces, de résolutions de problèmes et de mises à jour.
Comment fonctionne React ?
L'architecture basée sur les composants de React met à jour efficacement le DOM React. Au lieu de manipuler directement le DOM à chaque changement d'état, React compare les modifications avec la version précédente et met à jour uniquement certaines parties du DOM. Cette mise à jour complexe du DOM est gérée efficacement par le serveur de développement webpack et React en arrière-plan lorsque les développeurs utilisent une approche déclarative pour définir l'état souhaité de l'interface utilisateur.
Concepts de base
- Architecture basée sur les composants:Les applications sont construites à l'aide de composants réutilisables et autonomes qui encapsulent à la fois les éléments de l'interface utilisateur et le comportement.
- DOM virtuel: React conserve une copie légère du DOM en mémoire, ce qui lui permet d'effectuer une réconciliation efficace avant de valider les modifications apportées au DOM du navigateur.
- Paradigme déclaratif:Au lieu de manipuler impérativement le DOM, les développeurs déclarent à quoi l'interface utilisateur doit ressembler en fonction de l'état actuel.
- Flux de données à sens unique:Les données circulent des composants parents vers les enfants via des accessoires, créant un flux de données prévisible qui rend les applications plus faciles à comprendre et à déboguer.
- Jsx:Une extension de syntaxe qui vous permet d'écrire du code de type HTML dans JavaScript, rendant la structure des composants plus intuitive.
Algorithme de réconciliation
L'algorithme de réconciliation de React met à jour efficacement le DOM via Comparaison des types d'éléments, identification par clé, et prend également en charge la génération de sites statiques.
L'approche de React en matière de rendu d'interface utilisateur crée une expérience de développement à la fois puissante et intuitive, en particulier en mode développement, où le code peut se recharger automatiquement, et en mode production, permettant aux développeurs de se concentrer sur l'apparence de leurs applications plutôt que sur les opérations DOM complexes nécessaires pour y parvenir, en suivant une structure qui prend en charge ce processus de développement.
Étapes pour créer une application React à partir de zéro
Structure et configuration du projet
| Catégorie | Exigences |
| Langues | JavaScript (ES6+), HTML, CSS |
| Environnement | Node.js, npm/Yarn, éditeur de code (VSCode recommandé) |
| Outils | Git, outils de développement du navigateur, terminal |
| Outils de construction | Webpack, Babel (inclus dans Create React App) |
| Système | N'importe quel système d'exploitation, 4 Go+ RAM, 1 Go d'espace disque libre |
| Recommandé | TypeScript, React DevTools, Jest |
Les connaissances essentielles sont Node.js, NPM et JavaScript. Tout le reste enrichit votre expérience de développement.
Vérification des prérequis
- Vérifier la version de Node.js
| nœud -v |
- Recommandé : v16.0.0 ou supérieur
- Vérifiez la version npm
| nœud -v |
- Recommandé : v8.0.0 ou supérieur
Utilisation de Create React App (CRA)
- Installez Node.js et npm (s'il n'est pas déjà installé)
- Télécharger depuis nodejs.org
Créer un nouveau projet React
| npx crcd my-react-app |
- Accédez au répertoire du projet
| cd ma-réaction-appli |
- Démarrer le serveur de développement
| NPM Commencer |
- Accédez à votre application
- Ouvrez le navigateur à l'adresse https://localhost:3000
Utilisation de Vite
Vite prend en charge l'actualisation rapide, JSX, Babel et d'autres fonctionnalités courantes, facilitées par le serveur de développement webpack prêt à l'emploi.
- Installez Node.js et npm (s'il n'est pas déjà installé)
- Télécharger depuis nodejs.org
- Créer un nouveau projet Vite
| npm create vite@latest my-vite-app — –template cd my-vite-app |
- Accédez au répertoire du projet
| cd mon-vite-appli |
- Installer les dépendances
| NPM installer |
- Démarrer le serveur de développement
| NPM courir dev |
- Accédez à votre application
- Ouvrez le navigateur à l'adresse https://localhost:5173
Vite offre un démarrage et un remplacement de module à chaud nettement plus rapides par rapport à CRA et est souvent complété par le serveur de développement webpack, ce qui le rend de plus en plus populaire pour les nouveaux projets React où vous devez généralement importer react.
Créer un nouveau projet React avec un outil de build
| Approche | Command | Fonctions |
| Créer une application React | npx créer-réagir-app mon-application | Aucune configuration, inclut webpack, Babel, ESLint |
| Vite | npm create vite@latest mon-application –template react | Serveur de développement plus rapide, build optimisé |
| Next.js | npx create-next-app@latest mon-application | Rendu côté serveur, routage, routes API |
| Remix | npx create-remix@latest mon-application | Composants du serveur, routage imbriqué, limites d'erreur |
| Gatsby | npm init gatsby mon-application | Génération de sites statiques, couche de données GraphQL |
Après avoir exécuté la commande de configuration pour créer une nouvelle application, vous pouvez commencer à créer votre projet React.
- Accéder au projet : cd my-app
- Installer les dépendances : npm install
- Démarrer le serveur de développement : npm start ou npm run dev
Les fichiers de configuration Webpack vous permettent de définir comment Webpack doit traiter les fichiers de votre application. L'outil de build gère les fichiers de configuration Webpack pour la transpilation, le regroupement et l'optimisation. Vous pouvez ainsi vous concentrer sur l'écriture de code React.
Créer une application React simple
Dans cet exemple, nous allons créer un nouveau projet d'application React à partir de zéro qui comprend un composant d'application conçu pour démontrer les concepts clés de React tels que gestion de l'état, gestion des événementset stockage local, en suivant une structure de dossiers claire. C'est un exemple très simple, mais pratique, qui peut servir de base à des applications React plus avancées.
Étape 1 : Initialiser une application React
Si vous n'avez pas encore configuré une application React à l'aide de l'interface de ligne de commande, vous pouvez le faire à l'aide de create-react-app en exécutant la commande suivante :
Ouvrez votre terminal et exécutez :
| npx créer-réagir-app application de compteur de base cd application de compteur de base |
Structure du dossier
| application-de-compteur-de-base/ ├── node_modules/ # Modules Node.js (générés automatiquement par npm) ├── public/ # Fichiers publics (index.html, etc.) │ ├── index.html # Fichier HTML principal │ └── ... ├── src/ # Fichiers sources (le code de votre application) │ ├── App.js # Composant principal de l'application │ ├── Application.css # Style pour l'application │ ├── index.js # Point d'entrée React (rend le composant App) │ └── ... ├── .gitignore # Git ignore le fichier ├── package.json # Métadonnées et dépendances du projet ├── package-lock.json # Fichier de verrouillage des dépendances (généré automatiquement) └── README.md # Documentation du projet (facultatif) |
Étape 2 : Créer un composant de compteur
Créez un composant de compteur simple qui permet aux utilisateurs d'incrémenter et de décrémenter une valeur via le rendu des composants React.
App.js: Le fichier principal de l'application.
| // src/App.js importer Réagir, { useState } à partir de "réagir"; importer « ./App.css »; fonction Application () { const [count, setCount] = useState(0); const incrément = () => setCount(count + 1); const décrémenter = () => setCount(compte – 1); retourner ( <div nom de classe="App"> <h1>Exemple de compteur de base</h1> <p>Nombre actuel : {count}</p> <bouton (dans la fenêtre de contrôle qui apparaît maintenant) onClick={incrément}>Incrément</bouton (dans la fenêtre de contrôle qui apparaît maintenant)> <bouton (dans la fenêtre de contrôle qui apparaît maintenant) onClick={décrémenter}>Décrémenter</bouton (dans la fenêtre de contrôle qui apparaît maintenant)> </div> ); } |
exporter l'application par défaut ;
Étape 3 : CSS de base pour le style
Ajoutez quelques styles de base pour centrer le contenu et styliser les boutons.
App.css: Le fichier CSS.
| /* src/App.css */ .Application { text-align: centre; marge-haut: 50px; } h1 { taille de police: 2rem; couleur: #333; } bouton (dans la fenêtre de contrôle qui apparaît maintenant) { rembourrage: 10px 20px; marge: 10px; taille de police: 1rem; curseur: pointeur; background-color: #007bff; couleur: blanc; frontière: rien; rayon de bordure: 5px; } bouton (dans la fenêtre de contrôle qui apparaît maintenant):hover { background-color: # 0056b3; } |
Il s'agit de la configuration standard de package.json que create-react-app génère automatiquement, personnalisée pour correspondre au nom du projet, basic-counter-app.
package.json
| { "Nom": « application de compteur de base », "version": "0.1.0", "privé": oui, "dépendances": { « @testing-library/jest-dom » : "^5.17.0", « @testing-library/react » : "^13.4.0", « @testing-library/user-event » : "^13.5.0", "réagir": "^18.2.0", « réaction-dom » : "^18.2.0", « scripts de réaction » : "5.0.1", « web-vitals » : "^2.1.0" }, "scripts": { "commencer": « Démarrage des scripts React », "construire": « build de scripts react », "test": « test de scripts React », "éjecter": « éjection des scripts react » }, « eslintConfig » : { « s'étend » : [ « react-app », « React-app/jest » ] }, « liste des navigateurs » : { "production": [ « > 0.2 % », « pas mort », « pas du tout op_mini » ], "développement": [ « dernière version de Chrome », « dernière version de Firefox », « dernière version safari » ] } } |
Étape 4 : Exécutez l'application
Une fois les fichiers créés, exécutez l'application à partir de zéro avec la commande suivante :
| NPM Commencer |
Cela lancera l'application React sur votre navigateur, où vous verrez un compteur simple avec des boutons « Incrémenter » et « Décrémenter ».
Exécution de l'application avec un serveur de développement
Un serveur de développement crée un environnement local optimisé pour le développement React, le rendant adapté aux applications Web et natives. en compilant votre code à la volée, en le diffusant dans votre navigateur et en fournissant des fonctionnalités telles que le remplacement de module à chaud.
Remplacement du module à chaud (HMR) : Cette fonctionnalité vous permet de voir instantanément les modifications apportées aux composants dans votre navigateur sans recharger complètement la page, préservant ainsi l'état de l'application.
Créer une application React (CRA) : Démarrez le serveur de développement à l'aide de la commande npm start dans le répertoire de votre projet, en utilisant le serveur de développement webpack. Cela lance généralement le serveur webpack-dev à l'adresse https://localhost:3000.
Des vies:
Démarrez le serveur de développement avec la commande npm run dev. Vite propose un serveur de développement plus rapide, généralement accessible à l'adresse https://localhost:5173.
Processus de construction : CRA et Vite déclenchent tous deux un processus de construction qui :
Transforme la syntaxe JSX en JavaScript standard.
Convertit les fonctionnalités JavaScript modernes en code compatible avec le navigateur avec prise en charge intégrée.
Surveillance des fichiers : Le serveur de développement surveille vos fichiers de projet pour détecter toute modification que vous apportez.
Connexion WebSocket : Il établit une connexion WebSocket avec votre navigateur.
Mises à jour instantanées: Lorsque vous enregistrez un fichier, le serveur envoie immédiatement les mises à jour à votre navigateur.
Amélioration de l’efficacité du développement : Cette boucle de rétroaction continue accélère considérablement le développement par rapport aux actualisations manuelles des pages après chaque modification du code.
Rendu côté client
Le rendu côté client consiste à générer du code HTML et à afficher une page web entièrement dans le navigateur du client à l'aide de JavaScript. Lorsque le navigateur télécharge le code JavaScript et l'exécute pour afficher la page web, on parle de rendu côté client. Le processus commence par la visite d'un site web par un utilisateur, et le serveur envoie les fichiers JavaScript nécessaires. Le navigateur exécute ces scripts et génère le contenu HTML de manière dynamique. Les données du serveur (souvent via des API) sont récupérées de manière asynchrone.
Avantages sociaux
- Expérience utilisateur plus rapide:Après le chargement initial, les transitions de page suivantes peuvent être très rapides puisque seules les données et non la page complète doivent être récupérées à partir du serveur.
- Interactivité riche: CSR est idéal pour les applications monopage (SPA) car il permet des interfaces utilisateur hautement interactives et dynamiques sans rechargement de page.
Rendu côté serveur
Le serveur génère le contenu HTML et l'envoie au navigateur. Une fois la page chargée, JavaScript prend le relais, permettant ainsi des fonctionnalités dynamiques.
Avantages sociaux
- Chargement initial plus rapide:Étant donné que le serveur pré-rend la page, l'utilisateur voit le contenu plus rapidement par rapport au CSR, car le HTML est prêt à être affiché immédiatement.
- Avantages SEO:Les moteurs de recherche peuvent facilement indexer le contenu car il est rendu côté serveur, ce qui fait de SSR un bon choix pour les sites Web à forte intensité de référencement.
- Idéal pour les pages riches en contenu:SSR est bénéfique pour les pages avec beaucoup de contenu statique, comme les blogs ou les sites d'actualités.
Lors de l'examen de différentes stratégies de rendu, si l'objectif du projet est davantage axé sur le référencement et un temps de chargement initial plus rapide, le fractionnement du code et le SSR doivent être envisagés pour un déploiement sur un serveur de production, en suivant une structure qui optimise les temps de chargement. alors que le rendu côté client, contrairement à d'autres frameworks, convient aux interfaces utilisateur dynamiques et interactives, aux côtés d'autres outils.
Déploiement d'une application React
Une fois que vous avez créé votre application React et testé minutieusement ses fonctionnalités, l'étape finale et cruciale est le déploiement.
Déployer une application React signifie la rendre accessible aux utilisateurs en l'hébergeant sur un serveur ou une plateforme cloud. Comprendre le processus de déploiement garantit le bon fonctionnement de votre application, son chargement rapide et son accessibilité sur différents appareils et réseaux.
Dans cette section, nous allons parcourir les étapes essentielles et les meilleures pratiques pour déployer efficacement une application React à l'aide de la commande suivante via certaines des plates-formes les plus couramment utilisées dans le monde.
Pages GitHub :
- Installer gh-pages : Exécutez npm install gh-pages –save-dev ou yarn add gh-pages –dev dans votre projet.
Ajouter un script de déploiement : Ouvrez votre fichier package.json et ajoutez un script de déploiement sous la section scripts :
JSON
| "Scripts": { // ... autres scripts "déployer": « gh-pages -d build » } |
- Construire: Exécutez npm run build ou yarn build.
- Déployer: Exécutez npm run deploy ou yarn deploy. Cela crée une branche gh-pages contenant vos fichiers de build.
- Paramètres des pages GitHub : Dans votre dépôt GitHub, accédez à « Paramètres » -> « Pages ». Sous « Source », sélectionnez la branche « gh-pages » et cliquez sur « Enregistrer ». Votre site sera en ligne à l'adresse https:// .github.io/ .
Netlifier :
Il s’agit de la méthode la plus simple pour un déploiement rapide grâce à la méthode glisser-déposer.
- Construire localement : Exécutez npm run build ou yarn build dans votre projet React pour générer le dossier de build.
- Glisser déposer: Accédez à votre tableau de bord Netlify, recherchez votre site (ou créez-en un nouveau) et faites simplement glisser et déposez l'intégralité du dossier de construction sur la zone désignée.
- Site en direct : Netlify traitera les fichiers et votre site sera en ligne sur une URL fournie par Netlify (que vous pourrez personnaliser ultérieurement).
Conclusion
Félicitations, vous avez réussi avec succès le test de débutant !
Vous avez créé avec succès votre première application React. Nous avons appris les concepts fondamentaux de React tout en créant un composant de compteur pratique. Nous avons également exploré différentes méthodes de configuration et acquis un aperçu des stratégies de rendu et des options de déploiement.
L'architecture basée sur les composants que vous avez expérimentée jusqu'à présent dans cet article constitue une base solide pour comprendre le processus de développement d'applications de plus en plus complexes. Au fil de votre parcours avec React, vous découvrirez comment ces principes fondamentaux s'adaptent avec élégance pour prendre en charge des fonctionnalités plus avancées et des projets de plus grande envergure.
Vous cherchez à créer des applications rapides, performantes et engageantes ? Visitez Angular Minds pour embaucher des développeurs React Nous proposons des solutions évolutives avec une livraison garantie dans les délais. Améliorez votre processus de développement dès aujourd'hui ! Découvrez-les !
