Integrar React en tu tema WordPress

Introducción

Integrar React en un tema de WordPress permite combinar la flexibilidad de un CMS consolidado con la potencia de una librería moderna de front-end. Con React podemos crear componentes interactivos, gestionar estados complejos y optimizar la renderización sin recargar la página. En este artículo veremos paso a paso cómo incorporar React en tu tema de WordPress, desde la configuración inicial hasta las buenas prácticas de depuración y despliegue.

Requisitos Previos

• Node.js y npm instalados (https://nodejs.org/).
• Entorno de desarrollo de WordPress local (Local by Flywheel, Docker o similar).
• Un tema hijo o personalizado donde añadirás tu código.
• Conocimientos básicos de PHP, JavaScript y la API de WordPress.

1. Estructura de Archivos y Configuración Inicial

En el directorio de tu tema, crea una carpeta llamada react-app donde vivirá el proyecto de React. La estructura quedaría así:

/wp-content/themes/tu-tema/
├── functions.php
├── style.css
└── react-app/
    ├── package.json
    ├── public/
    └── src/
  

Desde react-app, inicializa con npm init -y o, si prefieres, usa npx create-react-app . para una configuración más completa.

2. Configurando el Build de React

En tu package.json asegúrate de tener estos scripts:

{
  scripts: {
    start: webpack serve --mode development,
    build: webpack --mode production
  },
  dependencies: {
    react: ^18.0.0,
    react-dom: ^18.0.0
  },
  devDependencies: {
    webpack: ^5.0.0,
    webpack-cli: ^4.0.0,
    babel-loader: ^8.0.0,
    @babel/core: ^7.0.0,
    @babel/preset-react: ^7.0.0
  }
}

Configura webpack.config.js para que genere los archivos bundle.js dentro de react-app/build:

const path = require(path)
module.exports = {
  entry: ./src/index.js,
  output: {
    path: path.resolve(__dirname, build),
    filename: bundle.js
  },
  module: {
    rules: [
      {
        test: /.(jsjsx)/,
        exclude: /node_modules/,
        use: babel-loader
      }
    ]
  },
  resolve: { extensions: [.js, .jsx] }
}

3. Crear el Punto de Montaje en el Tema

En el archivo de tu plantilla PHP (por ejemplo page-react.php), añade un contenedor donde React “montará” la interfaz:

ltdiv id=react-root style=min-height:400px padding:20px border:1px solid #dddgt
  ltpgtCargando aplicación...lt/pgt
lt/divgt
  

4. Encolar Scripts y Estilos en functions.php

Registra y encola el bundle.js y un CSS si lo tuvieras:

function tu_tema_enqueue_react() {
  wp_register_script(
    react-app-js,
    get_stylesheet_directory_uri() . /react-app/build/bundle.js,
    array(),
    filemtime( get_stylesheet_directory() . /react-app/build/bundle.js ),
    true
  )
  wp_enqueue_script(react-app-js)
}
add_action(wp_enqueue_scripts, tu_tema_enqueue_react)

Si deseas pasar datos desde PHP a React, usa wp_localize_script:

wp_localize_script(
  react-app-js,
  WP_DATA,
  array(
    ajax_url =gt admin_url(admin-ajax.php),
    nonce    =gt wp_create_nonce(mi_nonce)
  )
)

5. Iniciando la Aplicación React

En src/index.js monta tu componente principal:

import React from react
import { createRoot } from react-dom/client
import App from ./App

const container = document.getElementById(react-root)
const root = createRoot(container)
root.render(ltApp /gt)

En src/App.js empieza con algo sencillo:

import React, { useEffect, useState } from react

function App() {
  const [message, setMessage] = useState(Hola desde React en WordPress)

  useEffect(() =gt {
    console.log(window.WP_DATA)
  }, [])

  return (ltdivgtlth3gt{message}lt/h3gtlt/divgt)
}

export default App

6. Comunicación con AJAX de WordPress

1. Define una acción AJAX en functions.php:

add_action(wp_ajax_mi_accion, mi_funcion_ajax)
add_action(wp_ajax_nopriv_mi_accion, mi_funcion_ajax)

function mi_funcion_ajax() {
  check_ajax_referer(mi_nonce, nonce)
  wp_send_json_success(array(data =gt Respuesta desde PHP))
}

2. Consume en React:

fetch(window.WP_DATA.ajax_url, {
  method: POST,
  headers: { Content-Type: application/x-www-form-urlencoded },
  body: new URLSearchParams({
    action: mi_accion,
    nonce: window.WP_DATA.nonce
  })
})
.then(res =gt res.json())
.then(data =gt console.log(data))

7. Buenas Prácticas

• Versionado: Usa filemtime o hashes para busting de caché.
• Seguridad: Siempre valida el nonce y sanitiza entradas.
• Estructura modular: Separa componentes en carpetas.
• Optimización: Lazy loading de componentes con React.lazy y Suspense.
• Depuración: Activa el modo desarrollo solo local (NODE_ENV).

8. Comparativa de Métodos de Integración

Método	Ventajas	Desventajas
Bundle Webpack	Control total, optimización.	Configuración inicial más compleja.
CDN React JSX in-browser	Rápido de implementar.	Menor rendimiento, no apto producción.

Recursos Adicionales

• Incluir CSS y JavaScript en temas de WordPress
• Documentación oficial de React (ES)
• WordPress REST API Handbook

Conclusión

Integrar React en tu tema de WordPress es una excelente forma de modernizar la experiencia de usuario y aprovechar componentes reutilizables. Siguiendo esta guía, estarás listo para desplegar aplicaciones interactivas en tu sitio sin renunciar a la robustez del ecosistema WordPress.