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 página hasta una plataforma de comercio electrónico completa. WordPress usa PHP para toda la infraestructura de backend, como actualizaciones, API, autenticación, nivel 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.

Teniendo en cuenta el potencial y el poder crecientes de las aplicaciones de JavaScript para la web, así como las aplicaciones móviles nativas y de escritorio, API REST de WP intenta cerrar la brecha entre el legado de PHP central de WordPress y el desarrollo de JavaScript. Creo que este es un gran paso para WordPress por dos razones:

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

Es una situación de ganar-ganar. En este artículo, centraremos nuestra energía en construir una interfaz React para un backend de WordPress. Pero primero, echemos un vistazo a la API REST de WordPress.

Los 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 con nombre en código «Clifford» introdujo la infraestructura API REST real en el núcleo de WordPress. Los puntos finales reales aparecieron en la versión 4.7 de WordPress 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 tiene la intención de 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 contiene la representación textual de un objeto JavaScript. Almacena datos en un conjunto de pares clave-valor. Un ejemplo simple de JSON de una publicación de WP podría verse así:

{
id: 1,
"title": {
"rendered": "Hello World"
  },
  "content": {
"rendered": "Welcome to WordPress. This is your first
post. Edit or delete it, then start blogging!"
  }
}

La respuesta JSON completa que usa la API REST de WP generalmente contiene información adicional sobre la entrada, como metadatos. Tiene todo lo que necesita para crear un tema de interfaz de usuario o complemento para su aplicación.

Puntos finales

Los puntos finales de WordPress son muy accesibles para el público. Si estás usando la última versión de WordPress, solo tienes que unirte /wp-json/wp/v2 al final de la URL. Por ejemplo, puede acceder a puntos finales principales en 127.0.0.1/wp-json/wp/v2 si tiene una instancia de WordPress configurada en su host local. Si desea embellecer la salida, puede usar una extensión de navegador JSON que hará que JSON se vea bien en el navegador.

Los datos que se muestran en la 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 descargue los datos por usted.

¿Qué entendemos por ruta? Una ruta es una URL que se ha asignado a un método específico. El núcleo de WordPress lee la ruta y entiende que cada «/» representa una ruta o parámetro específico a seguir.

Por ejemplo, el punto final podría ser ‘/wp-json/wp/v2/posts/1’donde solicita una publicación con una identificación de 1. Las API de WordPress son útiles porque son bastante poderosas. Esto se traduce en poder obtener cualquier dato que desee de su sitio web y convertirlo en un punto final. Se admiten casi todas las funciones básicas de WordPress, así como todas las funciones futuras. Aquí hay una lista de las API de WordPress compatibles al momento de escribir este tutorial:

Los creadores de temas y los desarrolladores de complementos pueden crear puntos finales personalizados para sus aplicaciones. Si desea verificar todos los puntos finales disponibles, puede descargar una aplicación como Postman. Esto proporcionará una GUI diseñada específicamente para la exploración de 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 de cualquier aplicación web moderna. Esto es especialmente cierto para los archivos multimedia. Hay muchos complementos disponibles en WordPress que pueden hacer esto por ti; sin embargo, es posible que deba conectarse al servidor de WordPress para usarlos.

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

Ahora veamos cómo conectar un backend de WordPress a React.

Primeros pasos con Reaccionar

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

La forma más común de crear un proyecto React es ejecutarlo aplicación-crear-reaccionar. CRA ofrece un entorno conveniente 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 el entorno de desarrollo para usar las funciones de JavaScript más recientes, como ES6 y el paquete web. Además, create-react-app proporciona una experiencia agradable para los desarrolladores y optimiza su aplicación para la producción.

Debe tener Node> = 8.x y npm> = 5.2 en su computadora. Para crear un proyecto, ejecute los siguientes comandos:


npx create-react-app wp-react-demo


El comando anterior crea una plantilla de plantilla para nuestra aplicación React que llamamos wp-react-demo.


cd wp-react-demo
npm start


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

Si desea ver la estructura de directorios generada por create-react-app, se ve así:

.
├── 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 recursos necesarios para ejecutar la aplicación. El directorio src contiene todos los archivos JavaScript en los que trabajaremos y pasaremos mucho tiempo allí.

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

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

