{"id":24885,"date":"2022-10-26T22:56:51","date_gmt":"2022-10-26T20:56:51","guid":{"rendered":"\/tutoriales\/?p=24885"},"modified":"2023-02-13T23:03:37","modified_gmt":"2023-02-13T22:03:37","slug":"wordpress-react","status":"publish","type":"post","link":"\/co\/tutoriales\/wordpress-react","title":{"rendered":"Una gu\u00eda para principiantes sobre el desarrollo de proyectos con WordPress y React"},"content":{"rendered":"

WordPress es un poderoso sistema de gestión de contenido (CMS)<\/a> que te permite crear lo que desees, desde sitios simples hasta tiendas de comercio electrónico sofisticadas y complejas. Para integrar el código PHP de la plataforma con JavaScript, puedes aprovechar la API REST de WP<\/a> y WordPress junto con React<\/a>.<\/p>

Desarrollada por Facebook, React es una biblioteca de interfaz de usuario (UI)<\/strong> que utiliza un enfoque simple basado en componentes para crear aplicaciones multiplataforma escalables que son fáciles de entender. Sin embargo, es importante aprender a usarla correctamente para aprovechar al máximo sus características y funciones.<\/p>

En esta guía, explicaremos cómo usar React con WordPress. Discutiremos qué es el framework, describiremos sus beneficios y te mostraremos cómo usarlo. ¡Comencemos!<\/p>

Descarga la hoja de trucos de WordPress definitiva<\/a><\/p>

Introducción a React<\/h2>

Antes de comenzar, primero queremos hacer la pregunta, “¿qué es React?<\/a>“. También conocida como ReactJS, esta es una de las bibliotecas de JavaScript más populares que se pueden usar para el desarrollo web.<\/p>

\n
\"Sitio<\/figure><\/div>

Creada y mantenida por Facebook, React incluye una amplia gama de fragmentos de código JavaScript que se pueden usar para crear componentes de interfaz de usuario.<\/p>

Contrariamente a la creencia popular, ReactJS no es un framework de JavaScript, ya que sólo es responsable de renderizar los componentes de la capa de vista de una aplicación. Por lo tanto, si estás buscando funciones más sofisticadas puedes combinarla con un framework real como Vue.js<\/a>.<\/p>

También es importante tener en cuenta que existen ReactJS y React Native<\/a>. Este último es un marco de JavaScript de código abierto construido en la biblioteca React. Puedes usarlo para crear aplicaciones multiplataforma y componentes específicos de plataforma para iOS y Android.<\/p>

Características y funciones de React<\/h2>

Para comprender los beneficios de React, es útil saber cómo funciona. Estas son algunas de sus características y funciones más significativas:<\/p>

JSX<\/h3>

La principal extensión de sintaxis de JavaScript utilizada en React es JSX<\/a>. Puedes usarla para incrustar código HTML en objetos JavaScript y simplificar estructuras de código complejas.<\/p>

JSX también ayuda a prevenir los ataques de secuencias de comandos en sitios cruzados (XSS)<\/a> al dificultar que terceros inyecten código adicional a través de la entrada del usuario que no está escrito explícitamente en la aplicación.<\/p>

Las etiquetas JSX incluyen un nombre, elementos secundarios y atributos. Una etiqueta de imagen HTML típica se vería así:<\/p>

<img class=\"\" src=\"\" alt=\"\" ><\/pre>
Sin embargo, una etiqueta JSX tendría el siguiente aspecto:<\/p>
<img className=\"\" src=\"\" alt=\"\" \/><\/pre>
Además, los valores numéricos se escriben entre corchetes. Similar a JavaScript, las comillas representan cadenas:<\/p>
const name = 'Juan Pérez’;\nconst element = <h1>Hola, {name}<\/h1>;\nReactDOM.render(\n  element,\n  document.getElementById('root')\n);<\/pre>
Puedes poner cualquier expresión de JavaScript<\/a> válida dentro de los corchetes. Por ejemplo, podría ser “user.firstName” o “formatName(user)”.<\/p>
DOM virtual<\/h3>
El Modelo de objetos del documento (DOM)<\/a> presenta una página web en una estructura de árbol de datos, que React almacena en su memoria. React puede implementar actualizaciones en ciertas partes del árbol en lugar de volver a renderizarlo por completo.<\/p>
El DOM virtual<\/a> ofrece la vinculación de datos unidireccional. Esto hace que manipularlo y actualizarlo sea más rápido que el DOM original.<\/p>
Este utiliza un proceso conocido como diffing. Aquí es cuando React genera un nuevo árbol DOM virtual, lo compara con el anterior y luego encuentra la forma más eficiente de aplicar cambios al DOM real. Esto toma menos tiempo y requiere menos recursos, lo que es beneficioso para proyectos grandes que involucran mucha interacción del usuario.<\/p>
El DOM también es compatible con la API declarativa. Esto significa que puedes decirle a React en qué estado deseas que esté la interfaz de usuario para asegurarte de que el DOM coincida con ese estado.<\/p>
Componentes<\/h3>
Como mencionamos, los componentes de React<\/a> son piezas de código independientes y reutilizables que conforman la interfaz de usuario. Estos componentes funcionan de manera similar a las funciones de JavaScript. Estos también aceptan props, las cuales son entradas arbitrarias. Cuando un componente de función devuelve un elemento, influye en cómo se verá la interfaz de usuario.<\/p>
Las props son de solo lectura. Aquí hay un ejemplo:<\/p>
import React, { useState } from 'react' \nimport ReactDOM from 'react-dom' \n \nconst ParentComponent = () => { \n    const [stateVariable, setStateVariable] = useState('esto es el valor inicial de la variable'); \n \n    return ( \n        <div> \n            <h1>Esta es una vista del componente funcional<\/h1>\n            <ChildComponent exampleProp={stateVariable} \/>\n        <\/div> \n    ) \n} \n \nconst ChildComponent = (props) => {\n    return (\n        <div>\n            <h2>{props.exampleProp}<\/h2>\n        <\/div>\n    )\n}\n \n \nReactDOM.render( <ParentComponent \/>, document.getElementById('app') );<\/pre>
Existen dos tipos principales: componentes de clase<\/strong> y componentes funcionales<\/strong>. Los componentes de clase usan hooks de WordPress<\/a> de ciclo de vida y llamadas API:<\/p>
class ExampleComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { };\n  }\n  render() {\n    return (\n      <div>\n        <h1>Esta es una vista creada por un componente de clase<\/h1>\n      <\/div>\n    );\n  }\n}<\/pre>
Mientras tanto, un componente funcional se parece al siguiente ejemplo:<\/p>
const ExampleComponent = (props) => {\n    const [stateVariable, setStateVariable] = useState('');\n    return (\n        <div>\n            <h1>Esta es una vista del componente de funcional<\/h1>\n        <\/div>\n    )\n}<\/pre>
Los componentes funcionales sirven para renderizar vistas sin solicitudes de datos o administración de estado.<\/p>
Estado<\/h3>
El es<\/a>t<\/a>ado<\/a> se refiere al objeto integrado de los componentes de React. Aquí es donde almacenas los valores de propiedad de los elementos. Si el estado cambia, el componente se vuelve a renderizar.<\/p>
La gestión de estado es el proceso de administrar estos estados de aplicación y almacenar datos en bibliotecas de gestión de estado. Puedes usar un puñado de bibliotecas de gestión de estado, incluidas Redux<\/a> y Recoil<\/a>, siendo esta última más amigable para principiantes.<\/p>
¿Por qué usar React?<\/h2>
Hay muchos beneficios al usar React para el desarrollo de WordPress. Para empezar, esta es apta para principiantes y muchos proveedores de hosting web<\/a> admiten su uso.<\/p>
Dado que se basa en JavaScript y componentes simples, puedes usarla para crear aplicaciones basadas en la web después de solo unos días de aprender a usarla. También hay muchos sitios web para aprender a programar gratis<\/a> en línea. Una sólida comprensión de los conceptos básicos de JavaScript puede agilizar el proceso.<\/p>
Otro beneficio de React es que te permite reutilizar componentes en otras aplicaciones. Esta es de código abierto, por lo que puedes preconstruir tus componentes y anidarlos entre otros sin inflar el código.<\/p>
Los componentes de React también son relativamente sencillos de escribir, gracias a la integración JSX, que discutiremos en un momento. Puedes incorporar tipografía HTML, etiquetas y aprovechar múltiples funciones para el desarrollo dinámico de aplicaciones.<\/p>
Con React, también puedes usar la interfaz de línea de comandos (CLI) oficial, Create React App,<\/strong> para acelerar el desarrollo de aplicaciones de una sola página. Esta viene con herramientas preconfiguradas que pueden ayudarte a optimizar el proceso de configuración y aprendizaje.<\/p>
Finalmente, React también es compatible con SEO. La implementación del DOM virtual ayuda a aumentar la velocidad de la página, lo que aumenta el rendimiento y la renderización del lado del servidor, lo que facilita que los bots rastreen tu sitio.<\/p>
Descripción general de la API REST de WP<\/h2>
La interfaz de programación de aplicaciones (API) REST de WordPress<\/a> permite a los desarrolladores integrar frameworks de JavaScript como React con WordPress. Puedes acceder a la API REST de WP desde el front-end de tu sitio, agregar tipos de entradas personalizadas y crear una aplicación React respaldada por esta API.<\/p>
La REST API de WordPress es un conjunto de protocolos utilizados para crear aplicaciones de software. Estos definen cómo se comparte la información y los datos entre los programas y cómo interactúan sus componentes. REST, abreviatura de Transferencia de estado representacional, se refiere a las restricciones arquitectónicas de los programas que definen el estilo.<\/p>
El formato para estructurar los datos que deben leer las aplicaciones se denomina notación de objetos JavaScript (JSON)<\/a>. Este ayuda a agilizar la comunicación entre WordPress y otras aplicaciones y programas.<\/p>
La API REST de WP da como resultado un entorno de desacoplamiento que permite a los usuarios tratar a WordPress como un CMS sin cabeza. Esto significa que se puede usar una variedad de frameworks de front-end para conectar el back-end de WordPress. Esto es ventajoso para los desarrolladores que no están demasiado entusiasmados con PHP.<\/p>
React: Antes de comenzar<\/h2>
Un conocimiento básico de JavaScript<\/a>, CSS<\/a> y HTML<\/a> facilitaría el aprendizaje de  React. Además, el proceso de aprendizaje puede ser más eficiente si estás familiarizado con ECMAScript 6<\/a> (también conocido como ES6), la programación funcional y la programación orientada a objetos.<\/p>
En cuanto al programa, también necesitarás algunas dependencias instaladas en tu computadora. Esto incluye NodeJS<\/a> y npm<\/a> y un editor de texto. Opcionalmente, también puedes usar Git<\/a> para el control de versiones.<\/p>
La forma más popular de desarrollar proyectos React para WordPress es usar Create React App<\/a>:<\/p>
\n
\"Página<\/figure><\/div>
CRA proporciona un entorno simple para aprender React y usarlo para crear aplicaciones de una sola página. Ten en cuenta que para usarlo, primero necesitarás Node y npm en tu dispositivo.<\/p>
Para crear un nuevo proyecto, puedes ejecutar el siguiente comando en tu terminal:<\/p>
npx create-react-app wp-react-demo<\/pre>
Si aún no lo has hecho, esto confirmará que deseas instalar la aplicación Create React antes de crear la prueba. Esto crea una plantilla repetitiva. También puedes reemplazar “wp-react-demo” con tu propio nombre.<\/p>
A continuación, ejecuta lo siguiente:<\/p>
cd wp-react-demo\nnpm start<\/pre>
La estructura del directorio se verá así:<\/p>
├── README.md\n├── package.json\n├── public\n│ ├── favicon.ico\n│ ├── index.html\n│ └── manifest.json\n├── src\n│ ├── App.css\n│ ├── App.js\n│ ├── App.test.js\n│ ├── index.css\n│ ├── index.js\n│ ├── logo.svg\n│ └── registerServiceWorker.js<\/pre>
En el directorio src, encontrarás todos los archivos JavaScript en los que estarás trabajando. Ahora, puedes visitar localhost:3000 <\/strong>para cargar el archivo index.html<\/strong>.<\/p>
El archivo public\/index.html <\/strong>no contiene mucho. Sin embargo, puedes encontrar la siguiente línea, que será el punto de partida para tu proyecto:<\/p>
<div id=\"root\"><\/div><\/pre>
En el archivo index.js <\/strong>del directorio src, encontrarás lo siguiente:<\/p>
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\/App';\n \nReactDOM.render(<App \/>, document.getElementById('root'));<\/pre>
Esto significa que está renderizando el componente de la aplicación<\/strong>, el cual puedes encontrar en src.\/App.js<\/strong>. Puedes reemplazar esto con tu propio contenido HTML. Podemos usar render() para HTML gracias a la extensión de sintaxis JSX.<\/p>
Cómo consultar la API REST de WP desde React<\/h2>
Por defecto, puedes realizar una solicitud GET para usar la API REST de WP en el front-end de tu sitio. Por ejemplo, puedes usar \/wp-json\/wp\/v2\/posts para obtener todas tus entradas. Siguiendo con el ejemplo anterior, los datos de esta entrada se ubicarían en http:\/\/localhost\/wp-json\/wp\/v2\/posts\/<\/strong>.<\/p>
Para comenzar con React, puedes ejecutar este comando en tu terminal:<\/p>
npx create-react-app react-app<\/pre>
Luego, ejecuta lo siguiente:<\/p>
cd react-app\nnpm install @material-ui\/core<\/pre>
A continuación, puedes introducir el siguiente ejemplo:<\/p>
import React, { useEffect, useState } from 'react';\nimport Card from '@material-ui\/core\/Card';\nimport CardContent from '@material-ui\/core\/CardContent';\nimport Typography from '@material-ui\/core\/Typography';\nimport Grid from '@material-ui\/core\/Grid';\n    \nexport default function Posts() {\n    const [posts, setPosts] = useState([]);\n    useEffect(() => {\n        async function loadPosts() {\n            const response = await fetch('\/wp-json\/wp\/v2\/posts');\n            if(!response.ok) {\n                \/\/ oups! something went wrong\n                return;\n            }\n    \n            const posts = await response.json();\n            setPosts(posts);\n        }\n    \n        loadPosts();\n   }, [])\n  return (\n    <Grid container spacing={2}>\n      {posts.map((post, index) => (\n      <Grid item xs={4} key={index}>\n        <Card>\n           <CardContent>\n                <Typography\n                    color=\"textSecondary\"\n                    gutterBottom\n                    dangerouslySetInnerHTML={{__html: post.title.rendered}} \/>\n                <Typography\n                    variant=\"body2\"\n                    component=\"p\"\n                    dangerouslySetInnerHTML={{__html: post.content.rendered}} \/>\n            <\/CardContent>\n        <\/Card>\n      <\/Grid>\n     ))}\n    <\/Grid>\n );\n}<\/pre>
El ejemplo anterior utiliza los hooks<\/a> de React<\/a> useEffect y useState. El primero declara la matriz de entradas y llama para actualizarla, mientras que el segundo obtiene el código.<\/p>
\n
\"\"<\/a><\/figure><\/div>
Cómo crear un tipo de entrada personalizada con React<\/h2>
También puedes usar React para crear un <\/strong>tipo de entrada personalizada de WordPress<\/a>. Sin embargo, existen algunas herramientas que deberás instalar con anticipación. Esto ayudará a que el proceso sea lo más fluido y sencillo posible.<\/p>
Primero, deberás agregar el plugin de WordPress Custom Post Type UI<\/a>.<\/p>
\n
\"Custom<\/figure><\/div>
Este plugin simplifica el proceso de creación de tipos de entradas personalizadas en WordPress.<\/p>
También recomendamos instalar Advanced Custom Fields (ACF)<\/a>.<\/p>
\n
\"Plugin<\/figure><\/div>
Esta también es una herramienta gratuita. El plugin se puede usar para crear y agregar campos personalizados a tus tipos de entradas personalizadas. También sugerimos instalar ACF to REST API<\/a> para que tus campos personalizados estén disponibles para los tipos de entradas.<\/p>
Para comenzar, dirígete a CPT UI > Añadir\/Editar tipos de contenidos <\/strong>desde tu área de administración. En nuestro ejemplo, usaremos el nombre “Libros”. También seleccionaremos la opción de autocompletar el resto de los campos.<\/p>
\"\"<\/figure>
En la sección Mostrar en REST<\/strong> API<\/strong>, configúralo en Verdadero <\/strong>e ingresa “Libros” como el slug base de la API REST. En Soportes<\/strong>, selecciona las casillas de verificación Autor <\/strong>y Campos personalizados<\/strong>. Haz clic en Añadir tipo de contenido <\/strong>cuando hayas terminado.<\/p>
A continuación, podemos crear campos personalizados para el tipo de entrada personalizada. Dirígete a Campos personalizados > Añadir nuevo<\/strong> e ingresa un título apropiado, como “Información del libro”. Puedes hacer clic en Añadir campo<\/strong> y luego completar la etiqueta, el nombre y el tipo del campo.<\/p>
\n
\"Añadir<\/figure><\/div>
En Ubicación<\/strong>, puedes configurar el tipo de entrada para que sea igual al tipo de entrada personalizada del libro<\/strong>. Cuando hayas terminado, selecciona Publicar <\/strong>para activar el campo personalizado.<\/p>
A continuación, dirígete a Mis libros > Añadir nueva<\/strong> e ingresa el título, resumen e imagen destacada. Puedes repetir este proceso para crear tantos como desees.<\/p>
Ahora, desde tu terminal, ingresa el siguiente comando, ejecutando cada uno antes de pasar al siguiente:<\/p>
npx create-react-app frontend\ncd frontend\nnpm i axios\nnpm start<\/pre>
Luego, dentro del directorio src, puedes crear una carpeta llamada components<\/em>, seguida de un archivo llamado libros.js<\/strong>. Cuando termines, ingresa lo siguiente:<\/p>
import React, { Component } from 'react';\nimport axios from 'axios';\nexport class Books extends Component {\n   state = {\n       books: [],\n       isLoaded: false\n   }\n componentDidMount () {\n   axios.get('http:\/\/localhost:3000\/wp-json\/wp\/v2\/books')\n       .then(res => this.setState({\n           books: res.data,\n           isLoaded: true\n       }))\n       .catch(err => console.log(err))\n   }\n   render() {\n      console.log(this.state);\n       return (\n           <div>\n             \n           <\/div>\n       )\n   }\n}\nexport default Books;<\/pre>
En el archivo App.js<\/strong>, ingresa lo siguiente:<\/p>
import React from 'react';\nimport '.\/App.css';\nimport Books from '.\/components\/Books';\nfunction App() {\n return (\n   <div className=\"App\">\n    <Books>\n   <\/div>\n );\n}\nexport default App;<\/pre>
Ahora, en tu terminal, puedes ejecutar el comando npm start. Esto iniciará la aplicación React. Puedes ver la consola de datos “Libro” cuando la abres en un navegador. Puedes visualizar cada título mapeando a través de cada libro.<\/p>
En libros.js<\/strong>, ingresa lo siguiente:<\/p>
render() {\n      const {books, isLoaded} = this.state;\n       return (\n           <div>\n              {books.map(book => <h4>{book.title.rendered}<\/h4>)}\n           <\/div>\n       )\n   }<\/pre>
Ten en cuenta que también puedes separar la colección de libros en un solo componente de libro. Puedes hacerlo creando un archivo dentro de src\/components. También puedes agregar CSS personalizado para diseñar el tipo de entrada personalizada (app.css).<\/p>
Cómo crear un tema con WordPress y React (2 métodos)<\/h2>
Quizás te estés preguntando cómo crear un tema de WordPress<\/a> usando React. Hay un puñado de opciones, así que veamos dos métodos populares:<\/p>
1. Crea un tema con React y WordPress usando scripts de WP<\/h3>
En las aplicaciones típicas de React, debes importar React en la parte superior de los archivos. Sin embargo, a partir de WordPress 5.0<\/a>, el CMS incluye las bibliotecas React y ReactDOM y las exporta a wp.element, un objeto de ventana global.<\/p>
Si has usado React antes, probablemente hayas usado Create React App para ejecutar tu servidor de desarrollo. Sin embargo, esto no es necesario con WordPress.<\/p>
El equipo de WordPress creó un paquete wp-scripts basado en los react-scripts utilizados con la aplicación Create React. WP Scripts incluye los comandos por defecto.<\/p>
Para cargar React en tu tema, navega hasta el archivo functions.php <\/strong>del tema y agrega el siguiente fragmento de código:<\/p>
\/\/ Enqueue Theme JS w React Dependency\nadd_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );\nfunction my_enqueue_theme_js() {\n  wp_enqueue_script(\n    'my-theme-frontend',\n    get_stylesheet_directory_uri() . '\/build\/index.js',\n    ['wp-element'],\n    time(), \/\/ Cambiar a null para producción\n    true\n  );\n}<\/pre>
Esto agregará el wp-element como una dependencia de tu archivo JavaScript. A continuación, debemos configurar un archivo package.json<\/strong>. Desde la raíz de tu tema de WordPress, ejecuta el siguiente comando:<\/p>
npm init<\/pre>
Una vez hecho esto, ejecuta lo siguiente:<\/p>
npm install @wordpress\/scripts --save-dev<\/pre>
Los scripts de WP se descargarán en tus node_modules<\/strong>, por lo que estarán disponibles para usar en tu línea de comandos. Para asignar los scripts de WP a los scripts de NPM, puedes buscar el archivo package.json<\/strong>, cargar la configuración de “scripts” y reemplazarlos con este ejemplo:<\/p>
{\n  \"name\": \"myreacttheme\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Mi tema de WordPress con React\",\n  \"main\": \"src\/index.js\",\n  \"dependencies\": {},\n  \"devDependencies\": {\n    \"@wordpress\/scripts\": \"^5.1.0\"\n  },\n  \"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"check-engines\": \"wp-scripts check-engines\",\n    \"check-licenses\": \"wp-scripts check-licenses\",\n    \"lint:css\": \"wp-scripts lint-style\",\n    \"lint:js\": \"wp-scripts lint-js\",\n    \"lint:pkg-json\": \"wp-scripts lint-pkg-json\",\n    \"start\": \"wp-scripts start\",\n    \"test:e2e\": \"wp-scripts test-e2e\",\n    \"test:unit\": \"wp-scripts test-unit-js\"\n  },\n  \"author\": \"\",\n  \"license\": \"1 GNU V2+, MIT\"\n}<\/pre>
A continuación, puedes ejecutar lo siguiente:<\/p>
npm start<\/pre>
Esto buscará archivos importados de src\/index.js<\/strong> y los compilará en build\/index.js<\/strong> cada vez que se cambie un archivo.<\/p>
2. Crea un tema con React y WordPress usando Create-React-WPTheme<\/h3>
Otra opción es usar create-react-wptheme<\/a> de devloco. Este paquete es similar a create-react-app. Sin embargo, este utiliza WordPress en lugar de webpack como servidor de desarrollo. También tendrás acceso a todas las funciones principales, hooks, acciones, filtros, etc.<\/p>
Para configurarlo, puedes iniciar una terminal (o git bash) en tu instalación local de WordPress, luego escribe el siguiente comando:<\/p>
npx create-react-wptheme barebones<\/pre>
“Barebones” <\/strong>es el nombre del tema. Puedes cambiarlo a lo que quieras llamar a tu tema.<\/p>
Verás un mensaje que te informa que la instalación creó una carpeta raíz y un directorio “react-src” dentro de ella. Este directorio es importante porque contendrá el código sin compilar.<\/p>
A continuación, debemos agregar los archivos styles.css<\/strong>, index.php<\/strong> y otros archivos necesarios para validarlo. En la terminal, ingresa el siguiente comando:<\/p>
cd barebones\/react-src\nnpm run wpstart<\/pre>
Ahora, cuando navegues a wp-admin > temas<\/strong>, deberías ver tu nuevo tema. Haz clic en el botón Activar<\/strong>, luego regresa a la terminal y ejecuta lo siguiente:<\/p>
npm run wpstart<\/pre>
Esto debería abrir automáticamente una nueva pestaña del navegador. Ten en cuenta que los archivos ubicados en la carpeta raíz (cualquier cosa fuera de react-src) no deben editarse. Estos contienen la versión compilada del código requerido para WordPress y React.<\/p>
Para crear un nuevo tema, puedes usar lo siguiente:<\/p>
npx create-react-wptheme my_react_theme<\/pre>
Puedes cambiar “my_react_theme” como desees. A continuación, puedes ingresar el siguiente comando:<\/p>
cd my_react_theme\/react-src\nnpm run start<\/pre>
Recuerda reemplazarlo con el mismo nombre que usaste en el paso anterior. Esto configurará el tema que se verá en el área de administración.<\/p>
Una vez que hayas terminado de desarrollar tu tema, deberás usar el comando de compilación para moverlo a producción. Para hacer esto, abre tu línea de comando, navega a la carpeta react-src<\/strong> de tu tema y ejecuta lo siguiente:<\/p>
npm run build<\/pre>
Esto optimizará tus archivos ubicados dentro de una carpeta. Luego puedes implementarlo en tu servidor.<\/p>
Cómo agregar React a una plantilla de página personalizada<\/h2>
Si te preguntas cómo crear un tema hijo en WordPress <\/a>usando React, el proceso es relativamente similar. Puedes agregar React a una <\/strong>plantilla de página personalizada.<\/p>
Comencemos con una estructura de tema estándar:<\/p>
\/build\n\/src\n\/-- index.js\nfunctions.php\npackage.json\npage-react.php\nstyle.css<\/pre>
A continuación, agrega el siguiente código al archivo functions.php <\/strong>de tu tema:<\/p>
<?php\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );\nfunction my_theme_enqueue_styles() {\n \n  $parent_style = 'twentytwenty-style'; \n    \n  wp_enqueue_style( $parent_style, get_template_directory_uri() . '\/style.css' );\n    \n  wp_enqueue_style( 'child-style',\n    get_stylesheet_directory_uri() . '\/style.css',\n    [ $parent_style ],\n    time() \/\/Para producción usar wp_get_theme()->get('Version')\n  );\n  wp_enqueue_script(\n    'my-theme-frontend',\n    get_stylesheet_directory_uri() . '\/build\/index.js',\n    ['wp-element'],\n    time() \/\/Para producción usar wp_get_theme()->get('Version')        \n  );\n  \n}<\/pre>
También deberás agregar código a tu archivo style.css<\/strong>. Dentro de él, copia y pega lo siguiente:<\/p>
\/*\n Theme Name:   Twenty Twenty Child\n Description:  Twenty Twenty Child Theme\n Author:       Tu Nombre\n Author URI:   https:\/\/tusitioweb.com\n Template:     twentytwenty\n Version:      0.9.0\n License:      GNU General Public License v2 or later\n License URI:  http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n Text Domain:  twentytwentychild\n*\/<\/pre>
A continuación, puedes crear una plantilla de página personalizada básica page-react.php <\/strong>con este ejemplo:<\/p>
<? php\n\/**\n * Nombre de Template: React Template\n *\/\nget_header();\n?>\n<main id=\"site-content\" role=\"main\">\n  <article class=\"post-2 page type-page status-publish hentry\">\n    <?php get_template_part( 'template-parts\/entry-header' ); ?>\n    <div class=\"post-inner thin\">\n      <div class=\"entry-content\">        \n        <div id=\"react-app\"><\/div><!-- #react-app -->\n      <\/div><!-- .entry-content -->\n    <\/div><!-- .post-inner -->\n  <\/article><!-- .post -->\n<\/main><!-- #site-content -->\n<?php get_template_part( 'template-parts\/footer-menus-widgets' ); ?>\n<?php get_footer(); ?><\/pre>
Ahora puedes crear una nueva página en WordPress y luego seleccionar React Template <\/strong>como plantilla de página.<\/p>
Cómo usar React en tu aplicación<\/h2>
Si deseas utilizar React en una aplicación existente, puedes agregar su red de entrega de contenido (CDN)<\/a> <\/strong>directamente a tu archivo HTML. Para comenzar, navega a la página HTML donde deseas agregar React para comenzar.<\/p>
Inserta una etiqueta <div> en blanco. Esto creará un contenedor donde puedes renderizar un componente. Para este ejemplo, digamos que estamos tratando de crear un botón.<\/p>
A continuación, inserta tres etiquetas<script> en la página antes de la etiqueta de cierre <\/body>. Los dos primeros se utilizarán para cargar React y el tercero cargará el código de tu componente.<\/p>
Ahora, en la misma carpeta que tu página HTML, crea un nuevo archivo y asígnale el nombre button.js <\/strong>(o lo que sea relevante para el elemento que estás agregando). Dentro de ese archivo, copia y pega el siguiente código:<\/p>
'use strict';\nconst e = React.createElement;\nclass Button extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { clicked: false };\n  }\n  render() {\n    if (this.state.clicked) {\n      return 'Presionaste este botón.';\n    }\n    return e(\n      'button',\n      { onClick: () => this.setState({ clicked: true }) },\n      'Presiona'\n    );\n  }\n}<\/pre>
Esto creará un componente de botón que muestra un mensaje una vez que se hace clic. Para usar el botón en tu página HTML, puedes agregar el siguiente fragmento de código al final del archivo button.js<\/strong>:<\/p>
const domContainer = document.querySelector('#button_container');\nReactDOM.render(e(Button), domContainer);<\/pre>
Esto vuelve a llamar al contenedor <div> que agregaste a tu página HTML. Luego renderiza el componente del botón.<\/p>
También puedes usar React para crear una aplicación React en blanco desde cero. La mejor manera de hacerlo es usar la solución Create React App que discutimos anteriormente. Esto puede ser útil para aplicaciones de una sola página.<\/p>
Para comenzar, puedes ejecutar este comando en tu terminal:<\/p>
const domContainer = document.querySelector('#button_container');\nReactDOM.render(e(Button), domContainer);<\/pre>
Ten en cuenta que puedes cambiar “my-app” por el nombre que desees. Para ejecutarlo, puedes buscar la carpeta de la aplicación ejecutando el comando cd my-app, seguido de npm start.<\/p>
La aplicación se ejecutará en modo de desarrollo. Puedes verla en tu navegador en http:\/\/localhost:3000<\/strong>.<\/p>
Conclusión<\/h2>
Desarrollar proyectos de WordPress y React puede ser un proceso simple y directo, incluso si eres un principiante. Sin embargo, es importante aprender cómo funciona el framework de JavaScript con el CMS y su API REST para hacerlo con éxito.<\/p>
Afortunadamente, con una comprensión básica de JavaScript, HTML y CSS, puedes aprender a usar React en poco tiempo. Como discutimos en esta entrada, puedes usarlo para crear aplicaciones y temas de una sola página y plantillas de página personalizadas.<\/p>
Esperamos que esta guía te haya ayudado a comprender mejor React y sus capacidades para el desarrollo web.<\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress es un poderoso sistema de gestión de contenido (CMS) que te permite crear lo que desees, desde sitios simples hasta tiendas de comercio electrónico sofisticadas y complejas. Para integrar el código PHP de la plataforma con JavaScript, puedes aprovechar la API REST de WP y WordPress junto con React. Desarrollada por Facebook, React es […]<\/p>\n
Read More…<\/a><\/p>\n","protected":false},"author":334,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"WordPress y React: una gu\u00eda completa para comenzar","rank_math_description":"Aprende a crear un proyecto din\u00e1mico con WordPress y React desde los puntos b\u00e1sicos hasta la creaci\u00f3n de aplicaciones, temas y entradas personalizadas.","rank_math_focus_keyword":"wordpress react","footnotes":""},"categories":[4747,14348],"tags":[14346],"class_list":["post-24885","post","type-post","status-publish","format-standard","hentry","category-wordpress","category-experto","tag-wordpress-react"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-react","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/wordpress-react","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/react-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/wordpress-react","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/panduan-wordpress-react","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-react","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/a-beginners-guide-to-wordpress-react-development-projects","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/a-beginners-guide-to-wordpress-react-development-projects","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wordpress-react","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/wordpress-react","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wordpress-react","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wordpress-react","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-react","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-react","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-react","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-react","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/24885","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/users\/334"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/comments?post=24885"}],"version-history":[{"count":17,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/24885\/revisions"}],"predecessor-version":[{"id":28950,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/24885\/revisions\/28950"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/media?parent=24885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/categories?post=24885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/tags?post=24885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}