Uso de React para una aplicación web CMS

WordPress Rest API es una de las muchas características excelentes que ofrece WordPress. Permite a los desarrolladores crear complementos y temas fascinantes y les permite potenciar aplicaciones de terceros con WordPress CMS.

El sistema de gestión de contenidos también está desarrollado para gestionar el contenido del sitio web en aplicaciones web modernas. Esto puede añadir una carga de trabajo adicional para los desarrolladores. Con tantas posibilidades que API de descanso ofertas, también se puede pensar en usar WordPress con React como un CMS sin cabeza para sus aplicaciones web basadas en JavaScript.

¿Qué es WordPress sin cabeza?

Un sitio web sin cabeza de WordPress es un sitio que utiliza principalmente WordPress para la gestión de contenidos y utiliza cualquier otra tecnología para construir el front-end y mostrar el contenido a los visitantes del sitio web.

Rest API permite a los desarrolladores interactuar con interfaces de tecnología cruzada siempre que ambas hablen el mismo idioma JSON. WordPress Rest API genera datos en formato JSON, que es comprensible para una gran cantidad de tecnologías web. JSON es una representación basada en texto de objetos JavaScript que contiene datos en pares clave-valor.

"friends": [{"id": 0,"name": "Harriet Stanley"},{"id": 1,"name": "Benton Odom"},{"id": 2,"name": "Jackie Edwards"}],

Hoy, demostraré el poder de WordPress Rest API usándola con React y WordPress como un CMS sin cabeza para mi aplicación web básica.

CMS sin cabeza o desacoplado: aprenda la diferencia

El CMS sin cabeza y el CMS desacoplado son dos enfoques arquitectónicos para los sistemas de gestión de contenidos que ofrecen más flexibilidad y agilidad en comparación con las configuraciones de CMS monolíticos tradicionales. Aquí hay un desglose de las diferencias entre los dos:

Cómo configurar ReactJS con WordPress sin cabeza

Configurar ReactJS con una configuración de WordPress sin cabeza implica desacoplar el front-end (ReactJS) del back-end (WordPress) y usar WordPress solo como sistema de gestión de contenido (CMS).

Paso 1: elija el proveedor de alojamiento

Elegir la plataforma de alojamiento de WordPress adecuada es el primer y crucial paso a la hora de configurar WordPress y crear un CMS sin cabeza.

El alojamiento juega un papel fundamental en WordPress sin cabeza porque, aunque la “cabeza” (la parte frontal) está separada en un enfoque sin cabeza, el “cuerpo” (la parte trasera) todavía reside en un servidor que necesita alojamiento.

El rendimiento, la seguridad y la confiabilidad del servidor son fundamentales para garantizar que el contenido se entregue sin problemas al front-end, independientemente de la tecnología utilizada.

Por lo tanto, es útil elegir un host que ofrezca un rendimiento óptimo del servidor y una seguridad mejorada. Teniendo esto en cuenta, recomendaría Cloudways porque ofrece la combinación perfecta de velocidad, seguridad y soporte, lo que garantiza que su viaje sin cabeza a WordPress sea fluido.

Específicamente, Cloudways proporciona alojamiento administrado en proveedores de nube de primer nivel como AWS, Google Cloud y DigitalOcean, lo que garantiza escalabilidad y rendimiento de alta velocidad. La plataforma ofrece instalaciones con un solo clic, lo que hace que la configuración de WordPress y otras herramientas sea sencilla.

Además, con cachés avanzados integrados y una red de entrega de contenido (CDN), su contenido se entrega más rápido, independientemente de la ubicación del usuario.

Además, Cloudways garantiza una seguridad sólida mediante parches de seguridad periódicos, un firewall dedicado e instalación de SSL, lo que ayuda a proteger sus datos e interacciones de backend. Las copias de seguridad automatizadas y las opciones de restauración sencillas brindan una capa adicional de protección de datos y tranquilidad.

Además, la atención al cliente 24 horas al día, 7 días a la semana y la amplia base de conocimientos de Cloudways garantizan que cualquier problema que encuentre se resuelva rápidamente, lo que le permitirá concentrarse en crear y administrar su CMS sin cabeza sin problemas relacionados con el alojamiento.

Paso 2: habilite la API Rest de WordPress

• Primero, descargar el archivo zip del API WP-Rest complemento de git.
• Sube la carpeta zip dentro su carpeta de complementos de WordPress.
• Una vez cargado el archivo, active el complemento para habilitar la API Rest de WordPress.

Paso 3: recuperar datos de publicación

Para recuperar los datos de la publicación, siga estos pasos:

• Ir a Ajustes → Enlaces permanentes y seleccione cualquiera Nombre del puesto o Estructura personalizada.

• Dado que estamos trabajando con llamadas API, descargue la extensión de Chrome para Cartero.
• Dentro del Postman, ingresa la URL en el siguiente formato:

https://example.com/wp-json/wp/v2/posts

• La URL anterior buscará los datos de las publicaciones dentro de su sitio de WordPress.

Paso 4: crea tipos de publicaciones personalizadas

Para crear tipos de publicaciones personalizadas:

• Descargar el UI de tipo de publicación personalizada Complemento para crear tipos de publicaciones personalizadas.

• Instalar y activar el complemento y agregue un nuevo tipo de publicación.
• Para este tutorial, crearé un tipo de publicación personalizada para Libros.

• Dentro del Slug de tipo de publicación, escriba el nombre de su publicación personalizada.

• Asegurarse de que Mostrar en API REST casilla de verificación está configurada en verdadero y también se establece el slug base de REST API. Esto es obligatorio si desea utilizar WordPress como CMS sin cabeza.

• Marque todas las casillas de la información que desea obtener de la API REST.

• Después de guardar los cambios, notará que aparece una nueva opción en la barra lateral. Haga clic en él para agregar el nuevo Libro dentro de su tipo de publicación personalizada.

• Creé mi primer libro agregando datos de muestra y un extracto de mi publicación.

Paso 5: verificar y verificar

• Para verificar que los datos estén disponibles a través de API, continúe y presione la URL dentro de Postman.
• Ahora, la URL debería parecerse a https://exampe.com/wp-json/wp/v2/libros.
• También podemos agregar más campos como Editor usando ACF y ACF a RestAPI complementos.

• Instale y active ambos complementos.

• De forma predeterminada, ACF no se comunica con la API Rest de WordPress. Por lo tanto, debemos descargar el API REST ACF complemento también.

• Usando el complemento de campos personalizados, agregaré el campo Editor para mis libros.

• Asegúrese de seleccionar el tipo de publicación deseada de la lista. Después de eso, presione ‘Publicar.’

Se completa un nuevo campo dentro de mi tipo de publicación personalizada donde puedo definir el editor de mi libro. Eso es todo lo que necesitamos hacer para configurar nuestro WordPress para enviar nuestros datos a nuestra aplicación web ReactJS.

¿Qué es React y cómo configurarlo?

JavaScript es una herramienta poderosa para el desarrollo web y React es una biblioteca de JavaScript para la web mantenida por Facebook y la comunidad de desarrolladores.

ReactJS se utiliza principalmente para desarrollar aplicaciones de una sola página que sean rápidas, robustas y dinámicas.

Requisitos previos

Asegúrese de tener las siguientes dependencias instaladas en su computadora antes de crear aplicaciones de React.

• NodeJS y NPM.
• Editor de texto como Sublime o Visual Studio Code.
• Git para control de versiones (opcional)

Cómo crear un proyecto con ReactJS

• Después de configurar el entorno, abra la línea de comando y ejecute el siguiente código para crear el proyecto con ReactJS.

npx create-react-app frontend

• Una vez creada la aplicación, cd (cambiar directorio) a la carpeta de la aplicación y escriba el siguiente comando para instalar el axios paquete para llamadas API.

npm i axios

• Ahora, abre la carpeta dentro de tu favor. editor de texto ite. Estoy usando el código de Visual Studio.
• Inicie la aplicación ejecutando el comando npm start.
• Estamos listos para construir nuestra aplicación web con React usando WordPress como CMS sin cabeza si todo funciona correctamente.
• Crear una nueva carpeta ‘componentes‘ dentro de src carpeta, y dentro de la ‘componentes‘carpeta, crea un nuevo archivo’Libros.js.’

Cómo renderizar datos de publicaciones en ReactJS

Dentro de Libro.js archivo, recuperaremos los datos de la API Rest de WordPress.

A continuación se muestra el código que solicita el punto final de la API Rest, que en mi caso es ‘/libros‘ – y muestra los datos en formato JSON:

import React, { Component } from 'react'import axios from 'axios';export class Books extends Component {state = {books: [],isLoaded: false}componentDidMount () {axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/').then(res => this.setState({books: res.data,isLoaded: true})).catch(err => console.log(err))}render() {console.log(this.state);return (

)}}

exportar libros predeterminados

