Partant avec React: un guide débutant & # x27;

React, une bibliothèque JavaScript qui est populaire dans l'industrie du développement, simplifie le processus de création d'une interface utilisateur interactive, et sa portée d'application couvre les pages Web, les terminaux mobiles et les plates-formes de bureau. De nombreuses entreprises du monde, y compris des géants tels que Netflix et Airbnb, utilisent React.

Ce guide vous emmènera pour commencer avec React rapidement et expliquer ses concepts principaux. Nous utiliserons l'outil Create React App pour créer rapidement un projet et créer progressivement une application React simple. Après l'étude, vous maîtriserez les bases de React et serez préparées à une étude plus approfondie.

Précautions

Avant d'apprendre réagir, il est préférable d'avoir les connaissances de base de HTML, CSS et JavaScript. Comprendre les gestionnaires de packages Node.js et NPM peut également aider à l'apprentissage.

Ce tutoriel nécessite d'installer le nœud et le NPM sur votre machine. Vous pouvez accéder à la page de téléchargement Node.js pour télécharger la version requise (NPM est regroupé avec Node). Alternativement, vous pouvez vous référer à notre tutoriel pour installer Node à l'aide de Version Manager.

points clés

• React est une bibliothèque JavaScript axée sur la construction d'interfaces utilisateur et est largement utilisée par des sociétés telles que Netflix et Airbnb.
• Avant de commencer à apprendre React, vous devez avoir les connaissances de base de HTML, CSS, JavaScript, Node.js et NPM.
• Les applications de réaction sont construites autour de composants réutilisables, qui peuvent être basés sur les classes ou basés sur les fonctions, qui deviennent de plus en plus populaires en raison de l'émergence de crochets.
• Le DOM virtuel de React améliore les performances en mettant efficacement à la mise à jour HTML DOM en fonction des modifications de l'état des composants de l'interface utilisateur.
• JSX est une extension de syntaxe utilisée dans React qui permet d'écrire du code de type HTML dans des fichiers JavaScript pour améliorer l'expérience et la lisibilité de développement.
Les composants
• React peuvent être stylisés directement à l'aide de styles en ligne ou de CSS externes.

Qu'est-ce que la réaction?

React est une bibliothèque JavaScript pour la construction de composants d'interface utilisateur. Contrairement aux cadres plus complets comme Angular ou Vue, React ne gère que les couches de vue, vous avez donc besoin d'autres bibliothèques pour gérer le routage, la gestion de l'État et plus encore. Ce guide se concentrera sur les fonctionnalités prêtes à l'emploi de React.

Les applications de réaction sont construites à l'aide de composants d'interface utilisateur réutilisables qui peuvent interagir entre eux. Les composants React peuvent être des composants basés sur la classe ou des composants dits fonctionnels. Les composants basés sur la classe sont définis à l'aide de la classe ES6, tandis que les composants de fonction sont des fonctions JavaScript de base. Ces fonctions sont généralement définies à l'aide des fonctions Arrow, mais le mot clé de la fonction peut également être utilisé. Un composant basé sur la classe implémentera une fonction de rendu qui renvoie certains JSX (une extension de React à JavaScript ordinaire pour créer des éléments React), tandis que le composant de fonction renverra directement JSX. Si vous n'avez jamais entendu parler de JSX, ne vous inquiétez pas, nous irons plus en détail plus tard.

Les composants de réaction peuvent également être divisés en composants avec état et composants sans état. Le travail d'un composant sans état consiste simplement à afficher les données qu'il reçoit du composant Parent React. S'il reçoit des événements ou des entrées, il peut simplement passer ces événements ou entrées à son composant parent à gérer.

En revanche, la composante avec état est responsable du maintien d'un certain état d'application. Cela peut impliquer d'obtenir des données provenant de sources externes ou de suivre si l'utilisateur est connecté. Les composants avec état peuvent mettre à jour leur statut en réponse aux événements et aux entrées.

Selon l'expérience, vous devez écrire autant que possible les composants apatrides. Ces composants sont plus faciles à réutiliser dans vos applications et autres projets.

Comprendre le Dom virtuel

Avant de commencer à coder, vous devez savoir que React utilise un DOM virtuel pour gérer le rendu de la page. Si vous connaissez JQuery, vous savez qu'il peut manipuler les pages Web directement via HTML DOM. Dans de nombreux cas, cette interaction directe a peu ou pas de problème. Cependant, pour certains cas, tels que l'exécution d'une application Web en temps réel hautement interactive, les performances peuvent être grandement affectées.

Pour résoudre ce problème, un DOM virtuel (représentation de la mémoire de Dom réel) a été inventé, qui est actuellement utilisé par de nombreux frameworks d'interface utilisateur modernes (y compris React). Contrairement à HTML DOM, Virtual DOM est plus facile à utiliser et peut gérer un grand nombre d'opérations en millisecondes sans affecter les performances de la page. React compare régulièrement DOM virtuel et HTML DOM. La différence est ensuite calculée et appliquée au DOM HTML pour la faire correspondre avec le DOM virtuel. De cette façon, React garantit que votre application se rend à 60 images stables par seconde, ce qui signifie que les utilisateurs ne ressentent presque aucun délai.

Démarrer un projet de réact vierge

Sur la base des conditions préalables, je suppose que vous avez configuré l'environnement de nœud et que la dernière version de NPM (ou fil facultatif) soit installée.

Ensuite, nous utiliserons l'application Create React pour créer notre première application React, un script utilitaire officiel pour créer une seule page React.

Installons-le maintenant:

<code>npm i -g create-react-app</code>

puis utilisez-le pour créer une nouvelle application React.

<code>create-react-app message-app</code>

Selon votre vitesse de connexion Internet, si c'est la première fois que vous exécutez la commande create-react-App, cela peut prendre un certain temps. Il existe de nombreux packages installés dans le processus qui sont nécessaires pour configurer un environnement de développement pratique, y compris les serveurs Web, les compilateurs et les outils de test.

Si vous ne souhaitez pas installer trop de packages à l'échelle mondiale, vous pouvez également utiliser NPX, qui vous permet de télécharger et d'exécuter le package sans l'installer:

<code>npx i -g create-react-app</code>

L'exécution de ces deux commandes devrait sortir quelque chose comme ce qui suit:

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

Une fois le processus de configuration du projet terminé, exécutez la commande suivante pour démarrer votre application React:

<code>cd message-app
npm start</code>

Vous devriez voir la sortie suivante:

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

Votre navigateur par défaut doit démarrer automatiquement, vous devriez voir un écran comme celui-ci:

Maintenant que nous avons confirmé que notre projet de réact d'introduction s'exécute sans erreurs, voyons ce qui se passe dans les coulisses. Vous pouvez ouvrir la application de message du dossier à l'aide de votre éditeur de code préféré. Commençons par le fichier package.json:

<code>npm i -g create-react-app</code>

Comme vous pouvez le voir, l'application Create React a installé plusieurs dépendances pour nous. Les trois premiers sont liés à la bibliothèque de tests React, qui (comme vous pouvez le deviner) nous permet de tester notre code React. Ensuite, nous avons React et React-Dom, qui est le package principal de toute application React et enfin React-Scripts, qui configure l'environnement de développement et démarre le serveur (vous venez de le voir).

Ensuite, il y a quatre scripts NPM pour automatiser les tâches répétitives:

• Démarrer le serveur de développement
• build Créer une version prête à la production de l'application
• Test Exécutez le test mentionné ci-dessus
• Eject exposera l'environnement de développement de l'application

La dernière commande mérite d'être expliquée en détail. L'outil Create React App fournit une distinction claire entre votre code réel et votre environnement de développement. Si vous exécutez NPM Exécuter Eject, l'application Create React cesse de cacher ce qu'elle fait dans les coulisses et jette tout dans le fichier package.json du projet. Bien que cela vous donne un contrôle plus granulaire sur les dépendances de votre application, je vous recommande de ne pas le faire, car vous devez gérer tout le code complexe utilisé dans vos projets de construction et de test. Si vous le souhaitez, vous pouvez utiliser Persurize-CRA pour configurer le processus de construction sans apparaître.

Créer l'application React prend également en charge Eslint (comme le montre la propriété EslintConfig) et est configuré à l'aide de règles React-App Eslint.

La propriété BrowserstList du fichier

package.json vous permet de spécifier une liste de navigateurs que l'application prendra en charge. Cette configuration est utilisée par des convertisseurs tels que PostCSS Tools et Babel.

L'une des fonctionnalités les plus cool de l'application Create React est qu'elle fournit un rechargement chaud hors de la boîte. Cela signifie que toutes les modifications que nous apportons au code entraîneront une actualisation automatique du navigateur. Les modifications du code JavaScript rechargeront la page, tandis que les modifications à CSS mettront à jour le DOM sans recharger.

Maintenant, arrêtons d'abord le serveur de développement en appuyant d'abord en appuyant sur ctrl c . Une fois le serveur arrêté, supprimez tout sauf les fichiers Serviceworker.js et setuptest.js dans le dossier SRC. Si vous êtes intéressé à comprendre le rôle des travailleurs de service, vous pouvez en savoir plus ici.

Autre, nous créerons tout le code à partir de zéro afin que vous puissiez tout comprendre dans le dossier SRC.

Introduction à la syntaxe JSX

REACT La documentation définit JSX comme une "extension grammaticale pour JavaScript", ce qui facilite l'écriture de composants React. Avec JSX, nous pouvons passer des structures HTML ou des éléments de réaction comme nous le faisons avec les valeurs JavaScript standard.

Ceci est un exemple simple:

<code>create-react-app message-app</code>

Faites attention à cette ligne const message = <h1>I'm a heading</h1>;. C'est JSX. Si vous essayez de l'exécuter dans un navigateur Web, cela vous donnera une erreur. Cependant, dans les applications React, JSX est interprété par un convertisseur (comme Babel) et rendu comme du code JavaScript que React peut comprendre.

Remarque: Vous pouvez en savoir plus sur JSX dans notre tutoriel "Débutant de JSX".

Dans le passé, les fichiers JSX réagissent utilisés pour utiliser l'extension de fichier .jsx. Maintenant, l'outil Create React App génère des fichiers React à l'aide de l'extension de fichier .js. Bien que l'extension de fichier .jsx soit toujours prise en charge, React Haigers recommande d'utiliser .js. Cependant, il existe également un groupe de développeurs réactifs adverses (moi y compris) qui préfèrent utiliser l'extension .jsx pour les raisons suivantes:

• Dans le code vs, Emmet peut être utilisé pour les fichiers .jsx hors de la boîte. Cependant, vous pouvez configurer VS Code pour traiter tous les fichiers .js comme javascriptRect pour permettre à Emmet de travailler sur ces fichiers.
• Le code JavaScript JavaScript et React standard ont des règles de peluche différentes.

Cependant, dans ce tutoriel, je suivrai ce que l'application Create React fournit et s'en tient à la fin du fichier .js.

"Hello, monde!"

Commençons par écrire du code. Dans le dossier SRC du message de message nouvellement créé, créez un fichier index.js et ajoutez le code suivant:

<code>npm i -g create-react-app</code>

utiliser

ou npm start à nouveau pour démarrer le serveur de développement. Votre navigateur doit afficher les éléments suivants: yarn start

Il s'agit de l'exemple de réaction "Hello World" le plus fondamental. Le fichier index.js est le répertoire racine du projet, où le composant React sera rendu. Permettez-moi d'expliquer comment fonctionne le code:

Ligne 1: Importez le package React pour gérer le traitement JSX.
Ligne 2: Importez le package Reactdom pour rendre le composant Root React.
Ligne 3: Appelez la fonction de rendu, passez:
• • : un élément JSX <h1>Hello World</h1>
  • : un conteneur HTML (l'élément JSX sera rendu ici). document.getElementById('root')

Le conteneur HTML est situé dans le fichier public / index.html. À la ligne 31, vous devriez voir

<div>. C'est ce qu'on appelle le nœud root Dom, car tout ce qu'il contient sera géré par le Dom virtuel React. <p> Bien que JSX ressemble beaucoup à HTML, il existe des différences clés. Par exemple, vous ne pouvez pas utiliser l'attribut de classe car il s'agit d'un mot-clé JavaScript. Utilisez plutôt ClassName à la place. De plus, des événements comme Onclick sont orthographiés ONClick dans JSX. Modifions maintenant notre code Hello World: </p> <pre class="brush:php;toolbar:false">&lt;code&gt;npm i -g create-react-app&lt;/code&gt;</pre> <p> J'ai déplacé mon code JSX dans une variable constante appelée élément. J'ai également remplacé la balise H1 par la balise DIV. Pour que JSX fonctionne, vous devez envelopper les éléments dans une balise parent. </p> <p> Regardez l'exemple suivant: </p> <pre class="brush:php;toolbar:false">&lt;code&gt;create-react-app message-app&lt;/code&gt;</pre> <p> Le code ci-dessus ne fonctionne pas. Vous recevrez une erreur de syntaxe indiquant que vous devez inclure des éléments JSX adjacents dans la balise fermée. Comme ceci: </p> <pre class="brush:php;toolbar:false">&lt;code&gt;npx i -g create-react-app&lt;/code&gt;</pre> <p> Comment calculer les expressions JavaScript dans JSX? Très simple. Utilisez simplement des accolades bouclées comme suit: </p> <pre class="brush:php;toolbar:false">&lt;code&gt;... Success! Created react-app at C:\Users\mike\projects\github\message-app Inside that directory, you can run several commands: yarn start Starts the development server. yarn build Bundles the app into static files for production. yarn test Starts the test runner. yarn eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd message-app yarn start Happy hacking!&lt;/code&gt;</pre> <p>… ou comme ceci: </p> <pre class="brush:php;toolbar:false">&lt;code&gt;cd message-app npm start&lt;/code&gt;</pre> <p> Mettez à jour votre code et confirmez que le navigateur affiche "Bonjour, Jane Doe". Essayez d'autres exemples, tels que <code> {5 2} <code>{5 2}. Maintenant que vous avez les bases de JSX, allons-y et créons un composant React.

Déclarer la composante réactive

L'exemple ci-dessus est un moyen facile de vous montrer comment fonctionne Reactdom.Render (). En règle générale, nous encapsulons toute la logique du projet dans un composant React et la passons à la fonction Reactdom.-Dender.

Dans le dossier SRC, créez un fichier nommé app.js et saisissez le code suivant:

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

Ici, nous créons un composant React en définissant une classe JavaScript, qui est une sous-classe de react. Nous définissons également une fonction de rendu qui renvoie un élément JSX. Vous pouvez mettre un autre code JSX dans la balise <div> <code><div>. Ensuite, mettez à jour src / index.js avec le code suivant pour voir les modifications réfléchies dans votre navigateur: <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-json&quot;&gt;{ &quot;name&quot;: &quot;message-app&quot;, &quot;version&quot;: &quot;0.1.0&quot;, &quot;private&quot;: true, &quot;dependencies&quot;: { &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;, &quot;@testing-library/react&quot;: &quot;^9.3.2&quot;, &quot;@testing-library/user-event&quot;: &quot;^7.1.2&quot;, &quot;react&quot;: &quot;^16.13.1&quot;, &quot;react-dom&quot;: &quot;^16.13.1&quot;, &quot;react-scripts&quot;: &quot;3.4.3&quot; }, &quot;scripts&quot;: { &quot;start&quot;: &quot;react-scripts start&quot;, &quot;build&quot;: &quot;react-scripts build&quot;, &quot;test&quot;: &quot;react-scripts test&quot;, &quot;eject&quot;: &quot;react-scripts eject&quot; }, &quot;eslintConfig&quot;: { &quot;extends&quot;: &quot;react-app&quot; }, &quot;browserslist&quot;: { &quot;production&quot;: [ &quot;&gt;0.2%&quot;, &quot;not dead&quot;, &quot;not op_mini all&quot; ], &quot;development&quot;: [ &quot;last 1 chrome version&quot;, &quot;last 1 firefox version&quot;, &quot;last 1 safari version&quot; ] } }&lt;/code&gt;</pre> <p> Tout d'abord, nous importons le composant de l'application. Ensuite, nous rendons l'application au format JSX comme suit: <code> <app></app> <code><app></app>. Ceci est nécessaire pour que JSX puisse le compiler dans un élément qui peut être poussé vers le DOM REACT. Après avoir enregistré les modifications, vérifiez votre navigateur pour vous assurer qu'il rend le message correct.

Ensuite, nous apprendrons à appliquer des styles.

Définissez le style des éléments JSX

Il existe différentes façons de styliser des composants de réaction. Dans ce tutoriel, nous présenterons deux méthodes:

1. JSX Style en ligne
2. feuille de style externe

Ce qui suit est un exemple de la façon dont nous implémentons le style en ligne JSX:

<code class="language-javascript">import React from 'react';

export default function App() {
  const message = <h1>I'm a heading</h1>;  //JSX FTW!
  return ( message );
}</code>

Les styles de réaction ressemblent beaucoup à des CSS ordinaires, mais il existe des différences clés. Par exemple, HeadersTyle est un objet littéral. Nous ne pouvons pas utiliser les demi-colons comme nous le faisons normalement. De plus, de nombreuses déclarations CSS ont été modifiées pour les rendre compatibles avec la syntaxe JavaScript. Par exemple, nous utilisons TextDecoration au lieu de la décoration de texte. Fondamentalement, la nomenclature Camel est utilisée pour toutes les clés CSS, à l'exception des préfixes des fournisseurs tels que WebKitTransition, qui doivent commencer par des lettres majuscules.

Nous pouvons également implémenter le style de cette manière:

<code>npm i -g create-react-app</code>

La deuxième méthode consiste à utiliser une feuille de style externe. Par défaut, les feuilles de styles CSS externes sont déjà prises en charge. Si vous souhaitez utiliser un préprocesseur comme SASS, consultez la documentation pour savoir comment la configurer.

Dans le dossier SRC, créez un fichier nommé app.css et saisissez le code suivant:

<code>create-react-app message-app</code>

Ajoutez l'instruction d'importation suivante en haut du fichier src / app.js:

<code>npx i -g create-react-app</code>

Après avoir enregistré, vous devriez voir un énorme changement dans la taille du contenu du texte sur votre navigateur. Vous pouvez également utiliser les cours CSS comme suit:

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

Mettre à jour src / app.js comme suit:

<code>cd message-app
npm start</code>

Nous ne pouvons pas utiliser l'attribut de classe de HTML car il s'agit d'un mot-clé JavaScript réservé. Au lieu de cela, nous utilisons ClassName. Voici la sortie que vous attendez:

Maintenant que vous avez appris à ajouter des styles à votre projet React, continuons à apprendre les composants de réaction apatrides et avec état.

Composants apatrides et avec état

Le composant sans état, également connu sous le nom de composant stupide, n'est qu'un composant qui affiche des informations. Il ne contient aucune logique pour les données de fonctionnement. Il peut recevoir des événements de l'utilisateur, puis les transmettre au conteneur parent pour le traitement.

Créez le fichier Message-View.js et copiez l'exemple de code suivant. Voici un exemple parfait d'un composant stupide (bien que techniquement, il ressemble plus à un composant statique):

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

Ensuite, utilisez le code suivant pour ajouter quelques styles de base à src / app.css:

<code class="language-json">{
  "name": "message-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}</code>

Enfin, modifiez src / app.js pour que le fichier entier ressemble à ceci:

<code class="language-javascript">import React from 'react';

export default function App() {
  const message = <h1>I'm a heading</h1>;  //JSX FTW!
  return ( message );
}</code>

Le code devrait être très facile à comprendre jusqu'à présent, car j'ai expliqué les concepts impliqués jusqu'à présent. Vérifiez maintenant votre navigateur et vous devriez obtenir les résultats suivants:

Nous avons mentionné plus tôt que React fournit à la fois des composants basés sur la classe et basés sur la fonction. Nous pouvons réécrire le message MessageView en utilisant la syntaxe de fonction comme suit:

<code class="language-javascript">import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));</code>

