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

Desde hace más de 15 años, WordPress ha sido la solución de 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 del frontend. 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 JavaScript para web, así como las aplicaciones móviles nativas y de escritorio, la API WP REST intenta cerrar la brecha entre el legado del núcleo PHP de WordPress y el surgimiento 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 de interfaz 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, vamos a centrar nuestra energía en la construcción de 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 WP REST comenzó hace unos años y se diseñó inicialmente como un complemento de funciones independiente. WordPress v4.4, con nombre en código '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 JavaScript. Almacena datos en un conjunto de pares clave-valor. Un ejemplo simple de JSON de una publicación de WP puede 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!"
  }
}

Una respuesta JSON completa utilizando la API WP REST generalmente incluye información adicional sobre la publicación, como metadatos. Tiene todo lo que necesita para crear un tema de front-end 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 ha configurado una instancia de WordPress en su localhost. Si desea embellecer la salida, puede usar una extensión de visor JSON que hace que 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 en 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. Casi todas las funcionalidades principales de WordPress son compatibles y todas las funciones futuras también serán compatibles. Aquí hay una lista de las API de WordPress compatibles en el momento de escribir este tutorial:

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

Pongamos 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 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 WP API, la lógica de manejo de medios se puede abstraer de WordPress. Puede realizar todas las llamadas a la API de terceros directamente desde la interfaz, lo cual 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 cargarlos 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 combinar las piezas de la forma que mejor te parezca.

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

Empezando 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 utilizar las últimas funciones de JavaScript, como ES6 y webpack. Además, create-react-app proporciona una experiencia de desarrollador agradable y optimiza su aplicación para la producción.

Deberá tener Node> = 8.xy 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ás esta línea en algún lugar en el medio:

<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 .

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 "root" en el documento y luego inyecta el componente en la raíz. En realidad, el componente de la aplicación se renderiza y de ahí proviene el logotipo giratorio de React. Puede verificarlo abriendo el archivo src / App.js.

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, esto es 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 de JavaScript y le permite usar HTML simple en un archivo JavaScript. Puede leer más sobre esto en los documentos oficiales.

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

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

constructor (props){
   super(props);

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

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);
       });         
 }

const { title, date, content } =  responseJson;

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

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

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

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>
   );
 }
}

import './App.css';