web-dev-qa-db-fra.com

Implémentation de JavaScript isomorphique (React JS) dans Wordpress?

Je suis sur le point de commencer un nouveau projet et j'aimerais incorporer React car je souhaite en savoir plus à ce sujet. Ce projet spécifique serait parfait pour démarrer car il n'est pas aussi sensible que le temps et si simple.

Pour prendre en charge le référencement, j'ai compris qu'il me fallait emprunter la voie isomorphe (c'est tout à fait nouveau pour moi) pour rendre le côté serveur JS. J'ai trouvé ceci mais je n'arrive pas à comprendre comment je l'applique dans une application Web basée sur Wordpress? Je cherchais des informations sur la façon de travailler avec Wordpress et React, mais il n'y a littéralement aucune information à ce sujet. Est-ce que quelqu'un avec un peu plus de perspicacité pourrait me donner quelques conseils et indications?

Si cela fait une différence, j'utilise Bedrock avec le tout nouveau Sage theme.

Merci!

6
INT

Je ne pense pas que l'utilisation de React.js sans Node.js (ou au moins V8 ou rhino, etc.) compte comme isomorphe, car isomorphique signifie que vous construisez JavaScript doit s'exécuter dans le navigateur ET sur le serveur . En particulier, utiliser WordPress signifie certainement que vous ne faites pas de javascript isomorphe (son logiciel PHP).

Vous pouvez utiliser WordPress en tant que serveur API REST et utiliser React en tant que client pour cela. Désormais, vous pouvez demander à WordPress de livrer vos ressources, mais vous pouvez également le placer dans un sous-répertoire et le traiter uniquement comme une application API avec une zone d'administration CMS, tout en plaçant les fichiers de votre site à la racine, sans passer par la configuration d'un thème. . (Le référencement deviendrait ici une préoccupation distincte que vous auriez à résoudre, en fonction du type d'application que vous développez.)

Vous parlez de référencement et de rendu côté serveur, donc je suppose que la partie que vous avez comprise est que vous voulez que le code HTML compilé soit livré aux robots d'exploration (au lieu de JS qu'ils ne comprendront pas), mais WordPress le fait par défaut (bien qu'avec PHP , pas JavaScript et donc, pas isomorphique), mais si votre préoccupation est seulement SEO, isomorphic n'est pas strictement nécessaire.

Vous pouvez avoir le thème de WordPress afficher tout ce dont vous avez besoin pour le référencement (de manière minimale), puis charger votre React (ou Angular ou whathaveyou) pour créer votre application pour les humains avec des navigateurs activés pour JavaScript (via le remplacement/remplacement DOM). Vous devrez ensuite veiller à ce que vos itinéraires correspondent aux permaliens de WordPress, ce qui est un peu délicat. Pas le même que isomorphic, mais assez bon.

Alternativement, vous pouvez utiliser React.js uniquement pour "améliorer" le thème (comme pour une section de commentaires), mais vous seriez principalement un développeur PHP/WordPress à ce stade.

Isomorphic est comme Meteor.js, et des projets comme celui-là, qui vous permettent d'éviter spécifiquement PHP (et d'éviter WordPress). Mutuellement exclusif vraiment. Si vous êtes vraiment intéressé par isomorphic, essayez Meteor.js et évitez d'utiliser WordPress.

12
WraithKenny

Je pense que nous ne sommes pas loin d’être en mesure d’atteindre cet objectif d’une manière assez sensée. Le site Web WordPress.com a déjà été déplacé vers une application JavaScript optimisée par une API REST avec Node.js et React.

Déplacer le logiciel WordPress principal vers des technologies plus récentes telles que celle-ci prendra du temps, mais si vous ajoutez des plugins tels que WordPress REST API , vous devez avoir tout ce dont vous avez besoin pour pouvoir démarrer avec React in WordPress.

Lecture pertinente: http://wesbos.com/wordpress-calypso-react/

4
AlecRust

Je construis une application dans Rails qui utilise fortement JS. C'est un bon projet sur lequel travailler car il me permet de comprendre le fonctionnement de React. Sachant ce que je sais de React, je vous recommande fortement de ne pas l'utiliser avec WP tant que vous ne l'aurez pas compris au début, je pense que votre processus d'apprentissage sera beaucoup plus long à essayer de le pirater dans WP.

Combiner React avec Wordpress donne l’impression de prendre une supercar en tout-terrain. Peut-être apprendre à conduire la supercar en premier.

2
Yosuke

Voici un exemple que je viens de rencontrer aujourd'hui.

USTWO.com a construit le site avec les mêmes exigences et son source est disponible ici.

https://github.com/ustwo/ustwo.com-frontend

Ils ont aussi une description agréable de la façon dont ils l’ont mis en place. Voir le diagramme ci-dessous.

 Check out the architecture diagram here 

Disclaimer: Ce n'est pas vraiment une réponse mais plutôt un lien de référence qui devrait être ajouté comme commentaire, si seulement j'avais assez de crédits

1
Raghav Tandon

Ce que vous essayez de faire est mieux réalisé en mettant un serveur node.js devant l’API wordpress. Vous avez besoin de node.js sur le serveur pour pouvoir réagir côté serveur.

Ici est un code qui montre comment rendre du contenu wordpress en tant que composants React sur le serveur et attacher les mêmes composants React sur le client.

Notez que dans ce scénario, vous bénéficiez des avantages de WordPress pour la création de contenu, mais pas pour la publication. Vous devez implémenter la publication à partir de zéro en tant que composants React.

1
liammclennan