Post Top Ad

Your Ad Spot

jueves, 15 de octubre de 2020

Tutorial de Frontity: el Framework de React para WordPress

 En este tutorial, aprenderemos sobre Frontity, The React framework para WordPress.

WordPress es el sistema de gestión de contenido más popular construido sobre PHP, mientras que React es la biblioteca más front-end para crear interfaces de usuario. La combinación de estas dos herramientas te permitirá crear increíbles aplicaciones modernas.

También puede migrar sus aplicaciones de WordPress para usar un front-end de React moderno y seguir usando WordPress como un sistema de administración de contenido mientras moderniza sus aplicaciones con las últimas tecnologías en la web hoy.

Utilice Frontity para crear aplicaciones de WordPress / React

Aprendamos sobre Frontity, una herramienta que te permite crear sitios web usando WordPress y React de la manera más fácil.

Según el sitio web oficial :

Frontity es la forma más fácil de crear sitios web ultrarrápidos usando WordPress y React. Código abierto y de uso gratuito.

Cómo funciona Frontity

Cuando usa WordPress y React, WordPress funciona como un CMS sin cabeza, solo para crear y administrar su contenido gracias a la API REST de WordPress, que le permite recuperar su contenido desde la interfaz JavaScript / React.

Las aplicaciones de Frontity creadas con React sirven su contenido y se ejecutan por separado en un servidor Node.js.

Frontity se conecta a la perfección con WordPress para que pueda concentrarse en construir su sitio web o blog. No necesita lidiar con una configuración compleja.

Usando Frontity por ejemplo

Veamos ahora cómo usar Frontity con un ejemplo. Primero, como requisito previo, debe tener Node.js instalado en su máquina de desarrollo local.

Puede ejecutar Frontity usando el npxcomando de la siguiente manera:

$ npx frontity create wpreactapp

Espere a que el comando instale las dependencias y genere su aplicación, luego ejecute los siguientes comandos para iniciar un servidor de desarrollo local:

$ cd wpreactapp
$ npx frontity dev

Gracias a Frontity, podrá conectar su aplicación React a la API REST de WordPress, diseñar e implementar su aplicación en poco tiempo con la agrupación y la representación del lado del servidor para mejorar el rendimiento y los propósitos de SEO.

Configuración de su aplicación Frontity

Puede configurar su aplicación Frontity en el frontity.settings.jsarchivo.

Por ejemplo, simplemente puede establecer el state.source.apiatributo en la URL de su API REST de WordPress para conectar su contenido de CMS y obtener todas sus publicaciones.

Puede configurar el enrutamiento, la navegación, los paquetes y las etiquetas de encabezado, etc. Puede encontrar más opciones en los documentos .

Conexión de la API REST de WordPress a su aplicación Frontity

Puede conectar fácilmente la URL de la API REST de WordPress a Frontity, que funciona con sitios web WordPress.orgWordPress.com.

Simplemente abra y agregue su punto final REST de WordPress al state.source.apiatributo de la siguiente manera:

//frontity.settings.js

export const settings = {
  packages: [
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          api: "https://frontity.org/wp-json"
        },
      },
    }
  ],
};

Obtenga más información sobre cómo conectar WordPress .

Diseña tu tema Frontity con CSS-in-JS

Después de conectar su API REST de WordPress, querrá personalizar su interfaz de usuario usando CSS en JS, que es un enfoque popular entre los desarrolladores de React.

Estas son las opciones disponibles para diseñar tu aplicación.

Estilo con estilo

import { styled } from "frontity";

const StyledDiv = styled.div`
    text-align: center;
    background: white;
`;

El apoyo CSS

import { css } from "frontity";

const Component = () => (
    <div css={css`background: red`}>
        React with WordPress App
    </div>
);

Accesorio de estilo de React

const Page = () => (
  <div style=>
    React with WordPress App
  </div>
);

En lugar de usar el accesorio de estilo de React, probablemente sea mejor que use los dos primeros métodos enumerados anteriormente.

Utilizando <Global>

También puede agregar estilos globales en el componente Global de la siguiente manera:

import { Global, css } from "frontity";

const Page = () => (
    <>
        <Global
          styles={css`
            body {
                margin: 0;
                color: red;
            }
          `}
        />
        <OtherContent />
    </>
);

Mira este ejemplo en vivo .

Implementar su aplicación Frontity

Después de conectar su aplicación web a WordPress y diseñar la interfaz de usuario de React con CSS. Estará listo para implementarlo en cualquier Node.js o host sin servidor.

Regrese a su interfaz de línea de comandos y ejecute los siguientes comandos:

$ npx frontity build

Puede alojar el contenido de la buildcarpeta en cualquier alojamiento de Node.js.

Consulte más información en los documentos .

Consulte la guía oficial sobre cómo implementar Frontity con Vercel.

Frontity recomienda que utilice dos dominios o subdominios: uno para el backend de WordPress y un dominio principal para el frontend de Frontity / React.

También puede entregar una versión lista para producción de su aplicación localmente usando el siguiente comando:

$ npx frontity serve

Conclusión

En este tutorial, hemos aprendido sobre Frontity, una herramienta para crear aplicaciones web modernas con la API REST de WordPress y un front-end de React.

Al utilizar el CMS WordPress más popular y la biblioteca de React front-end más popular, podrá aprovechar los beneficios de ambos mundos. WordPress con sus funciones de gestión de contenido fáciles de usar e interfaces de usuario modernas.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas