React introduction, Part 2
Bienvenue à notre profil React, où nous vous apprendrons les bases de cette technologie, puis nous écrirons un meilleur Code et créerons une meilleure interface utilisateur. Dans l’article précédent, nous avons également discuté de la façon de créer un composant React en tant que fonction simple. Une maxime que j’ai soulignée à maintes reprises est que « le composant React est une fonction simple qui prend un ensemble d’attributs (prop) et génère du code HTML ». La dernière fois que nous avons discuté de React, nous avons finalement rencontré la question suivante: si un composant est une fonction si simple, comment pouvons – nous faire quelque chose d’utile? OK, aujourd’hui nous allons parler de la partie dynamique de React: comment faire réagir les composants aux événements de l’utilisateur.
Mise en place de l’environnement la première partie de ce tutoriel contient quelques théories, mais n’inclut aucun exemple, je m’en excuse; Je pense que la meilleure façon d’apprendre est de le faire, alors résolvons ce problème! À partir de maintenant, tout ce que j’enseigne sera basé sur un exemple que nous allons étudier, donc commençons par définir l’environnement que nous allons utiliser. Je pense que vous avez un site WordPress disponible, ainsi que des outils de développement et des noeuds NPM. De plus, dans cet article, j’ai expliqué comment créer une installation WordPress locale en utilisant lando. La documentation NPM contient toutes les informations nécessaires pour installer Node et NPM.
Tout d’abord, nous créons un plugin wordpress simple avec des composants React. Pour ce faire, créez un dossier appelé React example dans WP content \/ plugins et saisissez le fichier React example. Php contenant: <?php /** * Plugin Name: React Example * Description: Example. * Version: 1.0.0 */ namespace React_Example; defined( 'ABSPATH' ) or die(); function add_page() { add_menu_page( 'React Example', 'React Example', 'read', 'react-example', function () { echo '
‘; } ); } Ajouter _ action (« admin menu», « namespace page»); Fonction enqueue _ scripts () {$screen = get Current Screen (); if (‘Top Level page React example’! = $screen – > ID) {return;} $ Dir = unteilingslahit (plugin _ Dir path (File u u)) $ URL = untrailingslahit (plugin _ Dir URL (File u u));
Si (! File _ exists (\
Nous avons un exemple de notre réaction sur une page vide. Ce n’est pas surprenant, car nous n’avons rien implémenté en javascript. Comme nous l’avons vu dans notre dernier article sur la façon d’ajouter des boutons à Gutenberg, vous devez exécuter la commande suivante dans le terminal (dans le dossier plug – in que nous créons): NPM init NPM install – – Save Dev @ WordPress \/ scripts si vous voulez être en mesure d’écrire des composants REACT et transfile Javascript, suivez simplement les instructions à l’écran. N’oubliez pas de mettre à jour vos fichiers de paquets. Json, afin qu’il contienne tous les scripts pertinents pour la requête @ WordPress \/ scripts.
Enfin, créez un dossier SRC en utilisant le fichier index suivant. Js: \/ \/ Import Dependencies Import {render} \/ \/ \/ from \
Compteur de glace qui permet d’augmenter ou de diminuer la valeur d’un en utilisant les boutons + et – respectivement. Je sais que c’est très simple, mais j’espère que cela vous aidera à comprendre la différence entre le modèle de données et l’interface utilisateur et vous guidera dans la mise en oeuvre des composants dynamiques. Une meilleure organisation du Code commence par une meilleure organisation du Code. L’exemple d’aujourd’hui est très simple et vous voudrez peut – être sauter cette étape, mais je pense qu’il est utile de l’organiser dès le début.
Dans SRC, créez un nouveau dossier de composants qui contiendra tous les composants utilisés par notre application. Puisque l’exemple d’aujourd’hui n’a qu’un seul compteur de composants, tout ce que nous avons à faire est de créer un compteur de fichiers. Js: Export Function Counter () = >
Comptoir ); Comme vous pouvez le voir, il n’exporte que les capacités de rendu des composants. Donc, modifiez src \/ index. Par conséquent, au lieu de rendre notre exemple helloworld, importez à partir de « @ WordPress \/ ELEMENT » et utilisez le nouveau composant Counter: \/ \/ importez les dépendances pour importer {render}; Import {counters} from » Composant \/ compteur ‘\/ Dom Const wrapper = le composant de rendu dans le document. Getelementbyid (‘React example wrapper’); Rendu 
, Emballage); C’est tout!
Mise en oeuvre de la composante compteur l’objectif d’aujourd’hui est de mettre en oeuvre une composante qui suit la valeur du compteur. Nous pouvons augmenter ou diminuer la valeur du compteur en cliquant sur plusieurs boutons. Cela signifie que notre composant doit avoir trois choses: un bouton d’élément a qui affiche la valeur courante + un bouton d’augmentation de la valeur a – la réduction de la valeur la mise en oeuvre de ce composant est très simple: Export Const Counter = ({value}) = > 
Compteur:
{valeur}
Votre intuition vous a dit que la valeur du compteur est l’un des attributs dont il a besoin. Nous ne savons pas d’où vient cette valeur (et nous nous en fichons), mais nous savons que nos composants recevront cette valeur. Vous savez également que le composant compteur doit être capable de modifier cette valeur d’une manière ou d’une autre. En d’autres termes, le composant doit être tel que lorsque l’utilisateur clique sur + ou -, la valeur est mise à jour.
Si vous examinez attentivement cette instruction, vous vous rendrez bientôt compte que le composant compteur a besoin non seulement d’une valeur (type Number), mais aussi de deux objets de type fonction supplémentaires: l’un pour augmenter la valeur et l’autre pour diminuer la valeur. En d’autres termes, le compteur nécessite trois éléments de scène différents: valeur: est un nombre et la valeur du compteur (duh!) Onincrease: est une fonction qui augmente la valeur du compteur onderease au moment de l’appel: est une autre fonction qui réduit la valeur du compteur au moment de l’appel si nous supposons que le composant fournira ces trois objets de scène, alors le composant lui – même deviendra très simple:
Export constant Counter = ({value, onincrease, onderease}) = > Compteur:
{valeur}
Les compteurs ne sont pas mis à jour dans l’interface utilisateur, mais semblent fonctionner correctement dans la console… C’est marrant, non? Il semble que chaque fois qu’un utilisateur clique sur un bouton, la valeur est mise à jour correctement, mais le composant n’est jamais mis à jour. Si vous voulez rendre un composant, vous devez appeler sa fonction pure avec les accessoires que vous voulez. Lorsque la propriété change, il est nécessaire d’appeler à nouveau la fonction avec la nouvelle valeur pour générer un nouveau HTML. Par conséquent, si nous voulons que l’interface utilisateur affiche la dernière valeur, nous devons rendre le composant manuellement chaque fois que nous mettons à jour la valeur: \/ \/ importer la dépendance Import {render} à partir de \