Cómo crear una máscara para su aplicación web con React y WordPress

Así que se formó como ingeniero web y ahora desea crear una tienda en línea ultrarrápida para sus clientes. La lista de productos debería aparecer en un instante, y la búsqueda tampoco debería perder más de una fracción de segundo. ¿Eso es cosa de soñar despierto?

Ya no. Bueno, al menos no es nada que no se pueda lograr con la combinación de la API REST de WordPress y React, una biblioteca de JavaScript moderna.

¿Esperar lo? ¿API REST de WordPress?

Sí, la API REST de WordPress lo ayudará a construir la base de back-end para su aplicación web. Esta es una buena opción para la tecnología de back-end de su aplicación web si está creando una solución basada en contenido. WordPress también interoperará sin problemas con otras tecnologías; podría usar Node.js como el foco de su aplicación para conectarse a otros servicios RESTful.

La API REST de WordPress es un cambio de juego para WordPress, que ahora puede llamarse con seguridad un marco de aplicación web, no solo un CMS. Ahora que el front-end y el back-end están completamente desacoplados, WordPress se puede usar como un back-end de aplicación móvil o como un back-end para cualquier sistema que se centre en el contenido.

Pero, ¿por qué WordPress? La razón: se sorprenderá de las funcionalidades que surgen de la caja con WordPress. Obtendrá una amplia gestión de usuarios, gestión de medios y un conjunto de API increíblemente amigable para los desarrolladores para ampliar su trabajo.

En este artículo, lo guiaré a través de la creación de un tema de WordPress SPA (aplicación de página única) utilizando la biblioteca de JavaScript llamada React, conectándose a la API REST de WP.

Saltemos a la construcción del tema

Este artículo asume que ya está familiarizado con las diversas API de WordPress existentes, en particular las que impulsan el desarrollo de temas para la estética de su sitio y las funcionalidades para los complementos de su sitio. También asumo que ha configurado su plataforma de desarrollo para WordPress, como la pila LAMP en un entorno Linux o MacOS.

Sin embargo, para simplificar, me referiré solo a las rutas absolutas visibles con la plataforma XAMPP que se usa con Windows.

Ahora, vamos a crear una instancia de WordPress en nuestro localhost, llamándola 'Celestial'. Ese es el nombre del tema de WordPress que vamos a usar para ayudarnos a establecer la dirección para construir futuros temas listos para usar con aplicaciones web impulsadas por la API REST de WordPress. Es posible que ya esté familiarizado con la jerarquía de plantillas de WordPress, pero con la API REST, ¡tiene la oportunidad de descubrir algo diferente!

Luego necesitamos crear una carpeta para el tema dentro de la carpeta wp-content\themes . Vaya a C:\xampp\htdocs\celestial\wp-content\themes\ (o equivalente) y cree una carpeta celestial . Agregue estos archivos dentro de la carpeta del tema celestial :

1. index.php
   El archivo catch-all para el tema.
2. style.css
   Contiene información sobre el tema (y no CSS real).
3. functions.php
   Para escribir la funcionalidad y la importación de archivos CSS y JS.

Agregue un archivo de imagen llamado captura de screenshot.jpg si desea que se muestre una imagen para su tema dentro del tablero.

Nota : el código de cada archivo tiene unas pocas líneas y se puede encontrar en GitHub .

A continuación, inicie sesión en su Panel de WordPress, diríjase a Apariencia → Temas y seleccione 'Celestial' como tema. Ahora que la base está en su lugar, comencemos a crear el tema.

Primeros pasos con React y Webpack para el tema

React es una biblioteca de interfaz de usuario muy popular respaldada y mantenida por Facebook. Según los resultados de la Encuesta de desarrolladores de Stack Overflow de 2017, "React es el más querido entre los desarrolladores".

Para iniciar el proyecto, debe inicializarlo como un proyecto NPM (Node Package Manager). Esto se hace con el comando npm init en la terminal (después de haber instalado Node.js y NPM en tu computadora). Inicializar el proyecto le pedirá cierta información de configuración. Después de una inicialización exitosa, NPM creará un archivo package.json en el directorio raíz del tema. Este archivo incluirá los detalles del proyecto y todas las dependencias del proyecto.

