React

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

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

Les PropTypes sont une bonne défense de première ligne lorsqu’il s’agit de déboguer vos apps. Mais avant d’entrer dans le détail des PropTypes, nous devons comprendre le concept de props. Lesprops sont les propriétés en lecture seule qui sont partagées entre les composants pour donner au flux unidirectionnel de React une touche dynamique. Ils sont principalement partagés du composant parent au composant enfant, mais l’inverse est également possible (bien que non recommandé). Dans ce blog, nous allons voir comment valider ou vérifier les props que l’on passe pour éviter un débogage complexe par la suite. Que sont les PropTypes ? Les PropTypes sont simplement un mécanisme qui garantit que la valeur transmise est du bon type de données. Cela permet de s’assurer que nous ne recevons pas une erreur à la toute fin de notre application par la console, ce qui pourrait ne pas être facile à gérer. Je ne recommande pas de les utiliser dans des applications courtes comme des projets pour l’auto-pratique, mais c’est à vous de voir. Pour des projets plus importants, par exemple pour un client, c’est souvent un choix judicieux et une bonne pratique de les utiliser. Il existe de nombreux types de PropTypes et tous ont leurs classes ES6 uniques que nous pouvons utiliser. Nous allons aborder chaque type dans cet article. Comment utiliser les PropTypes Avant la sortie de React 15.5.0, les PropTypes étaient disponibles dans le package React, mais maintenant nous devons ajouter la bibliothèque prop-types dans notre projet. Nous pouvons le faire en exécutant la commande suivante dans notre terminal : npm install prop-types –save Nous pouvons utiliser PropTypes pour valider toutes les données que nous recevons des props. Mais avant de l’utiliser, nous devons l’importer comme toujours dans notre application : import PropTypes de ‘prop-types’ ; Ils sont souvent utilisés après la fin du composant et commencent par le nom du composant comme indiqué : import React de ‘react’ ; import { PropTypes } from « prop-types » ; const Count = (props) => { return ( <> ……… ) } ; Count.propTypes = { //// key est le nom de la prop et // value est le PropType } export default Count ; Les PropTypes sont également des objets avec une paire clé-valeur où la « clé » est le nom du prop et la valeur représente le type ou la classe par lequel ils sont définis. Puisque la définition des PropTypes sur un composant ne dépend pas de l’implémentation du composant, nous allons laisser de côté le code du composant lui-même dans tous les exemples suivants. Le code ci-dessus peut être simplifié comme suit : Count.propTypes = { // Placez les accessoires ici } Voyons d’abord combien il existe de types de PropTypes avant de les comprendre à l’aide d’un exemple. Types de base de PropTypes La façon la plus élémentaire de vérifier le type d’une prop est de vérifier si elle appartient à la catégorie des types primitifs en JavaScript, comme un booléen, une chaîne, un objet, etc. Vous trouverez ci-dessous la liste de tous les types de données considérés comme primitifs ou de base, avec leurs classes, que nous pouvons utiliser pour vérifier les accessoires. Type Classe Exemple Chaîne de caractères PropType.string « helllo » Objet PropType.object {nom : « Rohit »} Nombre PropType.nombre 10 Booléen PropType.bool vrai/faux Fonction PropType.func const say = {console.log(« hello »)} Symbole PropType.symbol Symbole(« m ») Vous trouverez ci-dessous un exemple qui nous montre comment utiliser ces PropTypes pour la vérification de type dans notre application. Comme nous l’avons déjà dit, ils sont définis comme des objets avec une paire clé-valeur où la clé est le nom de l’objet et la valeur contient les classes qui seront utilisées pour la vérification de type. Compte.propTypes = { nom : PropTypes.string, âge : PropTypes.nombre, adresse : PropTypes.object, amis : PropTypes.array, } ; Dans le code ci-dessus, le nom prop est censé avoir une valeur qui est une chaîne, l’âge est un nombre, l’adresse est un objet et les amis sont un tableau. Si une valeur autre que celle-ci a été utilisée pour les mêmes props en tant que valeur, une erreur sera affichée dans la console comme ceci : Erreur de console pour les PropTypes incorrects Nous pouvons enchaîner n’importe lequel des éléments ci-dessus avec isRequired pour nous assurer qu’un avertissement est affiché si l’accessoire n’est pas fourni. Count.propTypes = { basicObject : PropTypes.object, nombres : PropTypes.objectOf(PropTypes.numbers), messages : PropTypes.instanceOf(Message), liste de contacts : PropTypes.shape({ nom : PropTypes.string.isRequired, téléphone : PropTypes.string.isRequired, }), } ; Type collectif Nous avons vu comment valider ou vérifier à quelle catégorie de type de données de base appartiennent les accessoires. Mais il existe de nombreuses autres façons de transmettre et d’utiliser les accessoires, comme les types collectifs tels que les tableaux de nombres, les chaînes de caractères, etc. Alors, qu’en est-il ? Nous pouvons également vérifier les props pour eux. Vous trouverez ci-dessous les différentes façons dont un type de données peut être combiné et utilisé. Types de tableaux Nous allons aborder ici toutes les possibilités qui peuvent être formées avec un tableau, avec leurs exemples, tout comme nous l’avons vu avec les types de base. Type Classe Exemple Tableau PropTypes.array [] Tableau de nombres PropTypes.arrayOf([type]) [1,2,3] Tableau de chaînes de caractères PropTypes.oneOf([arr]) [« Rouge », « Bleu »] Tableau d’objets PropTypes.oneOfType([types]) PropTypes.string, PropTypes.instanceOf(Title) Count.propTypes = { compte : PropTypes.array, utilisateurs : PropTypes.arrayOf(PropTypes.object), alarmColor : PropTypes.oneOf([‘red’, ‘blue’]), description : PropTypes.oneOfType([ PropTypes.string, PropTypes.instanceOf(Title) ]), } Types d’objets Tout comme les types de tableaux, voici quelques-uns des types d’objets collectifs : Type Classe Exemple Objet PropTypes.object {nom : « Anu »} Nombre Objet PropTypes.objectOf() {âge : 25} Objet Forme PropTypes.shape() {nom : PropTypes.string, téléphone : PropTypes.string} Instance PropTypes.objectOf() Nouveau message() Count.propTypes = { basicObject : PropTypes.object, nombres : PropTypes.objectOf(PropTypes.numbers), messages : PropTypes.instanceOf(Message), liste de contacts : PropTypes.shape({ nom : PropTypes.string, téléphone : PropTypes.string, }), } ; Vérification avancée des types Il existe de nombreux moyens autres que la vérification de type de base que nous pouvons utiliser pour vérifier nos props. Cette méthode se concentre principalement sur le code React plutôt que sur les types de données. … Lire la suite

Dans ce tutoriel, nous allons apprendre à construire des formulaires dynamiques dans React. En utilisant des formulaires dynamiques, nous pouvons ajouter des champs ou les supprimer en fonction de nos besoins. Alors, commençons. Comment créer un formulaire en React Commençons par créer un formulaire simple. La syntaxe est simple : importez ‘./App.css’ ; function App() { return ( ) ; } export default App ; Voici à quoi il ressemblera : Nous avons deux champs de saisie, qui sont le nom et l’âge. Mais ces champs sont statiques. Donc, nous allons les rendre dynamiques en utilisant React States. Comment rendre les formulaires dynamiques en React Créez un état appelé InputFields. Il aura un objet, avec les propriétés nom et âge. const [inputFields, setInputFields] = useState([ {nom :  », âge :  »} ]) Maintenant, faisons correspondre nos champs de formulaire à partir de leur état inputFields . import { useState } de ‘react’ ; importez ‘./App.css’ ; function App() { const [inputFields, setInputFields] = useState([ {nom :  », âge :  » } ]) return ( {inputFields.map((input, index) => { return ( ) })} ) ; } export default App ; Maintenant, nous ne verrons qu’un seul ensemble de champs de saisie, car nous n’avons qu’un seul objet dans l’état inputFields . Si nous ajoutons d’autres objets, nous verrons plusieurs champs de saisie. Comment ajouter les valeurs de l’état inputFields ? Maintenant, ajoutons les valeurs de l’état inputFields aux champs de saisie. import { useState } de ‘react’ ; importez ‘./App.css’ ; function App() { const [inputFields, setInputFields] = useState([ {nom :  », âge :  » } ]) return ( {inputFields.map((input, index) => { return ( ) })} ) ; } export default App ; Les valeurs seront input.name et input.age Ajoutons également un événement onChange qui s’exécutera lorsque nous taperons quelque chose dans les champs de saisie. Créez une fonction appelée handleFormChange. const handleFormChange = () => { } Affectez cette fonction aux champs de saisie en tant qu’événement onChange. handleFormChange(index, event)} /> handleFormChange(index, événement)} /> /> Cet événement onChange prend deux paramètres, index et event. Index est l’indice du tableau et event est la donnée que nous saisissons dans le champ de saisie. Nous les transmettons à la fonction handleFormChange . const handleFormChange = (index, event) => { } Mais le problème est que si nous essayons de taper quelque chose dans les champs de saisie, nous ne pourrons pas le faire. Parce que nous n’avons pas défini les états dans l’état formFields . Donc, faisons-le. const handleFormChange = (index, event) => { let data = […inputFields] ; } Stockons l’état de nos champs de saisie dans une variable appelée data en utilisant l’opérateur d’étalement (les trois points … ). Ensuite, nous allons cibler l’index de la variable data en utilisant le paramètre index, et le nom de la propriété, également. const handleFormChange = (index, event) => { let data = […inputFields] ; data[index][event.target.name] = event.target.value ; } Par exemple, supposons que nous tapions dans le champ de saisie avec l’index 0. Donc, nous spécifions l’index dans les données, et le nom de la propriété, en utilisant event.target.name. Et dans cet index de données, nous stockons les valeurs des champs de saisie en utilisant event.target.value. Maintenant, nous devons stocker ces données à nouveau dans le tableau inputFields en utilisant la méthode setInputFields . const handleFormChange = (index, event) => { let data = […inputFields] ; data[index][event.target.name] = event.target.value ; setInputFields(data) ; } Maintenant, si nous tapons quelque chose dans les champs de saisie, cela s’affichera dans les champs de saisie. Comment ajouter d’autres champs de formulaire Créons un bouton pour ajouter d’autres champs de formulaire. Ajouter plus.. Et une fonction, aussi, qui sera déclenchée lorsque ce bouton est cliqué. const addFields = () => { } Ajoutons la fonction au bouton via un événement onClick. Ajouter plus.. Maintenant, dans la fonction addFields, nous devons créer un objet. Et chaque fois que nous cliquerons sur le bouton, il sera poussé vers l’état inputFields , créant ainsi un nouveau champ de saisie. const addFields = () => { let newfield = {nom :  », age :  » } } Ensuite, définissez ce nouveau champ dans l’état inputFields . const addFields = () => { let newfield = { name :  », age :  » } setInputFields([…inputFields, newfield]) } Ici, nous définissons également les champs d’entrée existants à l’aide de l’opérateur d’étalement, conjointement avec le nouveau champ. Si nous cliquons maintenant sur le bouton Add Field, un nouveau champ de saisie sera créé. Comment créer un bouton de soumission Créons un bouton de soumission et une fonction pour voir nos données lorsque nous soumettons le formulaire. Soumettre Nous avons également besoin d’une fonction qui sera déclenchée lorsque nous cliquerons sur ce bouton. Elle enregistrera les données dans la console, à partir des champs de saisie. Elle possède également une méthode appelée e.preventDefault() qui empêchera le rafraîchissement de la page. const submit = (e) => { e.preventDefault() ; console.log(inputFields) } Ajoutez cette fonction au bouton Submit : Submit Et aussi dans la balise du formulaire : Si nous soumettons, nous verrons nos données dans la console : Comment supprimer les champs à l’aide d’un bouton de suppression Créons maintenant un bouton pour supprimer ces champs si nous ne les voulons pas. {inputFields.map((input, index) => { return ( handleFormChange(index, event)} /> handleFormChange(index, event)} /> – handleFormChange(index, event)} /> Supprimer ) })} Nous avons également besoin d’une fonction. const removeFields = () => { } Donc, attribuez cette fonction au bouton Supprimer. removeFields(index)}>Supprimer Nous passons l’index comme paramètre, qui est l’index des champs de saisie. Ensuite, recevez cet index dans la fonction. const removeFields = (index) => { } Et comme précédemment, nous devons créer une nouvelle variable et stocker l’état inputFields dans cette nouvelle variable. const removeFields = (index) => { let data = […inputFields] ; } Ensuite, nous devons diviser cette variable de données par l’index. Puis nous devons la stocker dans l’état inputFields en utilisant setInputFields. const removeFields = (index) => { … Lire la suite

Dans cet article, je vais vous guider dans la création d’un jeu de serpent en utilisant une application React. Il s’agit d’un simple jeu 2d construit à l’aide de TypeScript, et nous n’aurons pas besoin d’utiliser de bibliothèques graphiques tierces pour le construire. Voici ce que nous allons réaliser dans ce tutoriel : Snake est un jeu amusant auquel vous avez peut-être joué sur d’anciens téléphones fonctionnels comme les modèles Nokia 3310. Le concept est simple : le serpent se déplace à l’intérieur d’une boîte, et lorsqu’il capture un fruit/objet, vos points augmentent et le serpent grandit. Si le serpent touche les limites de la boîte ou entre en collision avec lui-même, le jeu est terminé. Cet article vous fournira toutes les compétences/étapes nécessaires pour créer votre propre jeu Snake à partir de zéro. Nous allons d’abord examiner les structures de code et leur logique. Puis j’expliquerai comment elles fonctionnent lorsqu’elles sont toutes connectées. Sans plus attendre, commençons. Table des matières Conditions préalables Avant de commencer à lire cet article, vous devez avoir une compréhension de base des sujets suivants : Qu’est-ce qu’un jeu de serpent ? Qu’allons-nous utiliser dans ce jeu ? Un jeu de serpent est un jeu d’arcade dans lequel un serpent se déplace dans une boîte. Votre score augmente en fonction du nombre d’objets/fruits que le serpent mange. Cela augmente également la taille du serpent. S’il entre en collision avec lui-même ou avec la limite de la boîte, le jeu est terminé. Vous pouvez en savoir plus sur l’histoire ou les origines du jeu en consultant le lien Wiki. Nous allons utiliser les outils suivants pour construire notre jeu : Redux : Pour créer et gérer l’état global de l’application. Redux-saga : Un middleware redux que nous utiliserons pour gérer les tâches asynchrones. Balise HTML Canvas : Nous l’utiliserons pour dessiner un objet comme un serpent et le fruit. React : Bibliothèque UI. Chakra-UI : Bibliothèque de composants. Qu’est-ce que redux ? Pourquoi l’utilisons-nous ? Redux est un conteneur d’état qui vous aide à créer et à gérer l’état global de votre application. Redux se compose de quelques parties de base comme : État global Magasin Redux Actions et créateurs d’actions Réducteurs Vous pouvez apprendre tout ce qui concerne les sujets ci-dessus et comment Redux fonctionne en interne dans la section de démarrage de la doc Redux. Nous utilisons la bibliothèque de gestion d’état Redux car elle nous aidera à gérer notre état global d’une manière plus simple. Elle nous permettra d’éviter le prop drilling. Elle nous permettra également d’effectuer des actions asynchrones complexes via un middleware. Vous pouvez en apprendre plus sur les middleware ici. Qu’est-ce que redux-saga ? Pourquoi l’utilisons-nous ? Redux-saga est un middleware qui nous aide à nous intercaler entre l’action dispatchée et le reducer du redux store. Cela nous permet d’effectuer certains effets secondaires entre l’action distribuée et le réducteur, comme la récupération de données, l’écoute d’actions particulières ou la mise en place d’abonnements, la création d’actions, et plus encore. Redux saga utilise des générateurs et des fonctions de générateur. Une saga typique ressemble à ceci : function* performAction() { yield put({ type : COPY_DATA, payload : « Bonjour » }) ; } performAction est une fonction génératrice. Cette fonction générateur va exécuter la fonction put. Elle crée un objet et le renvoie à la saga, en indiquant quel type d’action doit être exécuté avec quelle charge utile. Ensuite, l’appel put renvoie un descripteur d’objet indiquant quelle saga peut le reprendre plus tard et exécuter l’action particulière. NOTE : Vous pouvez en savoir plus sur les générateurs et les fonctions de générateur en vous référant à la section des prérequis. Maintenant la question se pose : pourquoi utilisons-nous le middleware redux-saga ? La réponse est simple : Il fournit une meilleure façon d’écrire des cas de tests unitaires, ce qui nous aidera à tester les fonctions du générateur d’une manière plus simple. Il peut vous aider à effectuer beaucoup d’effets secondaires et à fournir un meilleur contrôle sur les changements. Par exemple, lorsque vous voulez voir si une action X particulière est exécutée, puis exécuter l’action Y. Des fonctions comme takeEvery, all, etc. permettent d’effectuer ces opérations en toute simplicité. Nous en parlerons plus en détail dans une section ultérieure. Si vous n’êtes pas familier avec redux-saga, alors je vous recommande fortement de parcourir la documentation ici. Description du cas d’utilisation NOTE : Les diagrammes de contexte, conteneur et classe dessinés dans ce billet de blog ne suivent pas exactement les conventions de ces diagrammes. Je les ai approximés ici pour que vous puissiez comprendre les concepts de base. Avant de commencer, je vous suggère de vous documenter sur les c4models, les diagrammes de conteneurs et les diagrammes de contexte. Vous pouvez trouver des ressources à leur sujet dans la section des prérequis. Dans cet article, nous allons considérer le cas d’utilisation suivant : Créer un jeu de serpent. Le cas d’utilisation est assez explicite, et nous avons discuté de ce que le jeu de serpent implique ci-dessus. Vous trouverez ci-dessous le diagramme de contexte de notre cas d’utilisation : Diagramme de contexte du jeu de serpent Notre diagramme de contexte est assez simple. Le joueur interagit avec l’interface utilisateur. Plongeons plus profondément dans l’interface utilisateur du plateau de jeu et explorons les autres systèmes qui s’y trouvent. Diagramme de conteneur pour le jeu du serpent Comme vous pouvez le voir sur le diagramme ci-dessus, notre interface utilisateur de plateau de jeu est divisée en deux couches : Couche d’interface utilisateur Couche de données La couche UI est constituée des composants suivants : Calculatrice de score : Il s’agit d’un composant qui affiche le score chaque fois que le serpent mange le fruit. CanvasBoard : Il s’agit d’un composant qui gère la majeure partie de l’interface utilisateur de notre jeu. Sa fonctionnalité de base est de dessiner le serpent sur le canevas et de vider le canevas. Il assume également les responsabilités suivantes : Il détecte si le serpent est entré en … Lire la suite

Next.js est un cadre de rendu côté serveur basé sur React, qui est optimisé pour les moteurs de recherche. Construisons donc un clone d’Evernote en utilisant Next.js pour apprendre comment il fonctionne. Nous allons utiliser la pile technologique suivante : Next.js pour l’interface utilisateur Firebase pour la base de données et l’hébergement de notre application SASS pour les feuilles de style Alors, commençons. Comment créer une application Next Tout comme la commande que nous utilisons pour créer une application React, nous avons également une commande pour créer rapidement une application Next. Cela ressemble à ceci : npx create-next-app@latest # ou yarn create next-app Si vous utilisez npm, utilisez npx create-next-app@latest. Ou bien, si vous utilisez le gestionnaire de paquets Yarn, utilisez yarn create next-app. Mais d’abord, vous devez avoir Node.js installé sur votre système. Allez sur https://nodejs.org/en/download/ pour télécharger et installer Node. Donnez un nom au projet, qui est evernote-clone dans notre cas. Après que le projet ait fini de se créer, nous trouverons une structure de fichiers semblable à celle que nous voyons dans React. Démarrons l’application maintenant. Tapez simplement npm run dev, et voici ce que vous verrez dans votre terminal : Et tout comme React, Next est livré avec du code standard. Supprimons tout ce code et commençons par le tout début. Ouvrez index.js dans le dossier pages, et vous verrez tout ce code : import Head de ‘next/head import Image de ‘next/image importation de styles de ‘../styles/Home.module.css’ export default function Home() { return ( Bienvenue à Next.js ! Commencez par éditer{‘ ‘} pages/index.js Documentation → Trouvez des informations approfondies sur les fonctionnalités et l’API de Next.js. Apprendre → Apprenez à connaître Next.js dans un cours interactif avec des quiz ! Exemples → Découvrez et déployez des projets Next.js d’exemples passe-partout. Déployer → Déployez instantanément votre site Next.js vers une URL publique avec Vercel. Powered by{‘ ‘} ) } Effacez-le pour pouvoir repartir de zéro. Voici ce que vous devriez avoir maintenant : importe Head de ‘next/head’ importe les styles de ‘../styles/Home.module.css’ export default function Home() { return ( ) } Ce code nettoyé contient les balises Title et les balises Main, où nous pouvons écrire notre code. importe Head de ‘next/head’ importe les styles de ‘../styles/Home.module.css’ export default function Home() { return ( ) } Tous nos styles se trouvent dans Home.module.css, et c’est ainsi que nous créons une feuille de style. Comment installer SASS, Firebase et React Quill ? Installons maintenant SASS et Firebase. npm i firebase sass react-quill Utilisez la commande ci-dessus qui les installera tous en une seule fois. Laissez-moi vous expliquer comment nous allons utiliser chacun de ces outils : Firebase – Pour stocker nos données de notes dans le backend SASS – Nous utilisons SASS au lieu de CSS, car il fournit beaucoup de fonctionnalités différentes que nous n’avons pas en CSS. React Quill – Un éditeur de zone de texte riche pour les notes. Maintenant que vous les avez installés, continuons. Nous devons diviser notre écran en deux parties. La partie gauche contiendra l’option permettant de créer de nouvelles notes, tandis que la partie droite les affichera. Créez un div à l’intérieur du main, qui contiendra deux autres div. Chaque div pointe vers sa classe respective dans la feuille de style. Gauche Droite Maintenant, nous allons créer un fichier de feuille de style. Nommez-le Evernote.modules.scss. Et c’est le fichier où nous allons faire notre style. Arrangeons maintenant notre conteneur comme flex. .container { display : flex ; margin : 10px ; } .left{ largeur : 20rem ; } Nous avons un affichage de flex dans le conteneur, et une largeur de 20 rem pour le conteneur gauche. Cela donne le résultat suivant : Maintenant, créez un dossier dans les pages appelé components. Il contiendra tous nos micro-composants. Et dans le dossier components, créez un fichier appelé NoteOperations.js. Ensuite, importez ce composant dans le fichier principal index.js, et renvoyez-le dans le fichier principal. import NoteOperations de ‘./components/NoteOperations’ ; Droite Mais vous verrez tout de suite une erreur, parce que nous n’avons rien dans le composant NoteOperations. Créons un composant fonctionnel NoteOperation.js. export default function NoteOperations() { return ( <> ) } Pour l’instant, il renvoie un fragment vide. Donc, créons un bouton pour ajouter de nouvelles notes. importez styles de « ../../styles/Evernote.module.scss » export default function NoteOperations() { return ( <> Ajouter une nouvelle note ) } Ce sera notre sortie pour l’instant. Concevons notre bouton pour qu’il soit un peu plus joli. .button { width : 15rem ; hauteur : 2rem ; curseur : pointeur ; couleur de fond : noir ; couleur : whitesmoke ; border : black ; } Ces styles nous permettront d’obtenir le bouton suivant : Importons la police Roboto de Google Fonts pour l’utiliser dans nos notes. @import url(‘https://fonts.googleapis.com/css2?family=Roboto&display=swap’) ; Mettez-le en haut du fichier de la feuille de style afin d’utiliser la police, comme ceci : .button { largeur : 15rem ; hauteur : 2rem ; curseur : pointeur ; background-color : black ; couleur : whitesmoke ; bordure : noir ; font-family : ‘Roboto’ ; } Et maintenant vous verrez le changement de la police du bouton. Maintenant, ajoutons la fonction du bouton. Lorsque nous cliquons sur le bouton Ajouter une nouvelle note, une entrée de texte doit apparaître en bas. Tout d’abord, créons ce champ de texte : importe les styles de ‘../../styles/Evernote.module.scss’ export default function NoteOperations() { return ( <> Ajouter une nouvelle note ) } Ajoutons un peu de style à cet élément d’entrée : .input{ largeur : 15rem ; hauteur : 2rem ; outline : none ; border-radius : 5px ; border : 1px solid gray ; margin : 5px 0 ; } Voici à quoi ressemble notre entrée maintenant : Mais ce bouton ne doit apparaître que lorsque nous cliquons sur le bouton Ajouter une nouvelle note. Nous devons donc utiliser React State pour cela. import { useState } from ‘react’ (en anglais) const [isInputVisible, setInputVisible] = useState(false) ; Nous importons donc le hook useState de React et nous … Lire la suite