Avez-vous besoin de savoir React en tant que développeur WordPress?

Points de base

• Le nouvel éditeur WordPress Gutenberg est construit sur React, une bibliothèque d'interface utilisateur open source Facebook. Mais à moins que vous ne prévoyiez de créer des blocs personnalisés, vous n'avez pas besoin d'apprendre React pour utiliser Gutenberg.
• React est une bibliothèque puissante et réutilisable qui permet aux développeurs de créer des interfaces utilisateur hautement interactives. Son DOM virtuel optimise le rendu et améliore les performances des applications, améliorant l'expérience utilisateur en rendant le site Web plus dynamique et réactif.
• Bien que l'apprentissage réagisse n'est pas nécessaire pour les développeurs WordPress, cela peut être une compétence précieuse. La maîtrise de React peut aider à mieux comprendre les concepts avancés de Gutenberg et améliorer la compétitivité de votre marché.

Cet article a été initialement publié par Torque Magazine et est reproduit ici avec permission.

WordPress version 5.0 utilisera le nouveau système d'édition de contenu Gutenberg pour piloter l'éditeur d'article WordPress. Gutenberg est un éditeur "basé sur des blocs". Lors de la création de contenu, tout le contenu est un bloc. Si vous avez un article avec un paragraphe, un titre et deux paragraphes, il s'agit de quatre blocs.

Gutenberg est livré avec un ensemble par défaut de blocs "Core" - paragraphes, titres, derniers articles, images, citations, etc. Si vous utilisez Gutenberg pour créer du contenu, vous pouvez utiliser ces blocs ou blocs personnalisés fournis par le plugin WordPress que vous avez installé sur votre site.

Gutenberg est une interface motivée par JavaScript. Plus précisément, il a été construit à l'aide de la bibliothèque d'interface utilisateur open source de Facebook «réagir». Cet article explique une partie du contenu de l'utilisation de JavaScript pour créer des blocs personnalisés qui peuvent être utilisés dans l'éditeur Gutenberg. Vous n'avez pas à utiliser JavaScript pour créer des blocs. Advanced Custom Fields (ACF) a récemment annoncé un système qui a l'air assez bien pour créer des blocs personnalisés à l'aide de PHP.

Qu'est-ce que la réaction?

Pour le développement frontal, l'opération de performance la plus faible est la lecture et l'écriture au DOM. Il est très difficile de se référer et de mettre à jour DOMS à travers les navigateurs. React fournit un meilleur système en implémentant des modèles de programmation réactifs et des abstractions DOM virtuelles.

Par exemple, sans interagir directement avec le DOM (par exemple, en utilisant jQuery.html () ou jQuery.val ()), React crée une représentation virtuelle du DOM. Nous l'appelons un Dom ou VDom virtuel. VDom est un objet JavaScript représentant une structure DOM. VDom recalcule chaque fois que votre code de réaction transmet des modifications à réagir. Après cela, React calcule les différences dans le DOM avant et après le changement. Ensuite, React (Actdom ou React Native En fait) ne met à jour que la partie du DOM qui doit être modifiée. Comment cela n'a pas d'importance.

Comment utiliser React dans Gutenberg?

React est une bibliothèque pour créer des composants réutilisables. Puisqu'ils sont réutilisables, nous pouvons combiner des interfaces avec des composants. Il s'agit d'un projet open source créé par Facebook.

Tout est un bloc. Texte, images, galeries, widgets, codes courts et même extraits HTML personnalisés, qu'il soit ajouté via des plugins ou autrement. Il vous suffit de maîtriser une interface: l'interface de bloc, puis vous savez tout faire. — - Manuel de Gutenberg

Les blocs sont l'unité de base de Gutenberg. Nous combinons du contenu avec un ou plusieurs blocs.

Les composants

sont des unités atomiques de React, et nous utilisons des composants pour combiner les applications React. Gutenberg est créé à l'aide de React afin que chaque bloc se compose d'un ou plusieurs composants.