Este es el punto de partida donde React representa el árbol de componentes en el directorio raíz de la aplicación.

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

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

React intenta encontrar el elemento con la ID «raíz» en el documento y luego inyecta ingrediente para la raíz. De hecho, el componente de la aplicación se representa y de ahí proviene el logotipo giratorio de React. Puedes comprobarlo abriendo src / App.js expediente.

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;

Básicamente, así es como se ve un componente. Cada componente representa parte de la interfaz de usuario. Puede componer un componente dentro de otro y así obtener una estructura de árbol de componentes como esta:

Si te preguntas por qué podemos usar HTML en render(), esta es la magia de JSX. JSX es una extensión de sintaxis de JavaScript que le permite usar HTML simple en su archivo JavaScript. Puede leer más sobre esto en los documentos oficiales.

Voy a eliminar todo el contenido HTML y luego reemplazarlo

una etiqueta como esta:

<div>
<h2> WordPress Blog </h2>
</div>

Componentes y estado de reacción.

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

1. entrada (o entradas múltiples) comúnmente conocidas como accesorios.
2. 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 descargará todas las publicaciones disponibles y las mostrará al usuario. Para hacer esto, primero escribiremos un constructor para la clase e inicializaremos el estado en el constructor:

constructor (props){
   super(props);

   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

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

Descarga de datos y estado de actualización

Ahora que el componente se monta, necesita obtener los datos de publicación de la API y almacenarlos en un estado. Los datos de la publicación están disponibles en la siguiente URL:


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


Entonces, ¿dónde ponemos esta lógica? El constructor puede parecer una buena opción, ya que se llama cuando se crea el componente, pero no es la mejor opción. En cambio, vamos a usar algo conocido como el método del ciclo de vida. Se llama al método de ciclo de vida del componenteDidMount () después de montar el componente.

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 API. El parámetro a buscar () es la URL que queremos descargar. Fetch devuelve una promesa, que podemos evaluar con la cadena .then(). El primer bloque luego convierte la respuesta al formato json para que podamos ponerlo en un estado.

const { title, date, content } =  responseJson;

        this.setState({ title, date, content });

Entonces, ¿qué está pasando aquí? Primero, extraemos los campos de título, fecha y cuerpo del objeto responseJson. La extraña sintaxis que ve aquí se conoce como sintaxis de asignación de desestructuración. Como probablemente ya sepa, la API de WP devuelve mucha información que no necesitamos. La sintaxis de asignación de desestructuración le permite desempaquetar valores de un objeto en variables separadas.

Luego usamos this.setState () para actualizar el estado del componente. El método setState() toma como parámetro un objeto que será el estado actualizado.

Renderizando nuestra publicación en WordPress

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

render() {
   return (
     <div>
     {this.state.title.rendered}
     </div>
   );
 }
}

¡Darle una oportunidad!

Del mismo modo, puede representar la fecha incrustando {este.estado.fecha}. Sin embargo, el contenido almacenado en el estado contiene HTML real. Dado que el código HTML se devuelve desde el servidor, es seguro suponer que no hay peligro en renderizarlo. Entonces, para representar el contenido, deberá usar el atributo DangerlySetInnerHTML de la siguiente manera:

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

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

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 adicionales y clases de estilo. Puede guardar todos sus estilos en un archivo en el directorio src e importarlo a su App.js. Los estilos para este diseño se pueden encontrar en src / App.css. No olvide agregar la declaración de importación, de lo contrario, los estilos no funcionarán.

import './App.css';

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

resumen

¡Uf! Eso es mucha tierra en un día. Comenzamos con la API Rest de WordPress 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. WordPress hace que sea más fácil encontrar sus datos y usted sabe exactamente dónde buscarlos. Si eres nuevo en React, te lo recomiendo. Reaccionar a los documentos como un buen lugar para empezar. Si tiene alguna pregunta, no dude en preguntar en los comentarios.

¡Es la oferta de verano de Divi! Aparta por tiempo limitado 👇

Ahorre en productos Divi y Divi por tiempo limitado.

Acceso a ventas