React ahora tiene una licencia de MIT, por lo que usaremos la versión 16 de React como la biblioteca de JavaScript para este proyecto. React tiene algunas características geniales bajo el capó, como Virtual DOM (una representación del documento dentro de la memoria) y tiene una gran cantidad de herramientas que lo rodean, como React Router. React también se usa en el Proyecto Calypso de WordPress, el panel de WordPress.com.

Ahora instalaremos los paquetes NPM necesarios en el proyecto:

1. Escriba npm install --save react react-dom en la terminal y presione enter para instalar los paquetes.

   

   Dado que estamos creando el tema como una aplicación de página única (SPA), necesitamos la ayuda de una herramienta como Webpack. Escribiremos código como diferentes componentes, y Webpack nos ayudará a empaquetarlos todos juntos y generarlos como un único archivo .js o .css. En resumen, es un paquete de módulos.
   
   Webpack primero debe instalarse globalmente en su computadora. Para hacer eso, nuevamente podemos utilizar NPM.
2. Escriba el comando npm install -g webpack para obtener la última versión estable de Webpack instalada globalmente en su sistema.
   
   A continuación, instalaremos paquetes NPM compatibles con Webpack en nuestra aplicación.
3. Vaya al archivo package.json en mi repositorio de git y copie el resto de las dependencias desde allí en la sección de dependencias de su paquete.json . Luego ejecute npm install nuevamente para instalar todos los paquetes dentro de package.json .

    { "name": "celestial", "version": "1.0.0", "description": "A basic theme using the WordPress REST API and React", "main": "index.js", "dependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.1", "file-loader": "^1.1.5", "image-webpack-loader": "^3.4.2", "node-sass": "^4.5.3", "path": "^0.12.7", "react": "^16.0.0", "react-dom": "^16.0.0", "react-router-dom": "^4.2.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack": "^3.6.0" }, "devDependencies": {}, "scripts": { "build": "webpack", "watch": "webpack --watch" }, "keywords": [ "blog", "decoupled", "react", "rest-api" ], "author": "Muhammad Muhsin", "license": "GPL-3.0" }

   
   Lo anterior es una lista de todos los paquetes requeridos en el archivo package.json para este proyecto.