Notez que j'ai supprimé l'importation des composants car il n'est pas nécessaire dans la syntaxe de fonction. Ce style peut être déroutant au début, mais vous apprendrez bientôt que l'écriture de composants React est plus rapide.

De plus, avec l'émergence de crochets React, ce style d'écriture React Composants est devenu de plus en plus populaire.

transférer les données via les accessoires

Vous avez réussi à créer un composant React sans état. Cependant, il n'est pas complet, car il nécessite un travail supplémentaire pour s'intégrer correctement aux composants ou conteneurs avec état. Actuellement, MessageView affiche des données statiques. Nous devons le modifier afin qu'il puisse accepter les paramètres d'entrée. Nous utilisons des accessoires dits pour y parvenir - les données que nous passerons du composant parent.

Tout d'abord, modifiez le composant MessageView comme ceci:

<code>npm i -g create-react-app</code>

La principale chose à noter ici est comment nous définissons les variables de message. Nous l'avons attribué à this.props.message et nous le transformons à partir du composant parent d'État. Ensuite, dans notre JSX, nous pouvons référencer notre variable de message et le sortir sur la page.

Créons maintenant un composant parent pour le MessageView. Créez un nouveau fichier nommé message-list.js et ajoutez le code suivant:

<code>create-react-app message-app</code>

Ici, nous utilisons l'état pour stocker un objet contenant notre message. La magie de React est que lorsque l'objet d'état change, le composant sera rendu (et metra donc à jour l'interface utilisateur).

Ensuite, dans notre JSX, nous passons la propriété Message de l'objet d'état au composant MessageView.

La dernière étape consiste à mettre à jour notre composant d'application pour rendre un nouveau composant Messagelist Stateful au lieu du composant MessageView sans état:

<code>npx i -g create-react-app</code>

Après avoir enregistré les modifications, vérifiez votre navigateur pour afficher les résultats.

Prenez un moment pour vous assurer de comprendre ce qui se passe. Nous déclarons un objet d'état dans la composante Messagelist (avec état). La propriété du message de cet objet contient notre message. Dans notre fonction de rendu, nous pouvons transmettre ce message à nos composants enfants (sans état) utilisant des accessoires dits.

Dans le composant (sans état) MessageView, nous pouvons accéder au message en utilisant this.props.message. Nous pouvons ensuite transmettre cette valeur à notre JSX pour rendre à la page.

hein!

Vérification des accessoires

à mesure que l'application se développe et que les données sont passées dans les deux sens comme accessoires, il sera utile de vérifier que les composants reçoivent le type de données qu'ils attendent.

Heureusement, nous pouvons utiliser le package de types d'accessoires pour y parvenir. Pour voir rapidement son exemple réel, modifiez notre composant MessageView comme suit:

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

Si l'hélice du message est manquante, cela fera que votre application React signale une erreur. Si l'objet reçu par le composant n'est pas un objet, il entraînera également une erreur.

Vous pouvez essayer en modifiant l'état du composant parent comme ceci:

<code>cd message-app
npm start</code>

Retournez à votre navigateur et ouvrez la console. Vous devriez voir les documents documentés suivants dans la console:

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

Réutilisation des composants

Voyons maintenant comment afficher plusieurs messages à l'aide de l'instance MessageView. C'est là que React commence à flash car il facilite la réutilisation du code (vous verrez).

