Puck est l'éditeur visuel open source pour React, qui donne du pouvoir à la prochaine génération de créateurs de pages et de produits sans code. Donnez-nous une étoile sur GitHub ! ⭐️
Puck a connu une croissance rapide et c’est génial à regarder ! ? Les développeurs de tous horizons repoussent les limites de ce que cet éditeur visuel open source peut faire. Mais à mesure que de plus en plus de personnes se lancent dans Puck, une question revient sans cesse dans notre communauté Discord :
« Comment puis-je transmettre des données ou partager un état entre des composants dans Puck ? »
En d’autres termes : comment faire réagir un composant aux changements d’un autre ? Par exemple, vous pouvez créer un composant DropZone avec une entrée de recherche, afin que toutes les listes déposées à l'intérieur puissent lire sa valeur :
Au début, la magie intégrée de Puck pourrait vous faire penser qu'il gère l'état d'une manière unique. Mais voici le problème : Puck n'est que React, tout comme les composants que vous lui transmettez. Cela signifie que vous pouvez compter sur n'importe quelle bibliothèque d'état ou outil que vous utiliseriez normalement pour gérer et partager des données entre les composants. Pour cet article, je vais rester simple et vous apprendre à résoudre ce problème en utilisant Context.
Avant de commencer : je suppose que vous avez une compréhension de base de Puck et de son fonctionnement. Si vous êtes nouveau ici, ce n’est pas un problème : vous êtes invités à suivre ! Mais je vous recommande de consulter d'abord le guide de démarrage pour vous familiariser avec les bases
Pour faciliter les choses, j'ai préparé un projet React de base sur GitHub avec Puck préinstallé et prêt à fonctionner. Clonez-le et installez-le en exécutant les commandes suivantes dans votre terminal :
git clone https://github.com/FedericoBonel/basic-puck-app cd ./basic-puck-app npm install
Vous travaillez déjà sur un projet existant ? Aucun problème du tout ! Vous pouvez simplement installer Puck en tant que dépendance avec NPM :
npm i @measured/puck --save
Et si vous utilisez des frameworks comme Next.js ou Remix, Puck propose des recettes officielles pour rendre le processus de configuration fluide.
Pour ce tutoriel, je suppose que vous avez cloné le dépôt GitHub pour que les choses restent simples. Cela dit, les concepts et les étapes s'appliqueront à n'importe quelle configuration : mettez simplement à jour les noms de fichiers si nécessaire pour les adapter à la structure de votre projet.
Une fois votre projet prêt à démarrer, l'étape suivante consiste à configurer Puck. Ouvrez le fichier src/App.jsx et échangez son contenu avec le code ci-dessous. Cela configurera Puck avec une configuration de base pour glisser-déposer deux composants :
git clone https://github.com/FedericoBonel/basic-puck-app cd ./basic-puck-app npm install
Super ! Votre configuration de base est maintenant terminée. Passons ensuite à l'ajout d'un état partagé à votre éditeur.
React Context est la solution parfaite à notre problème car il offre un moyen simple de partager et de gérer des données sur tous vos composants, à la fois à l'intérieur et à l'extérieur de l'éditeur. Il crée un « état global » auquel vous pouvez accéder à tout moment, ce qui le rend idéal pour les scénarios dans lesquels vous devez extraire des données de l'extérieur de Puck, comme le thème sélectionné ou l'utilisateur connecté, ou partager des données entre les composants de Puck.
Dans ce guide, je vais vous présenter deux cas d'utilisation courants de React Context dans Puck :
La configuration du contexte dans Puck suit le même schéma que n'importe quelle application React. Vous créez un fournisseur de contexte pour définir et gérer votre état partagé, l'envelopper autour d'un composant parent et accéder ou mettre à jour l'état partout où cela est requis dans votre application.
Commencez par créer un nouveau contexte pour les données utilisateur. Ce contexte comprendra à la fois l'objet utilisateur et une fonction pour mettre à jour l'état de l'utilisateur.
npm i @measured/puck --save
Ensuite, créez un composant UserProvider qui enveloppera votre éditeur Puck. Ce fournisseur gérera l'état de l'utilisateur et le mettra à la disposition de tous les enfants.
Par souci de concision, j'utilise un utilisateur factice et la fonction setter renvoyée par useState.
// App.jsx
import { Puck, DropZone } from "@measured/puck";
import "@measured/puck/puck.css";
// The configs for your draggable components
// Ideally you would pull these out into their own files
const dashboardConfig = {
render: () => {
return (
<div
>
<p>Once you’ve updated the file, start the application in development mode, and navigate to http://localhost:5173 to verify everything is working as expected:<br>
</p>
<pre class="brush:php;toolbar:false">npm run dev
Pour intégrer le fournisseur à votre éditeur Puck, enveloppez simplement l'éditeur avec le UserProvider. Vous pouvez placer le UserProvider n'importe où au-dessus de l'éditeur dans votre arborescence de composants (comme dans votre fichier d'index), et cela fonctionnera très bien. Une fois que vous avez fait cela, tous les composants de votre éditeur auront accès au contexte !
git clone https://github.com/FedericoBonel/basic-puck-app cd ./basic-puck-app npm install
Vous pouvez désormais accéder au UserContext dans n'importe lequel de vos composants Puck. En suivant notre exemple de cas d'utilisation, mettons à jour le composant Dashboard afin qu'il affiche un message de « bienvenue » pour les utilisateurs connectés et un message de « bienvenue générique » pour les invités.
npm i @measured/puck --save
Maintenant, nous allons lire le contexte dans les composants qui sont déposés dans le fournisseur de contexte. Dans notre cas, nous consommerons le contexte dans le composant ArticleList, que l'utilisateur a imbriqué dans le tableau de bord via DropZone. Cela permet à ArticleList de répondre aux modifications apportées à la requête de recherche et de se mettre à jour en conséquence.
// App.jsx
import { Puck, DropZone } from "@measured/puck";
import "@measured/puck/puck.css";
// The configs for your draggable components
// Ideally you would pull these out into their own files
const dashboardConfig = {
render: () => {
return (
<div
>
<p>Once you’ve updated the file, start the application in development mode, and navigate to http://localhost:5173 to verify everything is working as expected:<br>
</p>
<pre class="brush:php;toolbar:false">npm run dev
Si vous vous dirigez maintenant vers l'éditeur, faites glisser un composant Dashboard sur le canevas, déposez une ArticleList à l'intérieur et modifiez le champ initialQuery, vous verrez la liste filtrer dynamiquement les articles en fonction de la requête. ?
Vous pouvez même étendre cette configuration en faisant en sorte que plusieurs composants de liste avec un contenu différent réutilisent le même contexte de requête.
? Et c'est tout ! Vous disposez désormais d’un état partagé entre les composants Puck imbriqués. ?
✅ Avantages :
❌ Inconvénients :
Il existe de nombreuses façons d'améliorer la gestion de l'état partagé dans Puck en fonction de la complexité de votre éditeur :
Faire passer la gestion d'état partagé dans Puck au niveau supérieur ouvre un monde de possibilités pour créer des constructeurs de pages dynamiques et réactifs. J’ai hâte de voir les applications uniques et puissantes que vous créerez en utilisant ces stratégies.
Donc, si cet article vous a inspiré pour construire quelque chose, si vous avez une question sur Puck ou si vous souhaitez contribuer, voici comment vous pouvez vous impliquer :
L'avenir de Puck et de l'innovation sans code est entre vos mains. Commencez à construire dès aujourd’hui et redéfinissons ensemble ce qui est possible ! ?
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
