React JS para usuarios de WordPress: una introducción básica

Durante más de 15 años, WordPress ha sido la solución CMS más popular y completa que le permite crear cualquier cosa, desde una cartera de una sola página hasta una plataforma de comercio electrónico completa. WordPress usa PHP para toda su infraestructura de backend, como actualizaciones, API, autenticación, capa de base de datos y la mayor parte de la interfaz. Sin embargo, al igual que otros marcos populares, WordPress también se ha visto obligado a evolucionar en los últimos tiempos.

Dado el creciente potencial y el poder de las aplicaciones de JavaScript para la web, así como las aplicaciones móviles nativas y de escritorio, la API REST de WP intenta cerrar la brecha entre el legado del núcleo PHP de WordPress y el auge de JavaScript. Creo que este es un gran paso para WordPress por dos razones:

  1. Los sitios web de WP existentes pueden usar React/Vue u otra biblioteca frontend para crear una mejor experiencia de interfaz de usuario.
  2. Por el contrario, los desarrolladores web obtienen un CMS sin cabeza estándar de la industria que se puede integrar fácilmente con la pila de su elección.

Esa es una situación en la que todos ganan. En este artículo, centraremos nuestra energía en crear una interfaz React para el backend de WordPress. Pero primero, echemos un vistazo a la API REST de WordPress.

Conceptos básicos de la API REST de WordPress

El desarrollo de la API REST de WP comenzó hace unos años y se diseñó inicialmente como un complemento de función independiente. WordPress v4.4, cuyo nombre en código es ‘Clifford’, introdujo la infraestructura real de la API REST en el núcleo de WordPress. Los puntos finales reales aparecieron en WordPress v4.7, con el nombre en código ‘Vaughan’. La API de WP le permite usar WordPress como un CMS sin cabeza que es fácil de usar, estable y compatible con JSON.

JSON

JSON es el formato preferido si va a integrar WordPress con una pila de JavaScript. JSON es similar a XML en el sentido de que nos brinda la capacidad de transferir datos de manera eficiente utilizando una sintaxis muy legible.

JSON es en realidad una cadena que comprende una representación basada en texto de un objeto de JavaScript. Almacena datos en un conjunto de pares clave-valor. Un ejemplo simple de JSON de una publicación de WP puede verse así:

01
02
03
04
05
06
07
08
09
10
{
id: 1,
"title": {
"rendered": "Hello World"
  },
  "content": {
"rendered": "Welcome to WordPress. This is your first
post. Edit or delete it, then start blogging!"
  }
}

Una respuesta JSON completa que usa la API REST de WP generalmente incluye información adicional sobre la publicación, como metadatos. Tiene todo lo que necesita para crear un tema frontal o un complemento para su aplicación.

Los puntos finales

Los puntos finales de WordPress son muy accesibles para el público. Si está ejecutando la última versión de WordPress, simplemente debe agregar /wp-json/wp/v2 al final de la URL. Por ejemplo, puede acceder a los puntos finales básicos en 127.0.0.1/wp-json/wp/v2 si configuró una instancia de WordPress en su servidor local. Si desea embellecer la salida, puede usar una extensión de visor JSON que hace que el JSON se vea bonito en su navegador.

Los datos que se muestran en su pantalla son esencialmente el contenido y la metainformación en formato JSON. Lo que ha hecho aquí es definir una ruta y pedirle a su navegador que obtenga los datos por usted.

¿Qué entendemos por ruta? Una ruta es una URL asignada a un método particular. El núcleo de WordPress lee la ruta y entiende que cada ‘/’ representa una ruta o parámetro específico que debe seguirse.

Por ejemplo, un punto final puede ser ‘/wp-json/wp/v2/posts/1’ , donde solicita una publicación con una identificación equivalente a 1. Las API de WordPress son útiles porque son bastante extensas. Esto se traduce en la capacidad de tomar cualquier dato de su sitio web y convertirlo en un punto final. Se admiten casi todas las funciones principales de WordPress y también se admitirán todas las funciones futuras. Aquí hay una lista de las API de WordPress compatibles al momento de escribir este tutorial:

Recurso Ruta básica
Publicaciones /wp/v2/mensajes
Publicar revisiones /wp/v2/revisiones
Categorías /wp/v2/categorías
Etiquetas /wp/v2/etiquetas
Paginas /wp/v2/páginas
Comentarios /wp/v2/comentarios
Taxonomías /wp/v2/taxonomías
Medios de comunicación /wp/v2/media
Usuarios /wp/v2/usuarios
Tipos de publicaciones /wp/v2/tipos
Estados de publicación /wp/v2/estados
Ajustes /wp/v2/configuración

