Algunos desarrolladores simplemente prefieren trabajar en React. Realmente no los culpo, porque a mí también me gusta React. Quizás eso es lo que aprendieron primero. Lo he estado usando el tiempo suficiente, solo me reconforta. Pero sobre todo es el modelo de componente fuerte lo que me gusta. Hay algo bueno en una base de código donde las cosas se construyen a partir de componentes con tareas y responsabilidades claras.
Sin embargo, no es muy común ver sitios de WordPress creados con React. La forma estándar de usar WordPress es a través de temas que son esencialmente estilos y archivos PHP que manejan las plantillas. Sin embargo, Frontity está cambiando eso. Frontity es un marco impulsado por React que recopila la API de su sitio de WordPress y construye todo el front-end en React con todas las herramientas poderosas que espera de ese tipo de entorno.
Dios mío, eso es una configuración rápida
Así es como pude empezar. En la línea de comando, lo hice:
npx frontity create my-appLuego entré en la carpeta que creó e hice:
npx frontity devEso genera instantáneamente un sitio para que comiences a trabajar.
Para hacerlo sentir más real para mí, entré en frontity.settings.js y cambió la API de origen para que apunte a CSS-Tricks:
{
name: "@frontity/wp-source",
state: {
source: {
api: "https://css-tricks.com/wp-json",
},
},
},Y ahora mira lo que obtengo:
Eso es salvaje. Para algunos proyectos, está listo para implementarse.
Echa un vistazo a su vídeo de introducción que explica exactamente este tema.
Llegando al trabajo
Mi primer instinto con cosas como esta es poner mis manos en el estilo de inmediato. El tema que se instala de forma predeterminada es el tema de Marte y tienen una buena guía para ayudarlo a comprender cómo funciona. El tema usa Emotion para diseñar, por lo que los componentes tienen estilos con los que puede meterse directamente en ellos. Encontré la <HeadContainer> componente en index.js e inmediatamente hizo el background: red ¡cambio!
const HeadContainer = styled.div`
display: flex;
align-items: center;
flex-direction: column;
background-color: red;
`;Recargó el módulo en caliente ese lechón instantáneamente:
¿Es esta una de esas tecnologías exclusivas del lado del cliente?
Eso es lo que pensé para mí. Quiero decir, una de las ventajas de usar WordPress tal como está es que obtienes la representación del servidor de forma gratuita. Eso significa que no hay preocupaciones de SEO (sabemos que los sitios renderizados del lado del cliente pueden tardar una semana o más en ser rastreados por cada cambio). Eso significa resistencia y velocidad.
¡Frontity hace renderizado del lado del servidor! Utiliza renderizado isomórfico, lo que significa que necesita un servidor Node para renderizar las páginas, ¡pero eso significa que el navegador obtendrá HTML completamente formado para las páginas!
Es una combinación perfecta para Vercel, básicamente.
De manera similar a lo fácil que es montar un sitio nuevo y ejecutarlo en desarrollo, todo lo que tiene que hacer para prepararlo para la producción es:
npx frontity buildLuego ejecute el servidor de nodo:
npx frontity serveFrio.
También me gusta mucho que haya una comunidad en torno a todo esto. Si necesita ayuda, la obtendrá.
Este es el mejor escenario de todos los mundos.
Siempre estoy muy contento de construir sitios con WordPress, y el doble ahora que tenemos el editor de bloques para usar. Realmente me gusta tener una experiencia de editor que me ayude a escribir y crear el tipo de páginas que quiero crear.
Pero también me gusta trabajar con arquitecturas basadas en componentes que tienen entornos de desarrollo local rápidos, fáciles de usar y que se actualizan en caliente. Una vez que trabajas en este tipo de entorno de desarrollo, ¡es difícil usar cualquier otra cosa! Hermoso DX.
Y también quiero asegurarme de que los sitios que implemento en producción sean rápidos, sólidos, resistentes, accesibles y compatibles con SEO.
Obtendría todo eso con un sitio de Frontity.
Otra cosa que me gusta aquí es que los propios Automattic están de acuerdo con todo esto. No solo en espíritu, sino que son literalmente grandes inversores. Creo que son muy inteligentes al ver esto como una parte importante del ecosistema de WordPress. Construir con WordPress no significa no hacerlo con React, especialmente con Frontity haciendo gran parte del trabajo pesado.