Tout d'abord, nous changeons State.Message pour le tableau et le renommer en messages. Nous utiliserons ensuite la fonction MAP de JavaScript pour générer plusieurs instances de composant MessageView, chacune correspondant à un message dans le tableau State.Messages.

Nous devons également remplir une valeur unique avec un attribut spécial appelé Key, tel que ID. React nécessite que cela puisse suivre les éléments de la liste ont été modifiés, ajoutés ou supprimés.

Mettez à jour le code Messagelist comme suit:

<code class="language-json">{
  "name": "message-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}</code>

Vérifiez votre navigateur pour voir les résultats:

Comme vous pouvez le voir, il est facile de définir des blocs de construction avec React pour créer une interface d'interface utilisateur puissante et complexe.

refactorisé pour utiliser les crochets React

Les crochets sont la dernière version de React, mais ils balayent le monde React. Autrement dit, ils permettent d'ajouter l'état (et d'autres fonctions) pour réagir les composants de la fonction.

Je terminerai ce tutoriel en refactorisant le composant MessageView en un composant de fonction, qui gère son état à l'aide de crochets React. Veuillez noter que ce n'est possible que lorsque vous utilisez React V16.8 et plus tard.

<code>npm i -g create-react-app</code>

Dans l'exemple ci-dessus, j'ai remplacé l'objet d'état par le crochet UseState React. Comme son nom l'indique, cela vous permet de gérer l'état des composants.

L'utilisation de crochets vous aidera à éviter le soi-disant forage des accessoires lorsque vous travaillez sur de grands projets. Le forage des accessoires vous permettra de transmettre des accessoires à plusieurs composants (qui, finalement, n'ont pas besoin de ces données), juste pour accéder à un composant profondément imbriqué.

Nous pouvons également convertir le composant MessageView en un composant de fonction:

<code>create-react-app message-app</code>

Notez comment nous recevons maintenant un accessoire de message dans le composant:

<code>npx i -g create-react-app</code>

Ceci utilise une technique appelée destruction d'objets, qui vous permet d'extraire des éléments individuels d'un tableau ou d'un objet et de les mettre en variables en utilisant une syntaxe abrégée.

Nous utilisons la même technique ici, en obtenant les valeurs dont nous avons besoin dans l'objet de message et en évitant d'ajouter un message à tout:

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

c'est tout!

Je n'ai pas l'intention d'introduire des crochets React davantage dans ce post, faites-vous simplement savoir qu'ils existent et qu'ils deviennent de plus en plus populaires dans la communauté React. Si vous voulez en savoir plus sur les crochets, lisez notre guide de démarrage pour réagir des crochets.

démo

Il s'agit d'une démonstration en direct que vous pouvez utiliser:

lien de démonstration de codepen

Apprentissage de l'enquête

Nous avons maintenant terminé ce guide d'introduction. Il existe de nombreux concepts de réaction que je ne couvre pas, tels que l'acquisition de données, la gestion des erreurs, le routage, le formulaire d'utilisation, le débogage, etc. La liste continue ...

La bonne nouvelle est que nous avons beaucoup de bon contenu React sur SitePoint Premium, ainsi que de nombreux grands articles sur notre blog. Je vous encourage à les vérifier et à construire quelque chose de génial.

FAQ sur le démarrage avec React

Quelles sont les conditions préalables à l'apprentissage réagi?

Avant de commencer à apprendre React, il est très important de maîtriser les connaissances JavaScript solides, car React est une bibliothèque JavaScript. Vous devriez être familier avec des concepts tels que les fonctionnalités ES6, les fermetures, la programmation asynchrone et ces mots clés. Les connaissances HTML et CSS sont également essentielles, car vous utiliserez JSX, une extension de syntaxe JavaScript similaire à HTML. Il est également avantageux de être familier avec Node.js et NPM (Node Package Manager) car ils sont couramment utilisés pour les scripts de gestion des packages et d'exécution dans React Development.

Comment mettre en place un environnement de développement pour React?

Pour configurer un environnement de développement pour React, vous devez d'abord installer Node.js et NPM. Une fois l'installation terminée, vous pouvez créer une nouvelle application React à l'aide de l'outil de ligne de commande Create React App. Il configure votre environnement de développement afin que vous puissiez utiliser les dernières fonctionnalités JavaScript, offrir une bonne expérience de développement et optimiser vos applications de production. Vous avez également besoin d'un éditeur de texte tel que Visual Studio Code et un navigateur Web pour tester votre application.

Qu'est-ce que JSX et pourquoi est-il important dans React?

JSX signifie JavaScript XML. Il s'agit d'une extension de syntaxe JavaScript développée par Facebook, nous permettant d'écrire HTML dans React. JSX facilite l'écriture et l'ajout de HTML dans React. Sans cela, votre code JavaScript sera difficile à lire et à écrire. Il aide également à rendre le code modulaire et plus facile à comprendre et à entretenir.

Quels sont les composants de réagir?

Les composants sont des blocs de construction pour toute application React. Un composant de React est un morceau de code réutilisable qui contrôle une partie de l'interface utilisateur. Chaque composant est indépendant et peut être combiné pour créer des UIS complexes. Les composants réagis sont généralement écrits en JSX et peuvent maintenir leur propre état et accessoires.

Quelle est la différence entre l'état et les accessoires dans React?

Dans React, State et les accessoires sont des objets JavaScript. Bien qu'ils détiennent tous deux des informations qui affectent la sortie du rendu, ils le font différemment en ce qui concerne les composants. Les accessoires (abréviation des propriétés) sont un moyen de passer les données des composants parents aux composants enfants. D'un autre côté, l'état est géré à l'intérieur du composant et peut être modifié à l'intérieur du composant.

Comment react gère-t-il les événements?

Les événements

React sont nommés à l'aide de Camelcase, pas de minuscules. Lorsque vous utilisez JSX, vous passez la fonction comme gestionnaire d'événements, pas une chaîne. Par exemple, l'événement HTML Click est écrit en onclick dans JSX. React a également un système d'événements synthétiques, ce qui signifie qu'il a son propre système d'événements, qui est entièrement compatible avec le système d'événements W3C.

Quelle est la signification de React Middle Key?

Les clés de React sont utilisées pour identifier l'élément DOM virtuel unique de leurs données de rendu de pilote correspondantes. Ils aident à réagir l'optimisation du rendu par boucle via des éléments DOM existants. La clé doit être un numéro ou une chaîne unique, et l'utilisation de touches en double peut casser votre application.

Quelle est l'API de contexte dans React?

L'API de contexte est une structure de composants fournie par React qui nous permet de partager des formes spécifiques de données à tous les niveaux de notre application. Son objectif est de résoudre le problème du forage des accessoires.

Qu'est-ce que Redux et qu'est-ce que cela a à voir avec React?

redux est un conteneur d'état prévisible conçu pour vous aider à rédiger des applications JavaScript qui s'exécutent de manière cohérente sur les clients, les serveurs et les environnements natifs et sont faciles à tester. Bien qu'il soit principalement utilisé comme outil de gestion de l'État pour React, vous pouvez l'utiliser avec n'importe quel autre cadre ou bibliothèque JavaScript.

Que sont les crochets en réaction?

Hooks est une nouvelle fonctionnalité de React 16.8 qui vous permet d'utiliser l'état et d'autres fonctionnalités de réaction sans classes d'écriture. Les crochets sont des fonctions qui vous permettent de «vous accrocher à» des fonctions d'état de réaction et de cycle de vie des composants de la fonction. Ils ne fonctionnent pas dans les classes - ils vous permettent d'utiliser React sans classes.

Veuillez noter que le contenu ci-dessus a réécrit et poli le texte d'origine, s'efforçant d'améliorer la lisibilité et la maîtrise sans modifier la signification d'origine. Le format d'image reste le même. Étant donné que les images réseau ne sont pas accessibles directement, le lien d'image reste le même.