A développement Application API rest – Partie 4: créer un site WordPress basé sur React
Dans le dernier épisode de la famille d’applications API rest, nous avons commencé à examiner la partie avant du puzzle et à choisir React comme solution que nous utiliserons. La raison en est simple: il est rapide, bien documenté et soutenu par Facebook, l’un des plus grands joueurs de l’industrie. Pour vérifier si nous pouvons faire parler WordPress et React entre eux, nous avons téléchargé le kit React starter localement et écrit un appel API rapide pour afficher n’importe quelle donnée dans l’installation WordPress locale. Bien que nos tests aient été couronnés de succès, nous n’avons pas été en mesure de comprendre exactement les détails des tests. Cette fois – ci, nous aborderons ce problème avec un aperçu plus structuré de la façon de combiner une application React simple et de l’utiliser pour visualiser les données.
Commençons par un aperçu de ce que nous faisons. Nous nous inspirerons de l’excellent article d’introduction de per Harold Borgen sur React. Si vous êtes ici pour une réaction froide, il vaut également la peine de voir son film de réaction. Terminer JS dans les 8 minutes avant de continuer. Nous allons essayer de combiner une application super simple d’une page avec trois parties mobiles majeures: une référence aléatoire de Thoreau (sortie WordPress), une image appropriée et un bouton qui vous permet de télécharger une autre référence aléatoire.
Voici un bref rappel: Nous sommes en train de créer des pages d’index. HTML dans le répertoire principal de notre site http:\/\/www.thoreauapp.dev\/ Local Le kit React starter se trouve dans le même répertoire et nous avons inclus les fichiers associés dans le titre. Vous remarquerez également
Nous appelons la méthode createclass sur l’objet React pour définir le premier composant. Nous avons également passé un objet de spécification comme suit:
Var thoreauapp = réaction. Créer une classe créer une classe ({0}
Rendu: fonctions () {
Retour (
La cohérence stupide est l’esprit d’un esprit faible.
);
}
}); Nous allons bientôt définir beaucoup de choses dans un objet spécifique, mais nous allons commencer par créer une méthode de rendu de base. C’est ce que React utilise chaque fois qu’il redessine le contenu d’un composant. Si vous mettez à jour votre page de navigateur avec enthousiasme en ce moment, vous serez le bienvenu (malheureusement), absolument rien. C’est parce qu’à ce stade, nous n’avons défini qu’un seul élément potentiel et nous ne l’avons pas encore mis en pratique. Utilisons maintenant reactdom pour résoudre ce problème. Offre:
Domaine de réaction. Rendu , Documentation Getelementbyid (\
Nous avons chargé la Bibliothèque React associée. Nous avons défini la zone à charger sur la page
Notre contenu React. Nous travaillons dans le label
Il ne fait aucun doute que les puristes du CSS s’accrochent à leurs perles dès qu’ils y pensent, mais cette peur est insignifiante par rapport au désespoir ressenti par d’autres face au Panorama moderne du CSS React.
Rendu: fonctions () {
Var thoreauappstyle = {
Couleur de fond: \
Couleur: \
Emballage: 20,
Largeur: 550,
Marge: \
Fontfamily: \
Taille de la police: 22,
Fontweight: \
}
Retour (
);
}
}); Il en résultera les résultats suivants:
Nous ne gagnerons pas de prix de design, mais c’est suffisant pour prouver que nous avons un certain contrôle.
Après ce court détour, allons plus loin et divisons les choses en plusieurs parties. Ajouter des sous – composants maintenant que nous avons quelque chose sur la page et que nous avons des idées vagues sur la façon de styliser les éléments, organisons un P
Sélection des pages. Getinitialstate est appelé automatiquement une fois lors du chargement et peut être utilisé pour supprimer le Groupe: getinitialstate: function () {
Renvoie {data: [], selectedquote: ‘};
}, puis nous appellerons réellement notre API WordPress en utilisant componentdidmount. Dans cet exemple, nous utilisons jquery pour faire une requête Ajax réelle. Il stockera les résultats de la requête {dans le composant en utilisant setstate: componentdidmount: function ()
$. Ajax
URL: ceci. Accessoires. URL des données,
Type de données: \
Cache: false,
Succès: fonctions (données)
Voilà. Définir l’état ({données: données});
Voilà. Sélectionnez andomquote ();
}. Liaison (ceci),
Erreur: fonctions (xhr, Status, Err) {
Console. Erreur (this.props.url, Status, err.tostring ();
}. BIND (this)
});
}, nous appellerons également une autre fonction ici, sélectionnerons une citation aléatoire dans l’ensemble de résultats et l’attribuerons à un état spécifique: selectrandomquote: function () {
Var randomnumber = maths. Plancher (math.random () * ceci. Statut Données Longueur);
Var selectedquote = ceci. Statut Date [no];
Voilà. Définir l’état ({selectedquote: selectedquote.content.rendered});
}, nous devons maintenant entrer cette information dans la composante devis. Nous le ferons en le passant comme un objet appelé quota:
Notre mission ultime
Quelques interactions de base ont été ajoutées aujourd’hui. Nous allons le faire aussi facilement que possible en ajoutant un bouton rapide dans thoreauapp qui appelle la fonction selectrandomquote précédente pour changer l’état: Return
); Grâce à la magie de React, nos boutons peuvent maintenant rendre le contenu avec un nouveau devis à chaque fois qu’ils sont pressés (en utilisant les données déjà téléchargées). Notre travail d’aujourd’hui est terminé!