Los desarrolladores de temas, así como los desarrolladores de complementos, pueden crear puntos finales personalizados para su aplicación. Si desea consultar todos los diferentes puntos finales disponibles, puede descargar una aplicación como Postman. Esto le proporcionará una GUI especialmente diseñada para explorar las API. Además, puede realizar llamadas API directamente a aplicaciones de terceros sin tener que depender de complementos.

Tomemos un ejemplo. Cargar archivos y mantener múltiples versiones es un requisito integral para cualquier aplicación web moderna. Esto es particularmente cierto en el caso de los archivos multimedia. En WordPress, hay una gran cantidad de complementos disponibles que pueden hacer esto por usted; sin embargo, es posible que deba realizar llamadas al servidor de WordPress para usarlos.

Con la API de WP, la lógica de manejo de medios se puede abstraer de WordPress. Puede realizar todas las llamadas API de terceros directamente desde la interfaz, lo que es excelente en términos de separación de preocupaciones. Puede usar una biblioteca como Cloudinary para manipular las imágenes y otros archivos multimedia sobre la marcha y luego subirlos a la nube. Una vez cargada, la URL de la imagen se puede almacenar en el backend de WP. Las opciones son infinitas y puedes combinar las piezas de la forma que mejor te parezca.

Veamos ahora cómo conectar el backend de WordPress con React.

Primeros pasos con React

React es una biblioteca front-end declarativa para crear interfaces de usuario y aplicaciones interactivas en la web. Con React, puede componer piezas independientes más pequeñas de código reutilizable conocidas como componentes. Creemos nuestro primer componente creando un proyecto React.

La forma más popular de crear un proyecto React es ejecutando create-react-app . CRA ofrece un entorno cómodo para aprender React y es la mejor manera de comenzar a crear una nueva aplicación de una sola página si es un principiante. Configura su entorno de desarrollo para que pueda usar las funciones de JavaScript más recientes, como ES6 y el paquete web. Además, create-react-app brinda una buena experiencia de desarrollador y optimiza su aplicación para la producción.

Deberá tener Node >= 8.x y npm >= 5.2 en su máquina. Para crear un proyecto, ejecute los siguientes comandos:


npx create-react-app wp-react-demo

El comando anterior crea una plantilla repetitiva para nuestra aplicación de reacción que hemos llamado wp-react-demo .


cd wp-react-demo
npm start

Si todo va bien, debería poder servir la aplicación recién creada en un servidor de desarrollo en http://localhost:3000/.

Si tiene curiosidad por ver la estructura de directorios generada por create-react-app, así es como se ve:

.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock

El directorio público contiene todos los activos necesarios para iniciar la aplicación. El directorio src comprende todos los archivos JavaScript en los que trabajaremos y pasará mucho tiempo allí.

Cuando visita localhost:3000, se carga el archivo index.html. Si abre el archivo public/index.html, no hay mucho allí. Pero encontrará esta línea en algún lugar en el medio:

01
<div id="root"></div>

Ese es el punto de partida donde React convierte el árbol de componentes en la raíz de la aplicación.

¿Qué significa eso? Dirígete al directorio src y abre index.js .

01
02
03
04
05
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
ReactDOM.render(<App />, document.getElementById('root'));

React intenta encontrar un elemento con id «raíz» en el documento y luego inyecta el componente en la raíz. En realidad, el componente de la aplicación se procesa y de ahí proviene el logotipo giratorio de React. Puede verificarlo abriendo el archivo src/App.js .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}
 
export default App;

Esto es básicamente lo que parece un componente. Cada componente representa una parte de su interfaz de usuario. Puede componer un componente dentro de otro y así es como obtiene una estructura de árbol de componentes como esta:

Si se pregunta por qué podemos usar HTML dentro de render(), esa es la magia de JSX. JSX es una extensión de sintaxis para JavaScript y le permite usar HTML simple en un archivo JavaScript. Puedes leer más sobre esto en los documentos oficiales.

Voy a eliminar todo el contenido HTML y luego reemplazarlo con un

etiqueta como esta:

01
02
03
<div>
<h2> WordPress Blog </h2>
</div>

Reaccionar Componentes y Estado

Los componentes son los bloques de construcción en React. Cada componente puede tener

  1. una entrada (o entradas múltiples) comúnmente conocidas como props.
  2. un estado que es local para el componente
  3. métodos que representan algo (por ejemplo: render()) o manejan alguna lógica comercial

Construiremos un componente que recuperará todas las publicaciones disponibles y se las mostrará al usuario. Para hacerlo, primero escribiremos un constructor para la clase e inicializaremos el estado en el constructor:

01
02
03
04
05
06
07
08
09
constructor (props){
   super(props);
 
   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

El estado es un objeto JSON. Hemos declarado propiedades de título, fecha y contenido dentro del constructor. El título y el contenido son objetos, mientras que la fecha es una matriz.

Obtener los datos y actualizar el estado

Ahora, cuando el componente se monta, necesita obtener los datos de las publicaciones de la API y almacenarlos en el estado. Los datos de las publicaciones están disponibles en la siguiente URL:


http://localhost/wp-json/wp/v2/posts/

Entonces, ¿dónde ponemos esta lógica? El constructor puede sonar como una buena opción porque se invoca cuando se crea el componente, pero no es la mejor opción. En su lugar, vamos a utilizar algo conocido como método de ciclo de vida. Se llama al método de ciclo de vida de componentDidMount() una vez que se ha montado el componente.

01
02
03
04
05
06
07
08
09
10
componentDidMount() {
       return fetch(`http://wordpress.com/wp-json/wp/v2/posts/`)
       .then((response) => response.json())
       .then((responseJson) => {
        // Update state here        
       })
       .catch((error) => {
         console.error(error);
       });        
 }

Usamos fetch, que es el estándar de facto en JavaScript para realizar llamadas a la API. El parámetro para fetch() es la URL que queremos obtener. Fetch devuelve una promesa que podemos evaluar mediante una cadena de .then(). El primer bloque luego convierte la respuesta al formato json para que podamos colocarlo en el estado.

01
02
03
const { title, date, content } =  responseJson;
 
        this.setState({ title, date, content });

Entonces, ¿qué pasa aquí? Primero extraemos los campos de título, fecha y contenido del objeto responseJson. La extraña sintaxis que ve aquí se conoce como sintaxis de asignación de desestructuración. Como ya sabrá, la API de WP devuelve mucha información que no necesitamos. La sintaxis de asignación de desestructuración hace posible descomprimir valores del objeto en distintas variables.

A continuación, usamos this.setState() para actualizar el estado del componente. El método setState() acepta un objeto como parámetro que será el estado actualizado.

Representando nuestra publicación de WordPress

El método render devuelve JSX que discutimos anteriormente. A diferencia de HTML puro, en realidad puede incrustar expresiones en JSX. Por ejemplo, si necesita representar el título de la publicación obtenida y nada más, puede hacer esto:

01
02
03
04
05
06
07
08
render() {
   return (
     <div>
     {this.state.title.rendered}
     </div>
   );
 }
}

¡Intentalo!

Del mismo modo, puede representar la fecha incrustando {this.state.date} . Sin embargo, el contenido almacenado en el estado comprende HTML real. Dado que el HTML se devuelve desde el servidor, es seguro suponer que no hay peligro en renderizarlo. Entonces, para representar el contenido, necesitará peligrosamente el atributo SetInnerHTML de la siguiente manera:

01
02
03
04
<div
    className= "content"
    dangerouslySetInnerHTML={{ __html: this.state.content.rendered }}>
</div>

Aquí está el método render() en acción.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
render() {
   return (
     <div>
       <div>
             <div className="row">
               <div className="leftcolumn">
                 <div className="card">
                   <div className= "title">
                     <h1>{this.state.title.rendered}</h1>
                     <p> {this.state.date} </p>
                   </div>
                 
                   <div
                     className= "content"
                     dangerouslySetInnerHTML={{ __html: this.state.content.rendered }} />
                 </div>
               </div>
             </div>
           </div>
     </div>
   );
 }
}

He agregado algunas etiquetas y clases adicionales para diseñar. Puede escribir todos sus estilos en un archivo en el directorio src e importarlo a su App.js. Puede encontrar los estilos para este proyecto en src/App.css . No olvide agregar una declaración de importación, de lo contrario, los estilos no funcionarán.

01
import './App.css';

Eso es todo. Ha creado un front-end básico para el backend de su API de WordPress utilizando React. Así es como debería verse la publicación predeterminada de Hello World en nuestra aplicación:

Resumen

¡Uf! Eso es mucho terreno cubierto en un solo día. Comenzamos con WordPress Rest API y luego nos familiarizamos con los puntos finales de la API. Luego comenzamos a crear una aplicación React desde cero que básicamente muestra una publicación de WordPress.

Usar React con WordPress es lo mismo que usar React con cualquier otra API de back-end. Con WordPress, es más fácil encontrar datos y sabe exactamente dónde buscar. Si acaba de comenzar a explorar React, le recomiendo React docs como un buen lugar para comenzar. Si tiene alguna pregunta, no dude en preguntar en los comentarios.