• El código anterior mostrará la matriz de datos en la consola, que luego se utiliza dentro del bloque de renderizado.
• Ahora, dentro del aplicación.js archivo, llame al Libros componente como se muestra a continuación.

import React from 'react';import './App.css';import Books from './components/Books';function App() {return (

);}

exportar la aplicación predeterminada;

aplicación.js es el punto de entrada de nuestra aplicación web. Por lo tanto, es importante hacer referencia a los componentes «Libros» dentro de este archivo.

Cómo mostrar datos de publicaciones en ReactJS

Así es como puedes mostrar datos de publicaciones en ReactJS

• Agregue el siguiente código dentro del método de renderizado:

render() {const {books, isLoaded} = this.state;return (

);}

• En lugar de mostrar datos aquí, crearemos un nuevo componente y lo llamaremos ‘LibroItems.js‘ ya que quiero mantenerlo separado del componente principal.
• Cambiar el método de renderizado dentro librok.js a algo como:

render() {const {books, isLoaded} = this.state;return (

);}

• Ahora, en su lugar, necesitamos representar el componente BookItems.
• Dentro de LibroItems.js, agregue el siguiente código:

import React, { Component } from 'react'import axios from 'axios';import PropTypes from 'prop-types';export class BookItems extends Component {render() {const { title } = this.props.book;return (

)}}

exportar artículos de libro predeterminados

• En el código anterior, hago referencia al accesorio del libro para obtener el título y otra información.

Nota: Asegúrese de hacer referencia a la Artículos de libro componente dentro del componente “Libros”.

Mi versión final de LibroItems.js se parece a esto:

import React, { Component } from 'react'import PropTypes from 'prop-types';import axios from 'axios';export class BookItems extends Component {state = {imgUrl: '',author: '',isLoaded: false}static propTypes = {book: PropTypes.object.isRequired}componentDidMount () {const {featured_media, author} = this.props.book;const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_media}`);const getAuthor = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/${author}`);Promise.all([getImageUrl, getAuthor]).then(res => {console.log(res);this.setState({imgUrl: res[0].data.media_details.sizes.full.source_url,author: res[1].data.name,isLoaded: true});});}render() {const { title, excerpt } = this.props.book;const {author, imgUrl, isLoaded} = this.state;return (

)}}

exportar artículos de libro predeterminados

Y la salida en el navegador se ve así:

No es la más bonita, ¿verdad? Bueno, eso se debe a que el estilo está fuera del alcance de este tutorial.

CMS WordPress sin cabeza: beneficios e inconvenientes

Ahora que sabes cómo crear el CMS WordPress sin cabeza, debes conocer los posibles beneficios y desventajas de tenerlo.

Beneficios de usar WordPress sin cabeza

El primer y más importante beneficio que tiene al usar WordPress CMS sin cabeza es la flexibilidad Ofrece. Con el enfoque sin cabeza, tienes la Libertad para elegir y diseñar cualquier rostro. (o front-end) que desee, utilizando tecnologías modernas. Hace que su sitio web sea más rápido, más receptivo y adaptado con precisión a las necesidades de sus usuarios.

No sólo esto, su sitio web es más seguro porque cuando el frente está separado de la parte posterior, hay pocas posibilidades de que los malos actores alteren su contenido.

Desventajas de usar WordPress sin cabeza

En cuanto a los inconvenientes considerados, el CMS wordpress sin cabeza es complejo. Las configuraciones tradicionales de WordPress le permiten utilizar temas y complementos que se integran fácilmente.

Además, quedarse sin cabeza significa que es posible que se pierda algunas de estas funciones integradas y deberá hacer un esfuerzo adicional para reinventarlas.

Y para equipos más pequeños y novatos, administrar dos sistemas separados puede resultar agotador, ya que requerirá que usted maneje actualizaciones, comprobaciones de compatibilidad y correcciones tanto para el CMS como para el front-end.

¡Terminando!

En conclusión, usar WordPress con React para crear un CMS headless para su aplicación web abre un mundo de posibilidades tanto para desarrolladores como para creadores de contenido. Al desacoplar el front-end y el back-end, obtienes la flexibilidad de diseñar una interfaz de usuario con las poderosas funciones de React mientras administras el contenido sin problemas a través de WordPress.

A lo largo de este blog, lo hemos guiado a través de los pasos esenciales, las mejores prácticas y los consejos útiles para integrar estas dos tecnologías sólidas, garantizando un proceso de desarrollo fluido y eficiente.

Comparte tu opinión en la sección de comentarios. COMENTAR AHORA