Il est important de noter que je vais introduire cela plus loin dans cette série, mais Gutenberg a ajouté une fine couche d'abstraction en plus de réagir. Dans notre code Gutenberg, nous utiliserons WP.CreateElement au lieu de React.CreateElement. Cela fonctionne de la même manière, mais lorsque l'API de React change, WordPress peut décider quand prendre en charge ces modifications et fournir des emballages compatibles en arrière, ou décider de ne pas les soutenir.

C'est un bon plan pour l'avenir, mais pour l'instant, c'est juste réagi.

Dois-je savoir réagir pour se développer à l'aide de Gutenberg?

donc cela soulève une question importante, avez-vous besoin d'apprendre à réagir? inutile. À moins que vous ne vouliez créer vos propres blocs, rien de tout cela n'a d'importance. Si vous souhaitez utiliser uniquement des blocs fournis par le noyau ou le plugin, vous n'avez jamais besoin de créer votre propre type de bloc.

non requis. Mais ...

Vous pouvez créer un bloc de base sans avoir à en apprendre trop sur JavaScript. Consultez ce bloc d'exemple de base, qui est simplifié à partir de l'exemple officiel de Gutenberg:

<code class="language-javascript">( function( blocks, element ) {
    var el = element.createElement;
    blocks.registerBlockType( 'namespace/block-name', {
        title: __( 'Example: Basic', 'gutenberg-examples' ),
        icon: 'universal-access-alt',
        category: 'layout',
        edit: function() {
            return el(
                'p',
                {},
                'Hello World, step 1 (from the editor).'
            );
        },
        save: function() {
            return el(
                'p',
                {},
                'Hello World, step 1 (from the frontend).'
            );
        },
    } );
}(
    window.wp.blocks,
    window.wp.element
) );</code>

