React

La gestion de l’état dans vos applications React n’est pas aussi simple que l’utilisation de useState ou useReducer. Non seulement il existe de nombreux types d’états différents, mais il y a souvent des dizaines de façons de gérer chaque type. Laquelle choisir ? Dans ce guide, nous allons découvrir les différents types d’état dans vos applications React dont vous n’avez peut-être pas conscience, ainsi que la façon de les gérer de la manière la plus efficace. Les quatre types d’états React à gérer Lorsque nous parlons d’état dans nos applications, il est important d’être clair sur les types d’état qui comptent réellement. Il existe quatre principaux types d’état que vous devez gérer correctement dans vos applications React : État local État global État du serveur État de l’URL Nous allons couvrir chacun d’entre eux en détail : État local (UI) – L’état local est constitué de données que nous gérons dans l’un ou l’autre des composants. L’état local est le plus souvent géré dans React à l’aide du hook useState. Par exemple, l’état local serait nécessaire pour afficher ou masquer un composant modal ou pour suivre les valeurs d’un composant de formulaire, comme la soumission du formulaire, lorsque le formulaire est désactivé et les valeurs des entrées d’un formulaire. État global (UI) – L’état global est constitué des données que nous gérons sur plusieurs composants. L’état global est nécessaire lorsque nous voulons obtenir et mettre à jour des données n’importe où dans notre application, ou du moins dans plusieurs composants. Un exemple courant d’état global est l’état de l’utilisateur authentifié. Si un utilisateur est connecté à notre application, il est nécessaire d’obtenir et de modifier ses données dans toute l’application. Parfois, un état que nous pensons devoir être local peut devenir global. État du serveur – Données provenant d’un serveur externe qui doivent être intégrées à l’état de notre interface utilisateur. L’état du serveur est un concept simple, mais il peut être difficile à gérer parallèlement à tous les états locaux et globaux de l’interface utilisateur. Plusieurs éléments d’état doivent être gérés chaque fois que vous récupérez ou mettez à jour des données provenant d’un serveur externe, notamment l’état de chargement et d’erreur. Heureusement, il existe des outils tels que SWR et React Query qui facilitent la gestion de l’état du serveur. État de l’URL – Données qui existent sur nos URL, y compris le nom du chemin et les paramètres de la requête. L’état de l’URL est souvent absent en tant que catégorie d’état, mais c’est une catégorie importante. Dans de nombreux cas, beaucoup de parties importantes de notre application dépendent de l’accès à l’état de l’URL. Essayez d’imaginer la construction d’un blog sans pouvoir récupérer un article à partir de son slug ou de son id qui se trouve dans l’URL ! Il existe sans aucun doute d’autres éléments d’état que nous pourrions identifier, mais ce sont les principales catégories sur lesquelles il convient de se concentrer pour la plupart des applications que vous construisez. Comment gérer l’état local dans React L’état local est peut-être le type d’état le plus facile à gérer dans React, étant donné qu’il existe de nombreux outils intégrés à la bibliothèque React de base pour le gérer. useState est le premier outil que vous devriez utiliser pour gérer l’état de vos composants. Il peut accepter toute valeur de données valide, y compris les valeurs primitives et les valeurs d’objet. De plus, sa fonction setter peut être transmise à d’autres composants en tant que fonction de rappel (sans nécessiter d’optimisations comme useCallback). import { useState } de « react » ; function Layout() { const [isSidebarOpen, setSidebarOpen] = useState(false) ; return ( <> setSidebarOpen(false)} /> {/* … */} ) ; } useReducer est une autre option qui peut être utilisée pour l’état local ou global. Elle est similaire en de nombreux points à useState, mais au lieu d’un état initial, elle accepte un réducteur. L’avantage de useReducer est qu’il fournit un moyen intégré d’effectuer un certain nombre d’opérations d’état différentes avec l’aide de la fonction reducer, ce qui le rend globalement plus dynamique que useState. Vous pouvez voir l’avantage de useReducer par rapport à useState dans cet exemple de suivi des votes. Tout ce que nous avons à faire pour mettre à jour l’état est de passer à la fonction de rappel dispatch une chaîne (qui est ensuite passée au reducer) au lieu du nouvel état lui-même. const initialState = { votes : 0 } ; function reducer(state, action) { switch (action.type) { cas ‘upvote’ : return {votes : state.votes + 1} ; cas ‘downvote’ : retourne {votes : state.votes – 1} ; par défaut : lancer une nouvelle erreur() ; } } function VoteCounter() { const [state, dispatch] = useReducer(reducer, initialState) ; retour ( <> Votes actuels : {Etat.votes} dispatch({type : ‘upvote’})}>Upvote envoi({type : ‘downvote’})}>Downvote ) ; } Comment gérer l’état global dans React Lorsque vous tentez de gérer l’état de plusieurs composants, les choses se compliquent un peu. Vous atteindrez un point dans votre application où des modèles comme « lever l’état vers le haut » et passer des callbacks vers le bas pour mettre à jour votre état à partir des composants conduisent à beaucoup, beaucoup de props. Que faites-vous si vous voulez mettre à jour l’état d’un composant depuis n’importe quel endroit de votre application ? Vous le transformez en état global. Pour le gérer, cependant, vous devez opter pour une solution tierce. De nombreux développeurs ont tendance à utiliser les fonctionnalités intégrées de React, comme l’API Contexte, pour gérer leur état. Soyons clairs : l’API Contexte n’est pas une solution de gestion d’état. Elle permet d’éviter des problèmes comme le forage de props (création d’un tas de props dans des composants qui n’en ont pas besoin), mais elle n’est utile que pour lire l’état, pas pour le mettre à jour. La raison de ne pas utiliser Context pour la gestion globale de l’état réside dans la façon dont il fonctionne. Le comportement par défaut de Context est de rendre à nouveau tous … Lire la suite