4. Copie las configuraciones de GitHub y péguelas en el archivo webpack.config.js de su carpeta de temas.

    var ExtractTextPlugin = require("extract-text-webpack-plugin"); var path = require('path'); module.exports = { entry: { app: './src/index.jsx' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader','sass-loader'], publicPath: 'dist' }) }, { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.(jpe?g|png|gif|svg)$/i, use: [ 'file-loader?name=[name].[ext]&outputPath=images/&publicPath=https://localhost/celestial/wp-content/themes/celestial/dist/images', 'image-webpack-loader' ] }, { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000&name=fonts/[name].[ext]' }, { test: /\.(ttf|eot)$/, loader: 'file-loader?name=fonts/[name].[ext]' } ] }, resolve: { extensions: ['.js', '.jsx'] }, plugins: [ new ExtractTextPlugin({ filename: "style.css", allChunks: true }) ] }

   
   Importante : tenga en cuenta que module.exports → module → rules[3] → use → publicPath puede cambiar según la ubicación de las imágenes dist de su proyecto en localhost. Si esto es incorrecto, es posible que las imágenes no se muestren correctamente en la aplicación web.
5. Posteriormente, estos comandos se pueden utilizar para compilar el proyecto:
   • webpack o npm run build para compilar el proyecto, o
   • webpack --watch o npm run watch para compilar el proyecto y observar los cambios.

Nota : para comprender mejor Webpack, lea este artículo de Joseph Zimmerman en Smashing Magazine .

Extendiendo la API REST de WordPress

La API REST de WordPress viene con muchos puntos finales diferentes para obtener publicaciones, páginas, medios, etc. Sin embargo, es posible que no siempre tengan todos los detalles en su respuesta. Por ejemplo, el método de publicación no proporciona la URL de la imagen destacada ni el nombre del autor. Por lo tanto, tenemos que hacer llamadas separadas a cada uno de estos elementos.

Pero, ¿qué sucede si desea que sus propios datos aparezcan en la respuesta de las publicaciones? Ahí es donde entra featured_image_src juego la magia de extender la API REST. El siguiente código agregará dos variables adicionales en la respuesta a la solicitud de publicaciones , a saber, nombre_autor y author_name . El código está dentro del archivo functions.php :

 // Add various fields to the JSON output function celestial_register_fields() { // Add Author Name register_rest_field( 'post', 'author_name', array( 'get_callback' => 'celestial_get_author_name', 'update_callback' => null, 'schema' => null ) ); // Add Featured Image register_rest_field( 'post', 'featured_image_src', array( 'get_callback' => 'celestial_get_image_src', 'update_callback' => null, 'schema' => null ) ); // Add Published Date register_rest_field( 'post', 'published_date', array( 'get_callback' => 'celestial_published_date', 'update_callback' => null, 'schema' => null ) ); } add_action( 'rest_api_init', 'celestial_register_fields' ); function celestial_get_author_name( $object, $field_name, $request ) { return get_the_author_meta( 'display_name' ); } function celestial_get_image_src( $object, $field_name, $request ) { if($object[ 'featured_media' ] == 0) { return $object[ 'featured_media' ]; } $feat_img_array = wp_get_attachment_image_src( $object[ 'featured_media' ], 'thumbnail', true ); return $feat_img_array[0]; } function celestial_published_date( $object, $field_name, $request ) { return get_the_time('F j, Y'); }

Una variable global de JavaScript

Hay ciertas constantes de WordPress (o conocidas como 'variables') que usaremos en toda la aplicación React. Esta será información sobre las diversas rutas de la aplicación (y más adelante serán específicas de WooCommerce).

Esta variable se define dentro del archivo functions.php . Se llamará 'CelestialSettings' y se agregará a celestial-scripts , el identificador del archivo app.js en cola:

 wp_enqueue_script( 'celestial-script', get_stylesheet_directory_uri() . '/dist/app.js' , array(), '1.0', true ); $url = trailingslashit( home_url() ); $path = trailingslashit( parse_url( $url, PHP_URL_PATH ) ); wp_scripts()->add_data( 'celestial-script', 'data', sprintf( 'var CelestialSettings = %s;', wp_json_encode( array( 'title' => get_bloginfo( 'name', 'display' ), 'path' => $path, 'URL' => array( 'api' => esc_url_raw( get_rest_url( null, '/wp/v2' ) ), 'root' => esc_url_raw( $url ), ), 'woo' => array( 'url' => esc_url_raw( 'https://localhost/celestial/wp-json/wc/v2/' ), 'consumer_key' => 'ck_803bcdcaa73d3a406a0f107041b07ef6217e05b9', 'consumer_secret' => 'cs_c50ba3a77cc88c3bf46ebac49bbc96de3a543f03' ), ) ) ) );

El código anterior muestra un ejemplo de obtención de variables de WordPress (PHP) en el front-end, una técnica importante y muy útil al crear un tema desacoplado. Esta variable de objeto contiene el título del sitio, la ruta, la URL de la API y la raíz y tres variables relacionadas con WooCommerce (explicadas más adelante).

Reaccionar y JSX

React es diferente del resto de las principales bibliotecas de JavaScript. Lo que quiero decir con eso es que generalmente escribimos JavaScript dentro de nuestro HTML. Sin embargo, cuando se trata de React, escribimos HTML dentro de nuestro código JavaScript. Para ser más precisos, escribimos JSX dentro de JS. JSX es muy similar a HTML pero tiene algunas diferencias. El atributo class se escribe como className , por ejemplo. Esto luego se convierte a JavaScript simple a través de Webpack y Babel y se guarda dentro de app.js.

Sin embargo, existen algunas restricciones al escribir JSX. Por ejemplo, solo podemos tener un hijo dentro de nuestro método render() , que servirá como elemento raíz para un Componente. Sin embargo, la ventaja es que es más fácil de depurar. Podemos saber exactamente dónde hemos cometido un error, mientras que en HTML normal nuestro error generalmente no se mostrará de forma explícita. Escribiremos JSX para este proyecto y, por lo tanto, los archivos JavaScript tendrán una extensión de .jsx . Sin embargo, también podría ser .js si lo prefiere.

Cree los siguientes archivos dentro de la carpeta src :

1. index.jsx (el archivo principal y el que contiene las configuraciones de React Router)
2. header.jsx (el componente de encabezado)
3. footer.jsx (el componente de pie de página)
4. posts.jsx (para el archivo de publicaciones)
5. post-list.jsx (componente para una publicación individual dentro de posts.jsx )
6. post.jsx (para una sola publicación)
7. products.jsx (contiene todos los productos de WooCommerce)
8. product.jsx (muestra un solo producto de WooCommerce)
9. style.scss (para contener todo el código CSS en formato SASS)

ReactDOM.render()

El archivo index.jsx es la raíz del proyecto. Lo que quiero decir con eso es que index.jsx contiene el componente App que se representa en el DOM.

 import { render } from 'react-dom'; // importing render from ReactDOM const App = () => ( // defining the routes <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> // the root path </Switch> </div> <Footer /> </div> ); // React Router const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( // rendering to the DOM by replacing #page with the root React component (routes), document.getElementById('page') // rendering the route );

Los otros componentes se especifican dentro de React Router y se cargarán al visitar las diferentes rutas.

Así es como escribimos componentes modulares donde todos los diferentes componentes finalmente terminan en index.jsx .

Componentes con estado frente a componentes sin estado

Habría notado que los componentes se escriben en cualquiera de las siguientes dos formas:

1. const App = () => (
2. class Post extends React.Component {

La primera forma es cómo escribimos componentes sin estado y la segunda es un ejemplo de componentes con estado. Sin estado significa que el componente no tiene 'estado' en él. 'estado' es esencialmente una variable que tiene información dentro del componente, y cada vez que la variable cambia, el componente se vuelve a representar. Los componentes con estado también se conocen como "componentes inteligentes". Por tanto, las variables de estado se utilizan para la comunicación interna dentro de ese componente.

El segundo tipo, los componentes sin estado, no tienen la variable de estado en ellos y, a veces, se denominan "componentes tontos". Sin embargo, al igual que los componentes con estado, tienen "accesorios", que son propiedades que les transmiten sus componentes principales.

Los componentes con estado tienen los métodos de ciclo de vida de React, mientras que los sin estado solo tienen el método render() , que es el método predeterminado.

Métodos de ciclo de vida de React

Estos son métodos llamados en diferentes etapas del ciclo de vida del componente, que podemos anular para ejecutar nuestro propio código en esas instancias. Estamos utilizando los siguientes métodos en nuestra aplicación:

• constructor()
  Se llama antes de que se monte un componente.
• componentDidMount()
  Se invoca inmediatamente después de montar un componente.
• render()
  El método que se llama para representar el contenido JSX (HTML).
• componentDidUpdate()
  Se llama cuando se actualiza el componente.
• componentWillUnmount()
  Se invoca cuando se va a eliminar un componente.

Nota : para obtener más información sobre los componentes y su ciclo de vida, lea la documentación aquí .

Promesas de JavaScript

Vamos a utilizar JavaScript Promises para obtener datos de nuestra API REST de WordPress. Primero, tenemos la URL de la API REST en nuestro functions.php , donde la hemos agregado como una variable de JavaScript a la que podemos acceder desde el front-end.

Usaremos el método API de recuperación de JavaScript para obtener datos de los diferentes puntos finales. Estamos agregando un cargador para mostrar al usuario mientras se recupera el contenido:

 getMorePosts() { var that = this; var totalPages; // adding a loader jQuery("#loader").addClass("active"); this.setState({ page: this.state.page + 1 }); fetch(CelestialSettings.URL.api + "/posts/?page=" + this.state.page) .then(function (response) { for (var pair of response.headers.entries()) { // getting the total number of pages if (pair[0] == 'x-wp-totalpages') { totalPages = pair[1]; } if (that.state.page >= totalPages) { that.setState({ getPosts: false }) } } if (!response.ok) { throw Error(response.statusText); } return response.json(); }) .then(function (results) { var allPosts = that.state.posts.slice(); results.forEach(function (single) { allPosts.push(single); }) that.setState({ posts: allPosts }); // removing the loader jQuery("#loader").removeClass("active"); }).catch(function (error) { console.log('There has been a problem with your fetch operation: ' + error.message); jQuery("#loader").remove(); }); }

Uso del enrutador React

React Router es la biblioteca que manejará el enrutamiento del lado del cliente para nuestra aplicación. El enrutamiento del lado del servidor es posible con WordPress, pero para lograr una verdadera experiencia SPA necesitamos la ayuda de React Router.

Desde la versión 4, React Router se ha dividido en tres paquetes: react-router , react-router-dom y react-router-native . Usaremos react-router-dom para este proyecto ya que es el que se usa en las aplicaciones web.

Dado que react-router-dom ya está instalado, podemos escribir la configuración del enrutador dentro del archivo index.jsx . El código será el siguiente:

 const App = () => ( <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> <Route exact path={CelestialSettings.path + 'posts/:slug'} component={Post} /> <Route exact path={CelestialSettings.path + 'products'} component={Products} /> <Route exact path={CelestialSettings.path + 'products/:product'} component={Product} /> <Route path="*" component={NotFound} /> </Switch> </div> <Footer /> </div> ); // Routes const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( (routes), document.getElementById('page') );

El código anterior se encargará de todo el enrutamiento, manejado en el lado del cliente. El * en la última línea dice que cualquier otra ruta no mencionada anteriormente llevará al usuario a la página '404 No encontrado'.

La etiqueta <Link to=""> se usa en lugar de la etiqueta <a href=””> para vincular entre diferentes páginas usando React Router:

 <div className="navbar-nav"> <Link className="nav-item nav-link active" to={CelestialSettings.path} >Home <span className="sr-only">(current)</span></Link> <Link className="nav-item nav-link" to={CelestialSettings.path + "products/"} >Products</Link> </div>

Obtención de datos de prueba

Ahora que ha creado el tema, es hora de agregar algunos datos. Una forma de agregar datos es crear nuestro propio contenido. Sin embargo, existe una manera más fácil (y mejor) de agregar datos a nuestro sitio de WordPress. Este método importa datos de marcador de posición de una fuente externa:

• Diríjase a https://codex.wordpress.org/Theme_Unit_Test y descargue los datos de prueba de la unidad de tema
• Dirígete a Herramientas > Importar > WordPress para instalar el importador de WordPress.
• Después de instalar el importador de WordPress, haga clic en Ejecutar importador.
• Haga clic en 'Elegir archivo' en el importador
• Seleccione el archivo descargado e importe los datos de prueba de la unidad del tema de WordPress

Ahora debe seleccionar el archivo theme-unit-test-data.xml y todo el contenido del marcador de posición ahora está en su sitio.

Integración WooCommerce

Ahora, estamos listos para impulsar nuestra tienda usando React. Para ello utilizaremos los archivos products.jsx y product.jsx , cuyo código es similar a posts.jsx y p ost.jsx respectivamente.

Agregaremos tres variables más a CelestialSettings en 'woo' (ver Una variable global de JavaScript):

1. URL
2. consumer_key
3. consumer_secret

La clave del consumidor y el secreto del consumidor deben generarse desde Dashboard → WooCommerce → Settings → API → Keys/Apps .

Para la URL de woo, debe agregarla manualmente (ya que WooCommerce permite la transferencia solo a través de SSL, agregue la URL con https, es decir, https://localhost/celestial/wp-json/wc/v2/ ).

Copie la clave del consumidor y el secreto del consumidor y péguelos en los lugares apropiados dentro de functions.php . Esto servirá como autenticación para acceder a WooCommerce a través de una llamada API.

Visite la documentación de la API REST de WooCommerce para obtener más información sobre su API. El archivo products.jsx tiene el código para llenar la tienda con productos. Los productos pueden ser agregados por un administrador desde el tablero. Simplemente vaya a Tablero → Productos → Agregar nuevo e ingrese los detalles del producto.

Cuando haga clic en un determinado producto, será llevado a la página product.jsx :

El código de la página anterior es similar a post.jsx :

 renderProduct() { return ( <div className="card"> <div className="card-body"> <div className="col-sm-4"><img className="product-image" src={this.state.product.images ? this.state.product.images[0].src : null} alt={this.state.product.images ? this.state.product.images[0].alt : null } /></div> <div className="col-sm-8"> <h4 className="card-title">{this.state.product.name}</h4> <p className="card-text"><strike>${this.state.product.regular_price}</strike> <u>${this.state.product.sale_price}</u></p> <p className="card-text"><small className="text-muted">{this.state.product.stock_quantity} in stock</small></p> <p className="card-text">{jQuery(this.state.product.description).text()}</p> </div> </div> </div> ); }

enlaces permanentes

Para que el tema funcione correctamente, debemos configurar los siguientes enlaces permanentes dentro de Dashboard → Configuración → Enlaces permanentes :

1. En Configuración común → Estructura personalizada : https://localhost/celestial/posts/%postname%/

2. En Enlaces permanentes de productos → Base personalizada : /products/

Si no configura los enlaces permanentes como se indicó anteriormente, es posible que el tema no funcione como desea.

Una solución de WooCommerce

Cuando navega a localhost/celestial/products , es probable que obtenga un espacio en blanco donde se supone que se cargan los productos. Esto sucede porque WooCommerce necesita solicitudes autenticadas, mientras que nuestro host local no es https. Para solucionar el problema:

1. Visite https://localhost/celestial/wp-json/wc/v2/products. Esto nos dará una advertencia:

1. Haga clic en AVANZADO > Proceder a localhost (inseguro) .
2. Ahora, si regresa a la página de productos, los artículos se mostrarán correctamente.

Nota : si tiene Valet en una Mac, debe ejecutar Valet Secure en su sitio para asegurar el sitio local con un certificado TLS. Esta es otra forma de solucionar el problema.

¿Qué es ScrollMagic?

ScrollMagic es una librería que nos permite realizar determinadas acciones al desplazarnos por la página. Para usar ScrollMagic, pondremos en cola la biblioteca de JavaScript ScrollMagic en functions.php . Estamos usando ScrollMagic para dos instancias en este proyecto:

1. Para cargar publicaciones de forma diferida dentro del componente posts.jsx :

    componentDidMount() { var that = this; window.onbeforeunload = function () { window.scrollTo(0, 0); } // init ScrollMagic Controller that.state.controller = new ScrollMagic.Controller(); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#colophon", triggerHook: "onEnter" }) .addTo(that.state.controller) .on("enter", function (e) { if (that.state.getPosts && that.getMorePosts !== null) { that.getMorePosts(); } }); }

   
   Publicaciones de carga diferida dentro del componente posts.jsx
2. Para mostrar una animación de aparición gradual para las publicaciones que aparecen al desplazarse por las publicaciones y los productos en los componentes posts.jsx y products.jsx , respectivamente:

    componentDidUpdate() { var FadeInController = new ScrollMagic.Controller(); jQuery('.posts-container .col-md-4.card-outer').each(function () { // build a scene var FadeInScene = new ScrollMagic.Scene({ triggerElement: this.children[0], reverse: false, triggerHook: 1 }) .setClassToggle(this, 'fade-in') .addTo(FadeInController); }); }

   
   Aplicación de una animación de aparición gradual para las publicaciones que aparecen a medida que se produce el desplazamiento

Ahora estamos listos para ver nuestro tema desde el front-end. Navegue a localhost/celestial en su navegador web y vea su tema en acción.

¡Y date una palmadita en la espalda, porque ahora has creado con éxito el tema!

Otros temas de WordPress con bibliotecas de JavaScript

Si esto le resultó útil, puede echar un vistazo a otros impresionantes temas de WordPress desacoplados creados con bibliotecas/marcos de JavaScript modernos:

• Foxhound: El primer tema desacoplado en llegar al repositorio de temas de WordPress. Escrito por Kelly Dwan, este tema usa React, Redux y React Router.
• Anadama React: Otro tema del mismo autor, pero usando Flux en lugar de Redux, y Page en lugar de React Router.
• Wallace: Escrito por Kirby, este tema usa Angular con la API REST de WordPress.
• Picard: escrito por Automattic para mostrar la capacidad de la API REST de WordPress.
• React Verse: un tema de React y Redux que escribí basado en Foxhound.

Próximos pasos

Las secciones principales que quería mostrarles ya están listas. Puede continuar con la construcción del proyecto para obtener más información. Estas son algunas recomendaciones que podría seguir:

1. Una tienda completa con el complemento WooCommerce, que incluye pago y carrito de compras;
2. Una página para archivo, etiqueta, taxonomía, etc.;
3. Gestión de estados con Redux o Flux.
   

¡Buena suerte y feliz codificación!