La seule chose qui est susceptible d'être plus récente est d'utiliser WP.CreateElement (dans cet exemple, c'est dans la variable "El") pour créer HTML. C'est une façon fantaisie de créer des éléments HTML de type "P". Je couvrirai cela dans le prochain article de cette série.

WordPress a une couche d'abstraction ci-dessus réagir, donc tout ce que vous devez vraiment savoir, ce sont certaines fonctions: wp.CreateElement, pour créer HTML, et setAttribute (), pour mettre à jour les propriétés de blocs.

Je vous suggère de lire la section Créer des blocs du manuel Gutenberg, puis de consulter l'exemple de référentiel et l'exemple de code pour l'atelier WordCamp Miami 2018 Gutenberg. Tout ce code que vous pouvez utiliser sans plonger dans React.

Besoin, si ...

Si vous avez juste besoin de faire des blocs simples, peut-être qu'un ou deux contrôles, vous n'avez pas besoin de comprendre le contenu de React au-delà de ces deux concepts que j'ai mentionnés plus tôt. Cependant, si vous souhaitez créer un bloc plus complexe, partagez des composants entre Gutenberg et d'autres applications React, par exemple, l'écran des paramètres WP-Admin de votre plug-in ou l'application mobile.

React est une bibliothèque très intéressante avec laquelle jouer, et Masterring React est une compétence très digne du marché. Plus important encore, une fois que vous avez appris React, vous pouvez plus facilement comprendre les concepts plus avancés de Gutenberg - gestion de l'état, tests unitaires, etc.

comment apprendre React pour WordPress et Gutenberg

C'est le début d'une série d'articles sur le développement de React de Gutenberg. La prochaine fois, je couvrirai les bases React, puis comment les appliquer dans le bloc Gutenberg. À partir de là, nous ferons des blocs dynamiques, puis examinerons la gestion et les tests de l'État.

Sur mon site Web, je répertorie les discours de développeur Gutenberg que vous pourriez trouver utiles. Dans cette série, j'expliquerai le concept React, mais si vous voulez creuser JavaScript et React, Wes Bos et Zac Gordon offrent d'excellents cours sur React et JavaScript pour vous faire démarrer.

Questions fréquemment posées (FAQ) sur React et WordPress Development

Quels sont les avantages de l'utilisation de React pour le développement WordPress?

React est une puissante bibliothèque JavaScript qui permet aux développeurs de créer des interfaces utilisateur hautement interactives. Son architecture basée sur les composants permet la réutilisation du code, ce qui rend le développement plus rapide et plus efficace. De plus, le DOM virtuel de React optimise le rendu et améliore les performances de l'application. Lorsqu'il est utilisé dans WordPress Development, il peut améliorer l'expérience utilisateur en rendant le site Web plus dynamique et réactif.

Comment intégrer React avec WordPress?

React peut être intégré à WordPress via l'API WordPress REST. Cela vous permet d'obtenir des données de votre site WordPress et de les utiliser dans votre application React. Vous pouvez créer des points de terminaison personnalisés dans un thème ou un plug-in WordPress, puis utiliser des demandes HTTP pour récupérer ou envoyer des données à partir de l'application React.

Qu'est-ce que CMS WordPress sans tête et comment cela se rapporte-t-il à réagir?

CMS WordPress sans tête est une configuration WordPress où le frontal (la partie de l'interaction utilisateur) est séparé de l'arrière-end (la partie de la gestion du contenu). Cela permet aux développeurs de construire des fronts en utilisant toutes les technologies qu'ils préfèrent, y compris React. Cette configuration peut offrir une plus grande flexibilité et des améliorations des performances, car le frontal peut être géré séparément et optimisé indépendamment de l'arrière.

Puis-je utiliser React avec mon thème WordPress existant?

Oui, vous pouvez utiliser React avec votre thème WordPress existant. Cependant, cela nécessite une certaine compréhension de WordPress et React, car vous devez modifier le code du thème pour intégrer les composants React. Alternativement, vous pouvez utiliser des thèmes conçus spécifiquement pour React, tels que les thèmes WordPress sans tête.

Qu'est-ce que la frontière et comment cela se rapporte-t-il à WordPress et réagit?

La frontière

est un cadre gratuit et open source pour construire des thèmes WordPress à l'aide de React. Il fournit un moyen de simplifier les connexions WordPress et réagir, gérer de nombreuses configurations complexes pour vous. La frontière optimise également votre thème React pour le rendu côté serveur, ce qui améliore les performances et le référencement.

Quels sont les inconvénients de l'utilisation de React avec WordPress?

Bien que React peut améliorer considérablement l'interactivité et l'expérience utilisateur des sites Web WordPress, sa courbe d'apprentissage est plus abrupte que le développement traditionnel WordPress. Il nécessite également différents paramètres d'hébergement, en particulier pour les sites WordPress sans tête, ce qui peut ajouter de la complexité.

Dois-je savoir que React pour devenir un développeur WordPress?

Bien que la compréhension de réagir ne soit pas une exigence nécessaire pour devenir un développeur WordPress, cela peut être une compétence précieuse. Alors que WordPress continue d'évoluer, de plus en plus de pièces sont construites en utilisant React. Apprendre à react peut vous ouvrir plus d'opportunités en tant que développeur WordPress.

Comment apprendre React pour le développement WordPress?

Il existe de nombreuses ressources pour apprendre React, y compris les tutoriels en ligne, les cours et la documentation. Pour appliquer React spécifiquement au développement WordPress, vous pouvez explorer la documentation officielle de l'API WordPress REST ou les tutoriels sur l'intégration de React avec WordPress.

Puis-je utiliser d'autres bibliothèques ou frameworks JavaScript avec WordPress?

Oui, bien que React soit généralement utilisé avec WordPress, surtout après l'introduction de l'éditeur Gutenberg, vous pouvez utiliser n'importe quelle bibliothèque ou cadre JavaScript que vous préférez. Cela inclut Vue.js, Angular et de nombreux autres cadres.

Quel est l'avenir de React et WordPress?

L'avenir de React et WordPress semble prometteur. Avec l'introduction des éditeurs de Gutenberg construits avec React et la popularité croissante des paramètres WordPress sans tête, l'utilisation de React dans le développement WordPress devrait continuer d'augmenter.

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!