React.js est une bibliothèque d’interface utilisateur open-source basée sur JavaScript. Elle est extrêmement populaire pour le développement d’applications web et mobiles. React suit le principe de l’architecture à base de composants. Un composant dans React est un morceau de code isolé et réutilisable. Les composants peuvent être de deux types : les composants de classe et les composants fonctionnels. Avant la version 16.8 de React, les développeurs pouvaient gérer l’état et les autres fonctionnalités de React uniquement à l’aide de composants de classe. Mais avec la version 16.8, React a introduit un nouveau pattern appelé Hooks. Avec React Hooks, nous pouvons utiliser l’état, et d’autres fonctionnalités React, dans un composant fonctionnel. Cela permet aux développeurs de faire de la programmation fonctionnelle dans React. Dans cet article, nous allons apprendre les principes fondamentaux de React Hooks. La motivation derrière l’écriture de cet article est d’encourager les débutants à penser que  » React Hooks est facile à apprendre, à créer et à utiliser « . Oui, c’est vrai tant que vous les comprenez fondamentalement. Avant d’apprendre les hooks… Avant de penser aux hooks, pensez aux fonctions JavaScript classiques (alias vanille). Dans le langage de programmation JavaScript, les fonctions sont des codes logiques réutilisables pour effectuer des tâches répétées. Les fonctions sont composables. Cela signifie que vous pouvez invoquer une fonction dans une autre fonction et utiliser son résultat. Dans l’image ci-dessous, la fonction someFunction() compose (utilise) les fonctions a() et b(). La fonction b() utilise la fonction c(). Composabilité des fonctions Si nous écrivons ceci en code, ce sera comme ceci : fonction a() { // un peu de code } fonction c() { // un peu de code } function b() { // un peu de code c() ; // un peu de code } function someFunction() { // du code a() ; b() ; // un peu de code } Ce n’est pas un secret que les composants fonctionnels de React sont juste de bonnes vieilles fonctions JavaScript ! Donc, si les fonctions peuvent être composées, les composants React peuvent également être composés. Cela signifie que nous pouvons utiliser (composer) un ou plusieurs composants dans un autre composant comme le montre l’image ci-dessous : Composants composables Composants avec état ou sans état Les composants dans React peuvent être avec ou sans état. Un composant avec état déclare et gère un état local en son sein. Un composant sans état est une pure fonction qui n’a pas d’état local ni d’effets secondaires à gérer. Une fonction pure est une fonction sans effet secondaire. Cela signifie qu’une fonction renvoie toujours la même sortie pour la même entrée. Si l’on retire la logique d’état et les effets secondaires d’un composant fonctionnel, on obtient un composant sans état. De plus, la logique d’état et d’effets secondaires peut être réutilisée ailleurs dans l’application. Il est donc logique de les isoler autant que possible d’un composant. Composant avec état, car le composant possède une logique avec état Les crochets React et la logique avec état Avec React Hooks, nous pouvons isoler la logique étatique et les effets secondaires d’un composant fonctionnel. Les hooks sont des fonctions JavaScript qui gèrent le comportement de l’état et les effets secondaires en les isolant d’un composant. Ainsi, nous pouvons maintenant isoler toute la logique d’état dans les hooks et les utiliser (les composer, car les hooks sont aussi des fonctions) dans les composants. Logique étatique isolée dans des crochets La question est de savoir quelle est cette logique à état ? Il peut s’agir de tout ce qui doit déclarer et gérer une variable d’état localement. Par exemple, la logique permettant d’extraire des données et de les gérer dans une variable locale est étatique. Nous pouvons également vouloir réutiliser la logique de récupération dans plusieurs composants. Alors, que sont exactement les React Hooks ? Alors, comment pouvons-nous définir les React Hooks en langage clair ? Maintenant que nous avons compris les fonctions, la composabilité, les composants, les états et les effets secondaires, voici une définition des React Hooks : Les React Hooks sont de simples fonctions JavaScript que nous pouvons utiliser pour isoler la partie réutilisable d’un composant fonctionnel. Les hooks peuvent avoir un état et peuvent gérer des effets secondaires. React fournit un tas de hooks standards intégrés : useState: Pour gérer les états. Renvoie une valeur d’état et une fonction de mise à jour pour la mettre à jour. useEffect: Pour gérer les effets secondaires tels que les appels d’API, les abonnements, les temporisateurs, les mutations, et plus encore. useContext: Pour retourner la valeur actuelle d’un contexte. useReducer: Une alternative à useState pour aider à la gestion d’états complexes. useCallback: Renvoie une version mémorisée d’un callback pour aider un composant enfant à ne pas effectuer un nouveau rendu inutilement. useMemo: Renvoie une valeur mémorisée qui permet d’optimiser les performances. useRef: Renvoie un objet ref avec une propriété .current. L’objet ref est mutable. Il est principalement utilisé pour accéder à un composant enfant de manière impérative. useLayoutEffect: Elle se déclenche à la fin de toutes les mutations du DOM. Il est préférable d’utiliser useEffect autant que possible plutôt que celui-ci car useLayoutEffect se déclenche de manière synchrone. useDebugValue: Permet d’afficher une étiquette dans React DevTools pour les hooks personnalisés. Vous pouvez lire ces hooks plus en détail ici. Veuillez noter que chacun de ces noms de hooks commence par use. Oui, c’est une pratique standard pour identifier rapidement un hook dans la base de code de React. Nous pouvons également créer des hooks personnalisés pour nos cas d’utilisation uniques, comme la récupération de données, la journalisation sur disque, les minuteurs, et bien d’autres encore. La prochaine fois, si vous rencontrez des hooks React dans une base de code ou si l’on vous demande d’en écrire un, allez-y doucement. Il s’agit simplement d’une autre fonction JavaScript pour gérer l’état et les effets secondaires en dehors des composants fonctionnels. Si vous recherchez un guide étape par étape pour concevoir et créer un hook personnalisé, cet article peut vous être utile. Avant … Lire la suite

L’état est l’un des concepts les plus essentiels que tout développeur JavaScript moderne doit comprendre. Si vous ne comprenez pas l’état, vous ne serez pas en mesure d’utiliser et de tirer pleinement parti de bibliothèques puissantes telles que React pour construire vos applications. Voyons exactement ce qu’est l’état, comment il existe déjà dans vos applications JavaScript maintenant, et comment React nous permet de le gérer beaucoup plus facilement avec des crochets intégrés comme useState. Vous voulez une excellente ressource pour apprendre React ? Devenez un pro de React en 30 minutes par jour avec le React Bootcamp . Qu’est-ce que l’état ? Ce qui peut vous surprendre, c’est que tout site Web ou toute application que vous construisez avec du simple JavaScript comporte déjà un état. Il n’est simplement pas évident de savoir où il se trouve. Voici un exemple de base : Disons que nous construisons une application de compteur avec JavaScript. Nous voulons que cette application soit capable d’afficher le compteur actuel, ainsi que d’augmenter et de diminuer le compteur d’une unité. Elle consistera uniquement en l’affichage du compte actuel, ainsi qu’en un bouton pour augmenter le compte d’une unité et un autre pour le diminuer d’une unité. Voici à quoi ressemblera la version finale de notre application : La dernière application de comptage Voici le balisage de départ de notre application : + 1 0 – 1 En termes simples, l’état est une donnée que nous devons gérer dans le temps au sein de notre application L’état est souvent modifié par l’entrée de l’utilisateur et c’est le cas dans notre application ici. Quel est l’état de notre application de compteur ? C’est le nombre de compteurs. Notre utilisateur peut augmenter ou diminuer la valeur de l’état en cliquant sur le bouton approprié. Ce qui est important, c’est que nous voulons afficher ces changements à notre utilisateur. Problèmes avec l’état en JavaScript simple Bien que l’état semble être un concept simple, sa gestion pose deux problèmes lorsque vous utilisez uniquement JavaScript : Il n’est pas évident de savoir ce qu’est l’état ou où il se trouve. La lecture et la mise à jour de l’état est un processus peu naturel et souvent répétitif lors de l’utilisation d’API natives de navigateur comme document. Comment mettre à jour l’état du compteur lorsque l’utilisateur clique sur l’un des boutons ? Nous devons d’abord obtenir une référence à chaque élément. Pour ce faire, en JavaScript, il est courant d’ajouter un attribut id unique à chaque élément, de sélectionner chaque élément en JavaScript avec la méthode document.querySelector et de stocker la référence dans une variable locale : + 1 0 – 1 Maintenant que nous avons des références à chaque élément HTML, comment faire fonctionner le bouton d’incrémentation ? Nous devons d’abord écouter un événement de clic sur notre bouton d’incrémentation. Ensuite, lorsque le bouton est cliqué, nous devons obtenir la valeur actuelle du compte à partir de l’élément ayant l’id « count ». Pour ce faire, nous plongeons dans le document HTML à l’aide de l’API de document et obtenons cette valeur avec count.innerText. La valeur innerText est une chaîne, nous la convertissons donc en un nombre, ajoutons 1, puis réécrivons cette valeur dans count.innerText. Pour faire fonctionner le bouton de décrémentation, nous reprenons les mêmes étapes. La seule différence est que nous utilisons l’expression Number(count.innerText – 1). + 1 0 – 1 Ce n’est pas trop de code, mais vous pouvez voir qu’il y a un certain nombre d’étapes ici qui ne sont pas très intuitives et répétitives : Ajouter un identifiant arbitraire à des éléments HTML Recherche de l’élément en utilisant JavaScript Stocke la référence de l’élément dans une variable Écoute de l’événement approprié sur l’élément Obtenir la valeur de l’état actuel en utilisant l’API du document Ecriture de la nouvelle valeur d’état dans la page avec .innerText Ce sont beaucoup d’instructions de bas niveau qui sont nécessaires au fonctionnement de notre programme, mais elles ne nous aident pas à réfléchir à l’état sous-jacent. Comme nous l’avons vu, l’état se trouve dans le navigateur. Cela signifie que nous devons d’abord « trouver » l’état et ensuite impérativement (d’une manière que l’ordinateur comprend mieux que nous) mettre à jour cette valeur. Heureusement, React nous offre une façon beaucoup plus simple de mettre à jour l’état et de penser à l’état. Comment React nous aide-t-il à gérer l’état ? Un avantage significatif de l’utilisation de React et la raison pour laquelle il est dans votre intérêt d’utiliser React pour développer vos applications JavaScript est qu’il vous donne des modèles beaucoup plus faciles pour mettre à jour votre état. Contrairement à JavaScript, React se charge du travail difficile de mise à jour de ce que l’utilisateur voit. Tout ce que nous avons à faire est de lui dire quel état nous gérons et quelle doit être la nouvelle valeur. Au lieu de laisser l’état vivre dans le navigateur et de devoir le retrouver à chaque fois que nous avons besoin de le lire ou de le mettre à jour, nous pouvons simplement le placer dans une variable, puis mettre à jour la valeur de cette variable. Une fois cette opération effectuée, la mise à jour et la nouvelle valeur seront affichées à nos utilisateurs. C’est tout le concept de la gestion de l’état dans React Au lieu d’utiliser un document HTML, nous pouvons écrire toutes nos balises dans un composant React. Il est écrit de manière identique à une fonction JavaScript ordinaire et il affiche les mêmes éléments HTML en utilisant une syntaxe identique appelée JSX. export default function Counter() { return ( + 1 0 – 1 ) ; } Comment pouvons-nous réaliser la même application de comptoir avec React ? Dans notre application React, une fois que nous avons identifié notre état, nous le contrôlons à l’aide d’une variable JavaScript. Cette variable peut être déclarée de plusieurs façons. La façon la plus populaire de gérer l’état d’un composant est avec le hookuseState. Un hook dans React fonctionne de manière très similaire aux fonctions JavaScript … Lire la suite

Lorsque vous développez des sites Web et des applications à l’aide de React et de tout autre framework React, vous souhaitez ajouter certaines fonctionnalités pour aider vos utilisateurs à naviguer sur votre site. Ces fonctionnalités comprennent des boutons de défilement vers le haut et vers le bas, ainsi que la possibilité de défiler n’importe où sur la page. Ces fonctionnalités sont simples à mettre en œuvre, et vous n’avez même pas besoin d’utiliser une bibliothèque externe. Voici ce que nous allons construire : Il existe plusieurs bibliothèques et plugins que vous pouvez utiliser pour ajouter simplement la fonctionnalité scroll-to-top dans React. Mais ici, nous allons voir comment mettre en œuvre facilement la fonctionnalité scroll-to-top sans utiliser de bibliothèques. Commençons.. Comment implémenter la logique Dans ce tutoriel, nous allons tirer parti des hooks React useState() et useEffect() pour gérer rapidement cette logique. Je vous recommande de rendre cette fonctionnalité réutilisable en construisant un nouveau composant pour la gérer. Par exemple, je vais créer un composant appelé ScrollToTop.js. Dans ce composant, nous allons d’abord importer les hooks React useState() et useEffect(), puis nous allons créer un état pour contrôler la visibilité du bouton scroll-to-top. Gardez à l’esprit que cela n’est utile que si vous souhaitez que le bouton s’affiche après que l’utilisateur a fait défiler la page un peu vers le bas, puis disparaisse lorsque l’utilisateur remonte. La valeur par défaut de cet état est false. const [showTopBtn, setShowTopBtn] = useState(false) ; L’étape suivante consiste à utiliser le crochet useEffect() pour gérer la logique qui décide quand le bouton doit s’afficher et quand il doit disparaître. Lorsque l’utilisateur fait défiler la page vers le bas, nous utilisons la fonction addEventListener() pour écouter un événement de défilement. La fonction de rappel affichera le bouton en définissant l’état showTopBtn à true si la position de défilement vertical est supérieure à la valeur que vous spécifiez (dans ce cas, 400) – sinon, elle le définira à false et ne l’affichera pas. useEffect(() => { window.addEventListener(‘scroll’, () => { if (window.scrollY > 400) { setShowTopBtn(true) ; } else { setShowTopBtn(false) ; } }) ; }, []) ; Notez que l’exécution se poursuivra pendant que vous vous déplacerez dans le site Web. Par conséquent, le deuxième paramètre du crochet useEffect() est un tableau vide ([]). Jusqu’à présent, nous avons été en mesure de contrôler l’apparition et l’absence de notre bouton « scroll-to-top ». L’étape suivante consiste à écrire la logique fondamentale qui fait défiler la page vers le haut une fois que le bouton est cliqué. Pour ce faire, nous allons écrire une fonction qui sera appelée chaque fois que l’utilisateur cliquera sur le bouton « scroll-to-top ». Nous utiliserons la méthode JavaScript window.scrollTo() pour ce faire. Il s’agit d’une technique permettant de faire défiler une page Web jusqu’à un certain ensemble de coordonnées dans le document. const goToTop = () => { window.scrollTo({ top : 0, behavior : ‘smooth’, }) ; } ; Remarque : window.scrollTo() prend également en charge une option de comportement, qui précise si le défilement doit se faire en douceur (smoothly) ou se produire instantanément en un seul bond(auto la valeur par défaut). À ce stade, nous avons réussi à implémenter toute la logique nécessaire pour créer un bouton « scroll-to-top » avec React. Nous allons maintenant ajouter la méthode onclick() au bouton dans notre balisage. Si vous avez suivi les étapes correctement, votre code final devrait ressembler à quelque chose comme ceci : import React, { useState, useEffect } de ‘react’ ; import { FaAngleUp } de ‘react-icons/fa’ ; importez ‘./index.css’ ; const ScrollToTop = () => { const [showTopBtn, setShowTopBtn] = useState(false) ; useEffect(() => { window.addEventListener(‘scroll’, () => { if (window.scrollY > 400) { setShowTopBtn(true) ; } else { setShowTopBtn(false) ; } }) ; }, []) ; const goToTop = () => { window.scrollTo({ top : 0, behavior : ‘smooth’, }) ; } ; retourner ( {showTopBtn && ( )} ) ; } ; export default ScrollToTop ; J’ai inclus la balise, pour que vous puissiez voir où j’ai ajouté la fonction onClick(). L’étape suivante consiste à ajouter ce composant à toute page de votre site Web où vous souhaitez qu’il fonctionne. Si vous voulez qu’il fonctionne sur toutes les pages de votre application React, il suffit de l’ajouter à votre fichier App.js. Pour ce faire, importez d’abord le composant (ScrollToTop.js), puis ajoutez-le n’importe où dans votre fichier App.js : import ScrollToTop de ‘./ScrollToTop.js’ ; const App = () => { return ( ) ; } export default App ; Il s’agit de la fonctionnalité la plus simple à ajouter puisque tout ce que vous avez à faire est d’écrire une fonction pour gérer la logique et de l’appeler lorsque le bouton est pressé. Voici à quoi ressemblera la logique : const scrollToBottom = () => { window.scrollTo({ top : document.documentElement.scrollHeight, behavior : ‘smooth’, }) ; } ; Simplement, ce que nous faisons, c’est définir l’emplacement scrollTo comme la hauteur de la page entière. L’étape suivante consiste à inclure la méthode onclick() dans le balisage du bouton. Faire défiler vers le bas Cette méthode est couramment utilisée dans les barres de navigation des sites Web à page unique lorsque les utilisateurs souhaitent se connecter à partir de la barre de navigation à une certaine section de votre page Web. Cette méthode est assez similaire à celle que nous avons utilisée jusqu’à présent. Je vais vous expliquer l’idée, puis nous allons écrire une fonction réutilisable pour éliminer les répétitions de code inutiles. Comment implémenter la logique Nous allons utiliser useRef() pour cela, qui est un hook React intégré qui accepte un argument ou un paramètre comme valeur initiale et renvoie une référence. La référence possède une propriété intéressante et utile appelée current. Le hook useRef() est similaire au hook JavaScript getElementById(). La première étape consiste à installer useRef() puis à créer une référence pour accéder à la partie vers laquelle nous voulons défiler. useRef() accepte une valeur nulle. const aboutSection = useRef(null) ; L’étape suivante consiste à ajouter la ref que nous avons déclarée à … Lire la suite

Si vous avez du mal à comprendre le hook useEffect, vous n’êtes pas seul. Les débutants comme les développeurs expérimentés considèrent qu’il s’agit de l’un des hooks les plus difficiles à comprendre, car il nécessite la compréhension de quelques concepts de programmation peu familiers. Dans ce guide rapide, nous allons voir pourquoi ce hook existe, comment mieux le comprendre et comment l’utiliser correctement dans vos projets React dès aujourd’hui. Vous voulez le meilleur moyen d’apprendre React ? Devenez un pro de React en 30 minutes par jour avec le React Bootcamp . Pourquoi s’appelle-t-il useEffect ? Lorsque les hooks React de base ont été ajoutés à la bibliothèque en 2018 (useState, useEffect, et ainsi de suite), de nombreux développeurs ont été déroutés par le nom de ce hook : « useEffect ». Qu’est-ce qu’un  » effet  » exactement ? Le mot effet fait référence à un terme de programmation fonctionnelle appelé « effet secondaire ». Mais pour vraiment comprendre ce qu’est un effet secondaire, nous devons d’abord appréhender le concept de fonction pure. Vous ne le savez peut-être pas, mais la plupart des composants React sont destinés à être des fonctions pures. Il peut être étrange de penser aux composants React comme à des fonctions, mais ils le sont. Il est utile de voir qu’un composant React normal est déclaré comme une fonction JavaScript : function MyReactComponent() {} La plupart des composants React sont des fonctions pures, c’est-à-dire qu’ils reçoivent une entrée et produisent une sortie prévisible de JSX. L’entrée d’une fonction JavaScript est constituée d’arguments. Mais quelle est l’entrée d’un composant React ? Les accessoires! Ici, nous avons un composant User sur lequel le nom de l’accessoire est déclaré. Dans User, la valeur de l’accessoire est affichée dans un élément d’en-tête. export default function App() { retur n } function User(props) { return {props.nom} ; // John Doe } Il s’agit d’une pureté car, avec la même entrée, elle renverra toujours la même sortie. Si nous passons à User une proposition de nom avec la valeur « John Doe », notre résultat sera toujours John Doe. Vous vous dites peut-être : « Qu’est-ce que ça peut faire ? Pourquoi avons-nous même un nom pour cela ? » Les fonctions pures ont le grand avantage d’être prévisibles, fiables et faciles à tester Ceci est à comparer avec le cas où nous avons besoin d’effectuer un effet secondaire dans notre composant. Que sont les effets secondaires dans React ? Les effets secondaires ne sont pas prévisibles car ce sont des actions qui sont effectuées avec le « monde extérieur » Nous exécutons un effet secondaire lorsque nous avons besoin de sortir de nos composants React pour faire quelque chose. L’exécution d’un effet secondaire, cependant, ne nous donnera pas un résultat prévisible. Imaginez que nous demandions des données (comme des articles de blog) à un serveur qui a échoué et qui, au lieu des données de l’article, nous donne une réponse avec un code d’état 500. Pratiquement toutes les applications reposent sur les effets secondaires pour fonctionner d’une manière ou d’une autre, à l’exception des applications les plus simples. Parmi les effets secondaires courants, citons : Effectuer une requête à une API pour obtenir des données d’un serveur dorsal Pour interagir avec les API du navigateur (c’est-à-dire pour utiliser directement le document ou la fenêtre ) Utiliser des fonctions de temporisation imprévisibles comme setTimeout ou setInterval C’est la raison pour laquelle useEffect existe : pour fournir un moyen de gérer l’exécution de ces effets secondaires dans ce qui est autrement des composants React purs. Par exemple, si nous voulions modifier la métabalise title pour afficher le nom de l’utilisateur dans l’onglet de son navigateur, nous pourrions le faire dans le composant lui-même, mais nous ne devrions pas. function User({nom }) { document.title = nom // Il s’agit d’un effet secondaire. Ne faites pas cela dans le corps du composant ! return {nom} } Si nous exécutons un effet secondaire directement dans le corps de notre composant, il entrave le rendu de notre composant React. Les effets secondaires doivent être séparés du processus de rendu. Si nous devons effectuer un effet secondaire, il doit être réalisé strictement après le rendu de notre composant. C’est ce que nous offre useEffect. En résumé, useEffect est un outil qui nous permet d’interagir avec le monde extérieur sans affecter le rendu ou les performances du composant dans lequel il se trouve Comment utiliser useEffect ? La syntaxe de base de useEffect est la suivante : // 1. Importer useEffect importez { useEffect } de ‘react’ ; function MyComponent() { // 2. appelez-la au-dessus du JSX renvoyé // 3. Passez-lui deux arguments : une fonction et un tableau useEffect(() => {}, []) ; // retourne… } La manière correcte d’exécuter l’effet secondaire dans notre composant User est la suivante : Nous importons useEffect de « react » Nous l’appelons au-dessus du JSX retourné dans notre composant Nous lui passons deux arguments : une fonction et un tableau import { useEffect } de ‘react’ ; function User({nom }) { useEffect(() => { document.title = nom ; }, [nom]) ; return {nom} } La fonction transmise à useEffect est une fonction de rappel. Elle sera appelée après le rendu du composant. Dans cette fonction, nous pouvons exécuter nos effets secondaires ou plusieurs effets secondaires si nous le souhaitons. Le deuxième argument est un tableau, appelé tableau des dépendances. Ce tableau doit inclure toutes les valeurs sur lesquelles repose notre effet secondaire. Dans notre exemple ci-dessus, puisque nous changeons le titre en fonction d’une valeur dans la portée externe, le nom, nous devons l’inclure dans le tableau des dépendances. Ce tableau va vérifier si une valeur (dans ce cas le nom) a changé entre les rendus. Si c’est le cas, il exécutera à nouveau notre fonction use effect. Cela a du sens car si le nom change, nous voulons afficher ce nouveau nom et donc exécuter à nouveau notre effet secondaire. Comment corriger les erreurs courantes avec useEffect ? Il y a quelques détails subtils à connaître pour éviter les erreurs avec … Lire la suite

Si vous êtes un développeur React, vous avez probablement utilisé une bibliothèque pour gérer l’état dans vos applications React. Et vous avez probablement entendu parler de Redux, la bibliothèque de gestion d’état pour React. Pendant longtemps, Redux a été la seule solution fiable et la plus largement adoptée pour la gestion de l’état dans les applications React. Et Redux a prouvé ses cas d’utilisation dans les grandes applications. Mais le principal problème auquel les développeurs étaient souvent confrontés avec Redux était l’expérience globale du développeur. Dans les premières versions de Redux, vous deviez configurer manuellement votre magasin de données global et connecter manuellement chaque composant pour le consommer et mettre à jour l’état global. En fait, les développeurs devaient consacrer beaucoup de temps et d’efforts à la mise en place et à l’utilisation de Redux dans leurs applications. Au fil du temps, Redux s’est amélioré et fournit maintenant des solutions simples de plugins comme redux-toolkit. Mais maintenant, il existe des solutions de gestion d’état encore plus simples pour React, comme zustand, recoil et react-query, pour n’en citer que quelques-unes. Dans cet article, nous allons voir comment configurer et utiliser Recoil dans vos applications React en construisant une simple application todo traditionnelle. Avant de commencer, je veux juste mentionner que tout le code de l’exemple de l’application todo est dans ce bac à sable. N’hésitez pas à le référencer et à le modifier. exemple de recoil todo app Comment installer Recoil Commençons par installer la bibliothèque. Si vous travaillez sur votre ordinateur local, vous pouvez installer Recoil en utilisant npm ou yarn. npm i recoil // ou yarn add recoil Comment ajouter le composant racine de Recoil ? La première chose que vous devez faire est d’envelopper votre application entière avec le composant RecoilRoot fourni par recoil. Puisque Recoil utilise une approche 100% basée sur les crochets, il est bon d’envelopper toute votre application avec le composant racine fourni par Recoil afin que vous puissiez accéder à l’état de votre application depuis n’importe quel composant. Vous pouvez simplement faire cela en important et en ajoutant RecoilRoot dans votre index.js (fichier d’entrée). Voici à quoi ressemblera votre index.js une fois que vous l’aurez ajouté : import { StrictMode } de « react » ; import ReactDOM de « react-dom » ; import { RecoilRoot } from « recoil » ; import App de « ./App » ; const rootElement = document.getElementById(« root ») ; ReactDOM.render( , rootElement ) ; Comment créer un atome dans Recoil Après cela, nous devons créer un atome. Un atome dans Recoil est simplement un morceau de mémoire isolé qui contient des données. Vous pouvez créer autant d’atomes que vous le souhaitez. Par exemple, disons que vous créez une application de médias sociaux où les utilisateurs peuvent mettre en signet un certain message. Pour stocker les messages mis en signet par les utilisateurs, vous pouvez avoir un atome distinct contenant uniquement les données des signets. Lorsque certaines données changent dans l’atome – par exemple, l’utilisateur met un article en signet – les composants souscrits à cet atome ou l’utilisant sont rendus à nouveau. C’est ici que la partie performance de recoil entre en jeu. Recoil s’assurera que seuls les composants souscrits à cet atome spécifique sont rendus à nouveau. La création d’un atome est extrêmement simple. Créez un fichier src/recoil/atom/todoAtom.js et ajoutez le code suivant : import { atom } de « recoil » ; export const todoListAtom = atom({ clé : « todoListState », default : [], }) ; Comment créer votre premier atome Il vous suffit d’importer la fonction atom de recoil. Cette fonction prend un objet comme argument. La première entrée de cet objet est key. C’est une chaîne unique qui représentera cet atome spécifique. default est l’état initial de cet atome. Et c’est tout. C’est tout ce que vous devez faire pour le configurer. Veillez à exporter todoListAtom car nous l’utiliserons pour référencer cet atome. Comment ajouter des données à un atome Créons maintenant une entrée où l’utilisateur peut saisir son todo. Créez components/TodoItemCreator.js. Dans ce composant, nous avons une entrée où l’utilisateur va taper et nous allons voir comment il est simple d’ajouter un nouveau todo dans l’atome. Plus tard, nous verrons comment tous les composants qui utilisent le même atome se mettent à jour pour afficher le nouveau todo ajouté. Vous pouvez être aussi créatif que vous le souhaitez dans le style de l’entrée. Ici, je vais seulement montrer comment nous pouvons utiliser le hook useRecoilState (fourni par la bibliothèque recoil pour obtenir l’état actuel des données dans l’atome) et une fonction pratique pour mettre à jour l’état. Si vous avez utilisé useState dans React, cela ressemblera assez à ce que vous avez l’habitude de voir dans l’état de votre composant local. Le hook useRecoilState prend un atome comme argument. import { useState } de « react » ; import { useRecoilState } de « recoil » ; import { todoListAtom } de « ../recoil/atoms/todoAtom » ; import { generateUID } de « ../utils/uuid » ; export const TodoItemCreator = () => { const [inputValue, setInputValue] = useState(«  ») ; const [_, setTodoList] = useRecoilState(todoListAtom) ; const onChange = (event) => { setInputValue(event.target.value) ; } ; const addTodoItem = () => { if (inputValue) { setTodoList((oldTodoList) => [ …oldTodoList, { id : generateUID(), text : inputValue, isComplete : false } ]) ; setInputValue(«  ») ; } } ; retour ( Ajouter une tâche ) ; } ; Lorsque l’utilisateur saisit l’entrée et clique sur le bouton Add Task, une fonction addTodoItem est appelée. Cette fonction appelle simplement la fonction setTodoList donnée par le crochet. Puisqu’il est recommandé de ne jamais mettre à jour votre état global directement, créez plutôt une copie superficielle des todos précédents et ajoutez-en un nouveau. Dans l’extrait de code ci-dessus, generateUID n’est qu’une fonction utilitaire qui renvoie un identifiant unique uuidv4 pour obtenir un identifiant unique aléatoire que nous utiliserons plus tard pour mettre à jour un simple todo à partir d’une liste de todos. Comment consommer les données de l’Atom Créons maintenant un composant pour afficher un todo dans une liste et permettre à l’utilisateur de mettre à jour, supprimer … Lire la suite

Quel backend choisir pour les projets React que vous construisez ? Il y a tellement d’options différentes parmi lesquelles choisir, comment savoir si le backend que vous choisissez est le bon ? Dans ce guide, vous apprendrez à choisir le backend approprié pour le type d’application React que vous réalisez de la manière la plus simple et la moins coûteuse possible. C’est parti ! Vous voulez connaître le meilleur moyen de créer de superbes applications React ? Créez 4 applications React prêtes pour la production en partant de zéro avec le React Bootcamp . Mon application a-t-elle besoin d’un backend ? En tant que développeurs React, la construction de notre projet se concentre largement sur ce que l’utilisateur voit, ce que l’on appelle le frontend. Dans chaque projet React, nous gérons les données sur le client à travers l’état et les interactions de l’utilisateur. Cependant, de nombreuses apps ne sont pas possibles sans les données qui proviennent du backend. Le backend se charge d’obtenir ou de mettre à jour les données dans notre application et il est caché à l’utilisateur. La plupart des backends se composent de deux parties : Un endroit pour stocker nos données (souvent une base de données) Une méthode pour récupérer les données (souvent une API) Mais voici la bonne nouvelle : en fonction du type d’application que vous réalisez, vous n’aurez peut-être besoin d’aucune des deux. Étape 1 : Pas de backend Si vous créez une application dont les données changent très rarement, vous n’avez probablement pas besoin d’une base de données ou d’une API. Par exemple, si vous créez un blog personnel que vous mettez à jour au mieux quelques fois par semaine et qui est construit comme un site statique à l’aide de Next.js ou Gatsby, vous n’avez pas besoin de backend. Les sites statiques construits avec Gatsby ou Next.js peuvent ne pas avoir besoin d’un backend Au lieu de cela, vous pouvez simplement écrire vos articles de blog sous forme de fichiers markdown, qui sont stockés et suivis (à l’aide de Git) dans un dossier de projet. Si vous avez une application de commerce électronique où les données sur les produits changent rarement, vous pouvez stocker toutes les données de l’application dans des fichiers JSON que vous importez et utilisez simplement dans votre application React. Si la mise à jour manuelle des fichiers et le redéploiement de votre projet vous conviennent, c’est peut-être tout ce dont vous avez besoin. Le type de backend que vous choisissez dépend de certaines caractéristiques clés de vos données que vous devez vous demander : Mes données changent-elles souvent ? Est-ce que je peux gérer mes données comme des fichiers et des dossiers locaux ? Les données ou les fichiers de mon application peuvent-ils être suivis dans le contrôle de version (Git) ? D’autres personnes vont-elles mettre à jour les données ? Mon application nécessitera-t-elle une authentification ? En fonction de vos réponses à ces questions, vous pourrez peut-être vous en sortir en utilisant des fichiers statiques comme source de données. En choisissant cette voie, vous économiserez beaucoup d’argent sur les coûts de base de données et d’hébergement, puisque les sites statiques peuvent être hébergés sur un niveau gratuit de nombreux fournisseurs d’hébergement. Étape 2 : Systèmes de gestion de contenu Si vous avez besoin de plus de fonctionnalités que celles offertes par les fichiers statiques, les systèmes de gestion de contenu constituent l’étape suivante Lessystèmes de gestion de contenu ou (CMS) nous donnent des outils pour gérer plus facilement notre contenu. Ils nous donnent souvent des applications dédiées avec des éditeurs intégrés pour visualiser, mettre à jour et structurer plus facilement nos données. Ce dont nous avons spécifiquement besoin pour notre application React est un CMS sans tête. Un CMS sans tête n’a pas d’interface visible, puisque React servira d’interface utilisateur pour notre application. Un CMS est idéal pour votre application si vous avez simplement trop de données à gérer sous forme de fichiers séparés ou si vous souhaitez que d’autres utilisateurs potentiellement non techniques puissent modifier ou ajouter du contenu à votre application. Parmi les CMS les plus simples, on trouve des feuilles de type Excel comme Google Sheets et Airtable, ainsi que des applications de prise de notes comme Notion. Vous pouvez utiliser des outils comme Google Sheet, Airtable et Notion pour fonctionner comme le CMS de votre application L’avantage de ces solutions est qu’elles sont faciles à utiliser, qu’elles ont un généreux niveau de gratuité et qu’elles disposent de leur propre API intégrée pour récupérer des données. Il existe d’autres CMS qui offrent des fonctionnalités conviviales pour les développeurs, telles que la gestion des images et des ressources multimédias, ainsi que des fonctionnalités API plus étendues. Voici quelques-uns des CMS les plus conviviaux pour les développeurs : Sanity, GraphCMS et Contentful sont des CMS plus puissants et plus conviviaux Et si vous recherchez les systèmes de gestion de contenu les plus puissants, avec des fonctionnalités comme l’authentification intégrée et la mise à jour des données depuis votre client React, consultez : Vous voulez un CMS qui soit en fait un backend complet ? Découvrez Strapi ou KeystoneJS Étape 3 : Backend as a Service La limite des systèmes de gestion de contenu est qu’ils sont excellents pour gérer et accéder aux données. Cependant, lorsque vous devez ajouter des fonctionnalités plus complexes et personnalisées, telles que la mise à jour des données à partir de votre client React, l’authentification des utilisateurs, la protection du contenu et les données en temps réel, un CMS standard est insuffisant. Gérer une base de données et construire une API complète pour interagir avec cette base de données est un défi de taille, surtout si vous n’avez travaillé que sur le frontend. Si c’est le cas pour vous, il peut être intéressant d’envisager un backend as a service (BaaS). Vous bénéficierez ainsi de toute la puissance d’un backend personnalisé, sans les connaissances spécifiques au domaine. Le BaaS le plus populaire est Firebase, et pour une bonne raison. Il … Lire la suite

Le concept de locale storage est essentiel pour les développeurs qui cherchent à stocker des données de manière persistante dans le navigateur. En utilisant localstorage react, on peut facilement sauvegarder et récupérer des informations entre les sessions de navigation, ce qui est particulièrement utile pour des fonctionnalités comme le mode sombre ou la sauvegarde automatique des formulaires. Lorsque vous travaillez avec react localstorage, vous pouvez utiliser des hooks comme useState() et useEffect() pour gérer l’état et les effets secondaires liés au stockage local. Ces hooks permettent de synchroniser l’état de votre application avec local storage react de manière efficace et propre. Mais local storage c’est quoi exactement ? Il s’agit d’une fonctionnalité du Web Storage qui permet de stocker des paires clé-valeur directement dans le navigateur de l’utilisateur. Cela permet de conserver des données entre les différentes sessions de navigation, ce qui est crucial pour des applications web modernes qui nécessitent une certaine persistance des données côté client. Que sont les React Hooks ? Les React Hooks sont des fonctions JavaScript que vous pouvez importer du paquet React pour ajouter des capacités à vos composants. Les hooks permettent aux développeurs React d’utiliser des méthodes d’état et de cycle de vie au sein de composants fonctionnels. Ils fonctionnent également avec le code existant, ce qui les rend facilement adoptables dans une base de code. Nous aurons besoin de deux hooks afin d’utiliser localStorage avec les hooks React : useState() – L’état de votre application est assuré de changer à un moment donné. Le hook useState() est une fonction qui accepte un paramètre, l’état initial (qui peut être la valeur d’une variable, d’un objet ou de tout autre type de données dans votre composant), et renvoie deux valeurs : l’état actuel et une fonction qui peut être utilisée pour mettre à jour l’état. useEffect() – Le crochet d’effet est activé par défaut après le premier rendu et chaque fois que l’état est modifié. Comme son nom l’indique, il est utilisé pour exécuter un effet chaque fois que l’état change. Ce hook est idéal pour configurer les écouteurs, récupérer des données de l’API et supprimer les écouteurs avant que le composant ne soit supprimé du DOM. Comment implémenter localStorage dans React localStorage nous permet d’accéder à l’objet de stockage d’un navigateur, qui comprend cinq méthodes : setItem(): Cette méthode est utilisée pour ajouter une clé et une valeur à localStorage. getItem(): Cette méthode est utilisée pour obtenir un élément du localStorage à l’aide de la clé. removeItem() : Cette technique est utilisée pour supprimer un élément du localStorage en fonction de sa clé. clear(): Cette technique est utilisée pour supprimer toutes les instances de localStorage. key(): Lorsque vous fournissez un nombre, il facilite la récupération d’une clé de localStorage. Dans ce billet, nous ne considérerons que les méthodes les plus populaires, qui sont les deux premières méthodes. Pour toute demande d’implémentation, n’hésitez pas à vous rapprocher d’une agence spécialisée sur react. Comment utiliser la méthode setItem() En donnant des valeurs à une clé, cette technique est utilisée pour stocker des objets dans localStorage. Cette valeur peut être de n’importe quel type de données, notamment un texte, un nombre entier, un objet, un tableau, etc. Il est essentiel de se rappeler que, pour stocker des données dans localStorage, vous devez d’abord les stringifier à l’aide de la fonction JSON.stringify(). const [items, setItems] = useState([]) ; useEffect(() => { localStorage.setItem(‘items’, JSON.stringify(items)) ; }, [items]) ; Dans le code ci-dessus, nous avons d’abord créé un état et lui avons attribué un tableau vide (le vôtre pourrait être tout autre type de données). Ensuite, nous avons utilisé useEffect() pour ajouter des objets à localStorage chaque fois que la valeur de notre état change. Pour ce faire, nous avons passé l’état comme deuxième argument. En gros, il s’agit du code principal responsable de l’ajout de paires clé-valeur au localStorage : localStorage.setItem(‘items’, JSON.stringify(items)) ; Pour faire simple, le code précédent nomme la clé (listes) et lui attribue ensuite une valeur, mais nous devions d’abord nous assurer que les données que nous ajoutions étaient une chaîne JSON. Nous utilisons JSON.stringify() pour convertir un objet JSON en un texte JSON stocké dans une chaîne, qui peut ensuite être transmis au serveur Web. Structure de la façon dont les hooks fonctionnent avec localstorage pour définir les éléments Utilisation de la méthode getItem( ) Cette méthode permet de récupérer des objets dans localStorage. Il existe d’autres méthodes pour accomplir cela avec React, mais nous allons utiliser le hook useEffect() car c’est le meilleur. Le hook useEffect( ) nous aide à récupérer tous les éléments au premier rendu, ce qui signifie que lorsque le composant se monte ou se rend à nouveau, il obtient toutes nos données de localStorage. Notez que c’est la raison pour laquelle nous avons passé un second argument vide. const [items, setItems] = useState([]) ; useEffect(() => { const items = JSON.parse(localStorage.getItem(‘items’)) ; if (items) { setItems(items) ; } }, []) ; Il est important de se rappeler que lorsque nous avons stocké les données, nous les avons d’abord converties en une chaîne JSON. Cela signifie que pour que nous puissions maintenant les utiliser, nous devons reconvertir la chaîne JSON en objet JSON. Pour ce faire, nous utilisons la méthode JSON.parse(). Structure de la façon dont les hooks fonctionnent avec localstorage pour obtenir des éléments Conclusion Dans cet article, nous avons appris comment utiliser localStorage avec les hooks React, quand l’utiliser et quel hook utiliser. Si vous voulez voir comment cela fonctionne en pratique, vous pouvez obtenir le code source d’une application simple de liste de tâches qui utilise localStorage et ces hooks ici.

Lorsque vous gérez des sites Web, tout tourne autour des données : vues, temps de réponse, utilisateurs, taux de rebond, etc. Et, si vous gérez des sites Web, vous avez probablement eu à faire face à une instance de WordPress au moins une fois. Il existe des centaines – ou peut-être des milliers – de plugins WordPress pour récupérer et afficher des données. Mais les API de WordPress peuvent nous donner un coup de main si nous voulons construire un tableau de bord personnalisé avec certaines informations spécifiques que nous voulons obtenir. C’est pourquoi aujourd’hui je veux partager avec vous comment construire un service qui récupère les données de notre instance WordPress et les affiche dans un tableau. Pour être plus précis, je veux connaître le nombre de plugins que j’utilise et les plugins que j’ai installés précédemment et que je n’utilise plus. Pourquoi devrais-je savoir quels plugins WordPress j’utilise ? J’ai toujours trouvé cette information très importante. Surtout au début de votre voyage avec WordPress, vous pourriez être tenté d’installer un plugin pour chaque fonctionnalité que vous voulez que vos sites Web aient. Les plugins sont peut-être faciles à installer, mais ils présentent aussi des inconvénients potentiels : S’ils ne sont pas mis à jour régulièrement, ils peuvent exposer votre site Web à des attaques et à des vulnérabilités Ils peuvent rendre le temps de chargement de votre site Web beaucoup plus long qu’il ne le devrait Certains plugins peuvent entrer en conflit avec d’autres Je ne dis pas que vous ne devriez pas utiliser ou faire confiance aux plugins. Mais c’est une chose à laquelle vous devez faire attention. Voyons donc comment nous pouvons avoir des informations utiles sur nos plugins à portée de main. Les outils que je vais utiliser API de WordPress – Je vais travailler avec le point de terminaison « plugins ». React – Je vais créer un composant pour afficher des données. Axios – Je l’utiliserai pour appeler facilement les API. React-Bootstrap – J’ai choisi cette bibliothèque juste pour obtenir rapidement un composant de tableau agréable et facile à utiliser. Postman – C’est l’outil que j’utilise toujours pour tester les API. Npm – Je vais l’utiliser pour créer une application React et installer des paquets. API de WordPress Comme je l’ai dit au début de cet article, je veux appeler un endpoint spécifique pour obtenir JSON avec les informations sur les plugins que j’ai installés sur mon instance. Plus précisément, je veux compter les plugins que j’utilise actuellement (« actifs ») et ceux que je n’utilise pas (« inactifs »). La documentation sur les APIs est très détaillée et pleine d’informations et de concepts utiles. Je clique donc sur « Endpoint reference » dans la barre latérale et je fais défiler la page pour cliquer sur « Plugins ». Concentrons-nous maintenant sur la section « Schema ». Ici, je trouve tous les champs qui existent dans un enregistrement de plugin. La liste est assez longue, mais j’ai besoin d’un seul de ces champs : « status ». La documentation indique qu’il me renvoie une chaîne avec deux valeurs possibles : « inactif » ou « actif ». Voici donc l’API que je vais appeler pour récupérer les données nécessaires : https:///wp-json/wp/v2/plugins Jusqu’ici tout va bien. Il y a encore une chose que nous devons prendre en considération. Certains points de terminaison nécessitent une authentification de base pour retourner les données. Notre point final est l’un d’entre eux. À partir de la version 5.6, vous pouvez passer un nom d’utilisateur et un mot de passe d’application pour appeler ce point final. Si vous souhaitez en savoir plus sur les mots de passe d’application et la façon de les générer, je vous recommande de consulter cet article rédigé par la communauté WordPress. Il est temps de tester l’API Une fois que je sais quel point de terminaison je dois appeler et que j’ai généré mon mot de passe d’application, je suis prêt à tester mon appel d’API avec Postman. Voici ce que j’obtiens : Comme vous pouvez le voir, j’obtiens un JSON contenant l’information que je recherche : la clé  » status « . Maintenant nous sommes prêts à créer notre application React ! Codons l’application React Il est maintenant temps de créer le front-end de notre application. Comme je l’ai déjà dit, je vais utiliser React pour sa flexibilité, Axios pour appeler facilement les APIs, et React-Bootstrap pour obtenir des composants prêts à l’emploi avec un beau design. Avant de commencer à écrire du code, récapitulons ce que je veux réaliser : Je veux que mon application frontale récupère les données de mon instance WordPress concernant le statut – actif ou inactif – des plugins installés en appelant le point de terminaison  » Plugins « . Pour ce faire, je veux que mon script effectue les actions suivantes : Créer des variables pour stocker le compte des plugins actifs et inactifs Appeler le point de terminaison par un appel d’API Itérer dans le JSON – l’appel API retourne avec la logique suivante : Si la clé de l’objet « status » est égale à « active », augmentez le compte associé d’une unité, sinon augmentez le compte associé aux plugins inactifs d’une unité. Mettez à jour les états associés – précédemment définis dans le constructeur – en conséquence Rendre le tableau en utilisant le composant « Table » de React-Bootstrap et passer les états dans le composant table où je veux que les données soient affichées avec le nombre de plugins actifs et inactifs Assez parlé. Il est temps de coder ! 🙂 Tout d’abord, je crée mon application React comme ceci : npx create-react-app report Puis j’installe Axios et React-Bootstrap : npm install axios npm install react-bootstrap bootstrap@5.1.3 Tout est prêt. Maintenant, dans mon application React, je me déplace dans le répertoire /src et je crée un nouveau répertoire appelé « components » : /src/composants Puis je me déplace dans le dossier components et je crée un fichier « Report.jsx ». Voici à quoi ressemble le fichier maintenant : import React de ‘react’ ; import axios de ‘axios’ ; import Table de ‘react-bootstrap/Table’ class Report extends React.Component { constructor(props) { super(props) this.state … Lire la suite

L’outil ultime dont vous disposez lorsque vous développez vos projets est votre éditeur de code. C’est pourquoi il est si important de le configurer correctement. Dans ce guide étape par étape, nous passerons d’une installation de VSCode complètement nouvelle à un éditeur de code parfaitement préparé pour votre prochain projet React. C’est parti ! Comment installer VSCode La première étape de la configuration de Visual Studio Code (VSCode en abrégé) consiste à l’installer sur votre ordinateur. Rendez-vous sur code.visualstudio.com et téléchargez la bonne version pour votre ordinateur (c’est 100% gratuit). Installez la bonne version pour votre système d’exploitation Une fois que l’installation est terminée et que vous ouvrez l’application VSCode, vous devriez être accueilli par un écran d’accueil qui ressemble à ceci : Écran d’accueil VSCode (après l’installation) Choisissez un thème de couleur que vous aimez Bien que le thème par défaut fourni avec VSCode soit très joli et lisible, je préfère utiliser un thème tiers que je trouve plus agréable à regarder. Cela peut sembler anodin de consacrer du temps à choisir un thème. Mais comme vous allez passer des heures à lire du texte sur votre éditeur, vous voulez choisir des couleurs que vous aimez et qui ne fatiguent pas vos yeux. J’utilise personnellement et recommande vivement le thème Material pour toutes mes installations de VSCode. Pour installer le thème Material, allez à (en haut de l’écran) : Affichage > Extensions (ou utilisez le raccourci ⇧ + ⌘ (Ctrl) + X) Ensuite, recherchez « Material Theme » dans la barre latérale et installez le premier résultat qui s’affiche. Cela devrait ressembler à ceci : Installation de Material Theme Une fois installé, vous pourrez choisir entre plusieurs variantes dans une liste déroulante. L’option par défaut est très bien, mais je trouve personnellement que la variante « Material Theme Ocean High Contrast » est la plus belle. Thème matériel pour VSCode Rendez votre texte facile à lire C’est le bon moment pour ajouter quelques paramètres de base qui rendent le code que vous écrivez confortable à lire. Les paramètres qui amélioreront la lisibilité de votre code sont la taille de la police, la taille des tabulations et la famille de polices. Vous pouvez modifier vos préférences VSCode en allant sur (en haut de votre écran) : Code > Préférences > Paramètres (ou utilisez le raccourci : ⌘ (Ctrl) + ,) Les paramètres que j’ai trouvés les plus confortables au fil des ans, tant pour le développement sur ordinateur de bureau que sur ordinateur portable, sont une taille de police de 18 et une taille de tabulation fixée à 2. Paramètres du texte pour VSCode De plus, pour que votre texte ait l’air parfait, je trouve que le texte a meilleure allure lorsque vous augmentez le niveau de zoom par défaut de l’éditeur. Pour augmenter le niveau de zoom, allez dans les préférences (⌘ (Ctrl) + ,) et tapez« zoom level« . Je recommande de modifier le niveau de zoom de 0 à 1. Et enfin, par préférence, j’aime supprimer les liens du fil d’Ariane par défaut qui se trouvent en haut de l’éditeur. Vous pouvez supprimer les fils d’Ariane en allant dans : View > Show Breadcrumbs (et en vous assurant qu’il est décoché). Voici à quoi ressemble notre éditeur de code avec un exemple de fichier de composant que j’ai ajouté à mon bureau : Apparition des composants React dans VSCode Formatez votre code avec l’extension Prettier Vous avez peut-être remarqué dans l’exemple ci-dessus que le code n’est pas très bien formaté. Heureusement, vous pouvez formater automatiquement chaque fichier .js que vous écrivez en utilisant l’extension Prettier pour VSCode. Pour pouvoir formater instantanément notre code à chaque fois que nous enregistrons un fichier .js, nous pouvons à nouveau aller dans l’onglet des extensions (⇧ + ⌘ (Ctrl) + X), taper« prettier » et l’installer : Prettier extension pour VSCode Ensuite, nous pouvons retourner dans les préférences (⌘ (Ctrl) + ,) et rechercher« format on save » et s’assurer qu’il est coché : Paramètres de formatage lors de l’enregistrement Et toujours dans les préférences, recherchez le paramètre« formateur par défaut » et réglez-le sur Prettier. Paramètre de formatage par défaut Maintenant, si nous revenons à un fichier non formaté et que nous appuyons sur Enregistrer, il sera instantanément formaté pour nous ! Voici à quoi ressemble notre composant fictif après avoir appuyé sur le bouton « Enregistrer » : Composant React formaté (avec Prettier) Consultez la documentation de l’extension Prettier pour voir comment vous pouvez la configurer davantage en fonction de vos préférences de formatage. Néanmoins, je recommande personnellement d’utiliser les options par défaut Comment taper rapidement JSX avec Emmet VSCode est livré avec un support intégré pour un outil étonnant appelé Emmet qui vous permet d’écrire des balises HTML très rapidement. Cependant, Emmet n’est pas configuré par défaut pour être utilisé avec JSX, que React utilise à la place du HTML. Pour écrire votre JSX plus rapidement, vous pouvez utiliser Emmet avec React en allant sur : Code > Préférences > Paramètres (⌘ (Ctrl) + ,) Et ensuite en tapant dans la barre de recherche,« emmet include languages« . Après cela, cliquez sur le bouton « Ajouter un élément » et ajoutez le paramètre suivant : item : javascript, value : javascriptreact (et ensuite cliquez sur ok) Le paramètre que vous avez ajouté devrait ressembler à ceci : Paramètre Emmet Include Languages Maintenant que nous avons inclus React comme langage pour Emmet, nous pouvons commencer à écrire notre JSX beaucoup plus rapidement. Voici une démonstration rapide de la productivité d’Emmet : Démonstration rapide des raccourcis d’Emmet Vous voulez passer à l’étape suivante ? Maintenant que vous avez un éditeur de code parfaitement configuré pour React, vous êtes prêt à passer à l’étape suivante React Bootcamp. Il s’agit de la ressource ultime pour apprendre (et aimer) React, en vous montrant comment : Passez du statut de débutant absolu à celui de professionnel de React en seulement 30 minutes par jour Créez 4 projets React complets, du début jusqu’au déploiement Apprenez un ensemble puissant de technologies pour créer n’importe quelle application Cliquez pour rejoindre le React Bootcamp