Creación de una aplicación web con CMS sin cabeza y React

 

 

 

  • SmashingConf Nueva York 2024
  • ¡Registro!

  • Índice
    1. ¿Cómo se ve esto en la práctica?
    2. ¿Por qué debería preocuparse por los sin cabeza?
    3. CMS tradicional versus headless: ventajas y desventajas
      1. Ventajas del CMS tradicional
      2. Contras del CMS tradicional
      3. Ventajas del CMS sin cabeza
      4. Contras del CMS sin cabeza
      5. Mejores casos de uso para CMS sin cabeza
      6. Tipos de CMS sin cabeza
    4. Usando GraphCMS
    5. GraphCMS y GraphQL
    6. Construyendo nuestro proyecto
      1. Empezando
      2. Configurando reaccionar
      3. Creando nuestro diseño
      4. Importando nuestros componentes a App.js

    Este artículo presenta el concepto de CMS sin cabeza, un sistema de gestión de contenidos únicamente de backend que permite a los desarrolladores crear, almacenar, gestionar y publicar el contenido a través de una API. Brinda a los desarrolladores el poder de crear rápidamente excelentes experiencias de usuario, sin preocuparse por su impacto en la lógica empresarial de back-end.

     

    En este tutorial, aprenderá qué es Headless CMS y los pros y los contras de Headless CMS. Al final, habrá creado un carrito de compras usando GraphCMS (un (sistema de administración de contenido solo de backend). Después de eso, puede continuar y crear cualquier aplicación web de su elección usando un CMS sin cabeza y React.

    Para seguir adelante, necesita tener Node y npm/yarn instalados en su máquina. Si aún no lo ha hecho, siga estas guías rápidas para instalar hilo o npm en su máquina. También debe tener conocimientos básicos de consultas de React, Node.js y GraphQL. (¡Siempre puedes repasar tus habilidades de React y GraphQL , por supuesto!)

     

    A medida que los productos digitales continúan evolucionando, también lo hace el contenido que consumimos. Un sistema de gestión de contenidos escalable y multiplataforma es crucial para garantizar la velocidad de crecimiento de un producto. El CMS tradicional brinda la comodidad de tener el contenido, la interfaz de edición, plantillas y códigos personalizados, en un solo entorno. Pero con los cambios en esta era móvil, eso ya no es suficiente. Necesitamos una nueva generación de CMS, uno que pueda hacer que el contenido esté disponible a través de cualquier canal, momento en el que se requiere un CMS sin cabeza. Un CMS headless te brinda los beneficios de administrar el contenido y entregarlo a cualquier canal. La API hace que los contenidos estén disponibles a través de cualquier canal y en cualquier dispositivo utilizando la mayoría de las herramientas y lenguajes de programación favoritos, además de proporcionar un mayor nivel de seguridad y una escalabilidad mucho mejor.

    ¿Cómo se ve esto en la práctica?

    ¿Qué sucede cuando le quitas la interfaz a un CMS? La mayor distinción es que un sitio web no se puede crear solo con un CMS headless. Con un CMS tradicional todo sucede en el mismo lugar.

    Un CMS sin cabeza no tiene las características que le permiten crear su sitio: no tiene temas ni plantillas de sitio. Para usar un CMS sin cabeza, primero debe crear un sitio o una aplicación, u otra experiencia, y luego usar la API del CMS para conectar su contenido.

    ¿Por qué debería preocuparse por los sin cabeza?

    Un CMS sin cabeza viene con un enfoque compatible con API, que permite publicar contenido a través de una API (ya sea RESTful o GraphQL). Le permite utilizar la misma API para entregar contenido a través de varios canales, como aplicaciones de Android o IOS, relojes inteligentes, AR/VR, etc. Un CMS sin cabeza brinda a los desarrolladores la capacidad de aprovechar la creatividad rápidamente. Con un CMS tradicional, los cambios pueden llevar mucho tiempo; por ejemplo, para modificar una parte de su sitio, necesita volver a implementar todo el CMS. Con un CMS headless, puedes realizar cambios en tu frontend sin tener ningún impacto en la infraestructura backend, ahorrando así tiempo y recursos, lo que lo hace mucho mejor.

    CMS tradicional versus headless: ventajas y desventajas

    Puede resultar complicado elegir entre un CMS headless y uno tradicional. El hecho es que ambos tienen ventajas e inconvenientes potenciales.

    Ventajas del CMS tradicional

    • Permite una fácil personalización. Muchos de ellos tienen la opción de arrastrar y soltar, lo que facilita que una persona sin experiencia en programación trabaje sin problemas con ellos.
    • Es más fácil configurar tu contenido en un CMS tradicional porque todo lo que necesitas (gestión de contenido, diseño, etc.) ya está disponible.

    Contras del CMS tradicional

    • La combinación de front-end y back-end genera más tiempo y dinero para mantenimiento y personalización.
    • CMS tradicional, por ejemplo WordPress, depende en gran medida de complementos y temas que pueden contener códigos maliciosos o errores y ralentizar la velocidad del sitio web o blog. Aquí hay una lista de 18,305 complementos y temas de WordPress vulnerables. Aquí hay medidas de seguridad para los desarrolladores de Drupal . Consulte aquí para obtener más datos.

    Ventajas del CMS sin cabeza

    • Dado que el frontend y el backend están separados entre sí, le permite elegir qué tecnología frontend se adapta a sus necesidades. Esto también le da al desarrollador flexibilidad durante la etapa de desarrollo.
    • Las plataformas (blogs, sitios web, etc.) creadas con CMS sin cabeza se pueden implementar para funcionar en varias pantallas, como web, móvil, AR/VR, etc.

    Contras del CMS sin cabeza

    • Le brindan la molestia de administrar infraestructuras de back-end y configurar el componente de presentación de su sitio o aplicación.
    • Pueden ser más costosos de implementar: el costo involucrado en la creación de una plataforma fácil de usar con análisis es alto en comparación con el uso de CMS tradicionales.

    Mejores casos de uso para CMS sin cabeza

    El CMS headless puede tener los siguientes casos de uso:

     

    • Generadores de sitios estáticos (por ejemplo, Gridsome, Gatsby)

    Muchos sitios Jamstack creados con generadores de sitios estáticos como Gridsome, Hugo o Gatsby utilizan el CMS sin cabeza para administrar el contenido, no pueden acceder a una base de datos. Por lo tanto, el contenido se puede almacenar en un CMS sin cabeza y recuperarse a través de una API durante el tiempo de compilación e implementarse como archivos estáticos.

    • Aplicaciones móviles (iOS, Android)

    La ventaja de un CMS sin cabeza para ingenieros móviles es que la API les permite entregar contenido a una aplicación IOS/Android desde el mismo backend que administra el contenido de su sitio web, lo que mantiene todo sincronizado.

    • Aplicaciones web

    Este enfoque implica servir contenido a través de una API que luego es consumida por una aplicación web pero ofrece un lugar centralizado para administrar el contenido. Un ejemplo es una aplicación de comercio electrónico creada con HTML, CSS y JavaScript con contenido y datos de productos que se mantienen en el CMS y se sirven a través de una API externa.

    Tipos de CMS sin cabeza

    Hay una lista de CMS sin cabeza que quizás deberías consultar.

    Tenga en cuenta que este artículo no está escrito para promocionar ningún servicio o producto.

    • Contentful
      Un CMS sin cabeza impulsado por API diseñado para crear, administrar y distribuir contenido a cualquier plataforma. A diferencia de un CMS tradicional, ofrecen la posibilidad de crear tu modelo de contenido para que puedas decidir qué tipo de contenido deseas administrar.
    • GraphCMS
      Un CMS sin cabeza para usuarios que desean crear una infraestructura de contenido GraphQL para sus productos digitales. Este CMS está completamente construido como API enfocado desde cero, lo que permite a los creadores definir las estructuras, los permisos y las relaciones para los parámetros de la API. En este artículo, usaríamos GraphCMS debido a su enfoque de API GraphQL.
    • ButterCMS
      Un CMS que brinda total libertad para crear un sitio web o un blog de marca con SEO completo y admite cualquier pila tecnológica. Esta herramienta le ahorra dinero y tiempo de desarrollo del sitio. Butter CMS es una herramienta CMS sin mantenimiento y puede integrarse con cualquier lenguaje o marco. La potente interfaz le ayuda a definir y personalizar cada elemento de su sitio web sin ningún problema.
    • Directus
      Una herramienta de código abierto que incluye bases de datos SQL personalizadas con una API dinámica y proporciona una aplicación de administración intuitiva para administrar su contenido. Hospédese usted mismo de forma gratuita o utilice el servicio en la nube bajo demanda para gestionar todas sus experiencias digitales omnicanal.
    • Sanity
      Otra plataforma impulsada por API para gestionar contenido estructurado. Con Sanity, puedes administrar tu texto, imágenes y otros medios con API. También puede utilizar la aplicación de página única de código abierto Sanity Studio para configurar rápidamente un entorno de edición que pueda personalizar.
    • Agilidad
      Un CMS Headless centrado en JAMStack con gestión de páginas integrada. Más rápido de construir, administrar e implementar. Agility CMS es un CMS sin cabeza que prioriza el contenido, lo que le permite elegir cualquier lenguaje de programación y, al mismo tiempo, obtener la flexibilidad, la velocidad y la potencia que brindan las API livianas. A partir de ahí, agregue funciones como administración de páginas, comercio electrónico, venta de entradas en línea y búsqueda. Agility CMS se convierte en una plataforma de experiencia digital completa: ahorra tiempo, elimina limitaciones y permite experiencias fluidas en todos los canales digitales.
    • Netlify CMS
      Un CMS gratuito y de código abierto basado en git creado por Netlify. Le permite definir su modelo de contenido, integra la autenticación de terceros y amplía las capacidades de su backend (una aplicación de una sola página construida sobre React).

    Nota : Todos los ejemplos mencionados anteriormente tienen versiones gratuitas y de pago, excepto Directus y Netlify CMS que son gratuitas. Para obtener una lista de más CMS sin cabeza, consulte aquí .

     

    En este artículo, utilizamos GraphCMS, un sistema de gestión de contenido sin cabeza orientado a API GraphqQL que se encarga de nuestra arquitectura back-end.

    Usando GraphCMS

    El contenido es dinámico y multicanal; sin embargo, los sistemas de gestión de contenido (CMS) actuales carecen de la flexibilidad para satisfacer las demandas de la distribución de contenido digital actual. GraphCMS es el primer HeadlessCMS construido alrededor de GraphQL y ofrece una solución a este problema con su misión de facilitar el flujo de contenido sencillo entre creadores, desarrolladores y consumidores de contenido.

     

    GraphCMS acepta casi cualquier tipo de datos que pueda imaginar, desde imágenes, mapas, etc. Incluso facilita los roles y permisos. Si bien existen otras soluciones CMS sin cabeza, GraphCMS tiene como objetivo brindar una experiencia sin complicaciones a los desarrolladores; mediante el aprovechamiento de una especificación API llamada GraphQL . Elimina la necesidad de que varios SDK interactúen con la entrega de contenido y proporciona accesibilidad sencilla al contenido multicanal. Hace que la creación de aplicaciones de contenido enriquecido sea muy fácil.

    GraphCMS y GraphQL

    GraphCMS se basa únicamente en GraphQL , su especificación API principal. GraphQL es un lenguaje de consulta y tiempo de ejecución API. Fue desarrollado por Facebook en 2012 y lanzado de código abierto en 2015. Desde entonces, empresas como Pinterest, Github, Twitter, Intuit y Coursera han adoptado GraphQL para impulsar sus aplicaciones móviles, sitios web y API. GraphQL es similar a REST en su propósito principal de proporcionar una especificación para crear y utilizar API. Sin embargo, GraphQL, denominado extraoficialmente "REST 2.0", ha optimizado diferentes funciones clave ofrecidas por REST.

    La principal singularidad de GraphQL incluye el uso independiente del protocolo, la recuperación controlada de datos, campos y tipos editables y un manejo de errores en profundidad. Los resultados incluyen la eliminación de la redundancia de código, la prevención de la obtención excesiva o insuficiente de datos y una reducción significativa de las solicitudes de red.

    Como ejemplo concreto, tomemos la relación de una consulta con un suministro de noticias. Una publicación de noticias tiene un autor, un título y comentarios. Si utilizamos un CMS basado en REST, tendríamos que realizar 3 solicitudes de servidor diferentes para estos 3 puntos finales diferentes, mientras que, en un CMS basado en GraphQL, solo tendríamos que realizar 1 solicitud para los 3. En consecuencia, los resultados ofrecen relativamente consultas más rápidas y menos inundación de la red: en un caso de uso práctico, no sería solo una entidad la que realizaría múltiples solicitudes, sino miles y millones.

    GraphQL reduce la complejidad de crear API al abstraer todas las solicitudes a un único punto final. A diferencia de las API REST tradicionales, es declarativa; todo lo solicitado se devuelve.

    GraphCMS tiene un generoso nivel gratuito de 1 millón de solicitudes de operaciones API por mes y 500 GB de tráfico de activos. Además, GraphCMS proporciona una interfaz de administración Graphiql que le brinda acceso completo a sus datos y puede simplemente descargarlos todos y luego ejecutar y crear muchas mutaciones en su nuevo backend para migrar todo.

    En este artículo, utilizaremos el nivel gratuito de 1 millón de operaciones API por mes y 500 GB de tráfico de activos. Puede utilizar el mismo nivel para realizar pruebas; para proyectos que necesiten más que esto, consulte su página de precios .

    Construyendo nuestro proyecto

    Para ver el poder de Headless CMS usando GraphCMS, estaríamos construyendo un carrito de compras simple. Películas en excelente calidad Full HD

    Empezando

    Para comenzar con GraphCMS siga los pasos.

     

    • Cree una cuenta en GraphCMS . Puedes utilizar el nivel gratuito.

    ( Vista previa grande )

    • Si se registra correctamente, accederá a su panel de control. Haga clic en crear un nuevo proyecto.

    Haga clic en Crear nuevo proyecto. ( Vista previa grande )

    • Asegúrese de hacer clic en crear un proyecto desde cero.

    Seleccione Desde cero. ( Vista previa grande )

    • Establezca los detalles del proyecto para el proyecto, complete lo que se muestra en la imagen a continuación y haga clic en crear.

    Establecer detalles del proyecto. ( Vista previa grande )

    • En nuestro panel, crearíamos nuestros modelos y contenido.

    Crear modelo. ( Vista previa grande )

    • Seleccione el esquema en la barra lateral del panel para crear un esquema.

    GraphCMS tiene una increíble funcionalidad drag and drop UIque facilita la creación de esquemas sin problemas en minutos.

    Arrastrar y soltar campos. ( Vista previa grande )

    • Sigamos adelante y creemos system fieldsnuestro esquema.

      • nombre: ""
        • tipo: el tipo de campo es una cadena, texto de una sola línea.
        • Se requiere
        • descripción: Es el nombre del producto.
      • precio: ""
        • tipo: el tipo de campo es int.
        • Se requiere
        • descripción: Contendrá el precio de nuestro producto.
      • descripción: ""
        • tipo: el tipo de campo es una cadena, texto de varias líneas.
        • Se requiere
        • descripción: Este campo contendrá la descripción de nuestro producto.
      • imagen: ""
        • tipo: el tipo de campo es el archivo, que es un selector de activos.
        • Se requiere
        • descripción: Este campo de imagen contendrá la imagen de nuestro producto.

    Creando nuestro campo de nombre. ( Vista previa grande )

    Nota : Haga clic en la pestaña 'Avanzar' para seleccionar la opción requerida en nuestros campos.

    • Si todo salió bien, debería tener nuestro esquema como se muestra en la imagen a continuación:

    Campos del esquema final. ( Vista previa grande )

    • Actualmente no tenemos contenido. Haga clic en "Contenido" en la barra lateral que debería llevarlo a la sección Contenido y haga clic en "Crear nuevo".

    En este momento no tenemos contenido/publicación. ( Vista previa grande )

    • Agreguemos algunos contenidos para poder mostrarlos más adelante en nuestra aplicación usando React.

    Aquí se explica cómo agregar contenido. ( Vista previa grande )

    • Agregue algunos contenidos más si lo desea. Aquí está nuestro resultado.

    Nuestro contenido final. ( Vista previa grande )

    • A continuación, copie la URL del punto final de la API (haga clic en el Panel de control): este es el punto final único para la comunicación entre nuestro front-end de React y el back-end de GraphCMS.

    ( Vista previa grande )

     

    A continuación, hagamos accesible nuestro punto final API.

    • Navegue hasta Configuración bajo Permiso de API pública y haga clic en el menú desplegable, seleccione ABRIR y haga clic en el botón Actualizar.

    ( Vista previa grande )

    Configurando reaccionar

    La forma más sencilla de configurar React es utilizar Create-React-App . (Esta es una forma oficialmente admitida de crear aplicaciones React de una sola página y ofrece una configuración de compilación moderna sin configuración). La usaremos para iniciar la aplicación que crearemos.

    Desde su terminal, ejecute el siguiente comando:

    npx create-react-app smashing-stores cd smashing-stores

    Una vez que la instalación sea exitosa, inicie el servidor React ejecutando npm start.

    Reaccionar página de inicio. ( Vista previa grande )

    Creando nuestro diseño

    Al crear el diseño de nuestro proyecto, tendremos cinco componentes diferentes.

    Navbar Para mantener nuestro ícono de navegación y carrito
    Allproducts Para mostrar una lista de todos los productos
    Product El margen de beneficio para un solo producto.
    Footer El pie de página de nuestra aplicación.
    Cart Para guardar los artículos en nuestro carrito

    Para una configuración rápida, usaremos Bootstrap para crear nuestros componentes. Para incluir Bootstrap, usaríamos bootstrap CDN, abriríamos su index.html en la carpeta pública y agregaríamos el enlace a la sección principal:

    https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css

    Ahora podemos hacer uso de clases de arranque en nuestra aplicación.

    A continuación, cree una /componentscarpeta y cree los siguientes archivos dentro de ella:

    • Barra de navegación.js
    • Todos los productos.js
    • Producto.js
    • Pie de página.js
    • carrito.js

    Creando nuestra barra de navegación

    Abra Navbar.js y agregue el siguiente código:

    import React from 'react';const Navbar = () = { return ( nav className="navbar navbar-light bg-light" a href="/" className="navbar-brand"Smashing Stores/a button className="push_button red btn-outline-success my-2 my-sm-0" type="submit"Cart/button /nav );};export default Navbar;

    Declaramos un componente funcional Navbar, devolvemos nuestra etiqueta de navegación con una clase de arranque de navbar navbar-light bg-light. Lo que hacen estas clases es aplicar una barra de navegación con un fondo claro. Dentro de nuestro elemento de navegación, incluimos una etiqueta de anclaje con un enlace a just forward-slash(Homepage)y una clase de navbar-brand.

    El botón con estilo en el componente Navbar tiene una clase llamada navbar navbar-light bg-light. Lo que hace esta clase es garantizar que nuestro botón tenga un color de fondo azul claro y una sombra cuando se coloca sobre él.

     

    Creando nuestro Footer.js

    A continuación, creemos nuestro pie de página. Abra el archivo Footer.js y agréguele el siguiente código:

    import React from 'react';import '../App.css';const Footer = () = { return ( footer className="page-footer font-small bg-blue pt-4" div className="container text-center text-md-left" div className="row" div className="col-md-6 mt-md-0 mt-3" h5 className="text-uppercase font-weight-bold"Contact Us/h5 pYou can contact us on [email protected]/p /div div className="col-md-6 mb-md-0 mb-3" h5 className="text-uppercase font-weight-bold"Smashing Stores/h5 pBuilt with by a href="https://twitter.com/beveloper"beveloper/a/p /div /div /div div className="footer-copyright text-center py-3"© 2020 Copyright span Smashing Stores/span /div /footer );};export default Footer;

    Agregamos un correo electrónico de contacto usando h5un elemento de párrafo. Por último, en esta sección de pie de página, agregamos derechos de autor con el nombre "Smashing Stores".

    Nuestro pie de página necesita algo de estilo, por lo que agregaríamos los siguientes estilos al archivo App.css :

    footer { position: absolute; bottom: -55px; width: 100%; background-color: #333; color:#fff;}

    Antes de crear el componente de nuestro producto, debemos consultar GraphCMS para que nos envíe los detalles de nuestro producto para mostrar. Hagámoslo ahora.

    Conexión al backend de GraphCMS con GraphQL

    Para conectar nuestra aplicación al backend, necesitamos instalar un par de paquetes GraphQL. Una de las bibliotecas que podemos usar es apollo-boost , que le brinda al cliente la posibilidad de conectarse al backend de GraphQL mediante un URI ( identificador uniforme de recursos ) .

    El URI es el punto final proporcionado por GraphCMS y está disponible en la sección de puntos finales del panel.

    Ejecute el siguiente comando en su terminal para instalar los paquetes necesarios:

    npm install apollo-boost graphql graphql-tag react-apollo

    Una vez que haya terminado con la instalación, actualice el archivo index.js/src en el directorio con el siguiente código:

    import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import { ApolloProvider } from "react-apollo";import ApolloClient from "apollo-boost";import * as serviceWorker from './serviceWorker';const client = new ApolloClient({ uri: "YOUR_GRAPHCMS_ENDPOINT"});ReactDOM.render( ApolloProvider client={client} App / /ApolloProvider, document.getElementById('root'));serviceWorker.unregister();

    Aquí, envolvemos toda nuestra aplicación con el ApolloProviderque requiere un solo accesorio: el client. Carga ApolloProviderel esquema Graph CMS y nos da acceso a todas las propiedades del modelo de datos dentro de nuestra aplicación, lo cual es posible porque nuestro Appcomponente es hijo del ApolloProvidercomponente.

    Mostrando nuestros productos

    Si has llegado hasta aquí, date una palmadita en la espalda. Hemos podido cargar nuestro esquema desde GraphCMS en nuestra aplicación.

     

    El siguiente paso es buscar y exhibir nuestros productos. Cree una /all-productcarpeta debajo de la /componentcarpeta y luego cree un archivo index.js y agregue lo siguiente:

    import gql from "graphql-tag";const PRODUCTS_QUERY = gql` query { productses { id name price description createdAt image { id url } } }`;export default PRODUCTS_QUERY;

    ¿Qué son los “ productos ”? El nombre de nuestro modelo es productos, pero GraphQL pluraliza los modelos, de ahí el nombre.

    A continuación, creamos una variable llamada PRODUCTS_QUERYque almacena la consulta desde nuestro backend GraphQl. La función gql se utiliza para analizar (analizar un objeto, como si fuera en nuestro esquema) la cadena simple que contiene el código GraphQL (si no está familiarizado con la sintaxis de comillas invertidas, puede leer sobre los literales de plantilla etiquetados de JavaScript ).

    GraphCMS proporciona un práctico explorador GraphQL llamado (graphiql) específicamente para probar nuestra consulta.

    Probando nuestro punto final usando Graphiql Explorer en nuestro panel GraphCMS. ( Vista previa grande )

    Ahora que nuestra consulta funciona como debería. Sigamos adelante y creemos los componentes de nuestro producto.

    Creando el Allproductscomponente

    Abra el archivo Allproducts.js y agréguele el siguiente código:

    import React, { Component } from 'react';import { Query } from 'react-apollo';import PRODUCTS_QUERY from './all-products/index';import Product from './Product';import Cart from './Cart';import Navbar from './Navbar';class Allproducts extends Component { constructor(props) { super(props); this.state = { cartitems: [] }; } addItem = (item) = { this.setState({ cartitems : this.state.cartitems.concat([item]) }); } render() { return ( Query query={PRODUCTS_QUERY} {({ loading, error, data }) = { if (loading) return divFetching products...../div if (error) return divError fetching products/div const items = data.productses; return ( div Navbar/ div className="container mt-4" div className="row" {items.map(item = Product key={item.id} product={item} addItem={this.addItem} /)} /div /div /div ) }} /Query ); }};export default AllProducts;

    Aquí, envolvimos nuestros productos con el Query/componente y los pasamos PRODUCTS_QUERYcomo accesorios. Apollo inyectó varios accesorios en la función de renderizado del componente. Estos propios accesorios proporcionan información sobre el estado de la solicitud de red:

    loading Esto ocurre durante las solicitudes en curso.
    error Esto ocurre cuando las solicitudes fallan.
    data Estos son datos recibidos del servidor.

    Finalmente, recorremos todos los elementos recibidos y los pasamos como accesorio a nuestro componente Producto. Antes de ver cómo se ve, creemos nuestro componente Producto.

    Crear componente de producto

    Abra Product.js y agréguele el siguiente código:

    import React from 'react';const Product = (props) = { return ( div className="col-sm-4" div className="card" style={{width: "18rem"}} img src={props.product.image.url} className="card-img-top" alt="shirt"/ div className="card-body" h5 className="card-title"{props.product.name}/h5 p className="card-title"$ {props.product.price}/p p className="card-title"{props.product.description}/p button className="push_button red btn-primary" onClick={() = props.addItem(props.product)}Buy now/button /div /div /div );}export default Product;

    Dado que nuestro Product.js es un componente funcional que recibe detalles del producto a través de accesorios y los muestra, llamamos a la función addItem en el detector de eventos onClick para agregar el producto actual al carrito cuando se hace clic.

    Importando nuestros componentes a App.js

    Con nuestros componentes configurados, es hora de importarlos a nuestro componente base App.js.

    Ábrelo y agrégale lo siguiente:

    import React from 'react';import './App.css';import Footer from './components/Footer';import Products from './components/Allproducts';function App() { return ( div className="App" Products / Footer/ /div );}export default App;
    • De las líneas 3 a 4, importamos el componente Pie de página y Productos en el componente Aplicación.

    A continuación, escriba npm start en su terminal, luego navegue hasta https://localhost:3000 en su navegador y verá lo siguiente:

    Resultado final de nuestra aplicación web. ( Vista previa grande )

    Estamos cerca del final de nuestro proyecto, pero nuestros productos necesitan una función que agregue artículos al carrito.

    Creando nuestro componente de carrito

    Para incluir nuestra funcionalidad de carrito, necesitaríamos






    Tal vez te puede interesar:

    1. Creación de su propia biblioteca de validación de React: las características (Parte 2)
    2. Introducción a Quasar Framework: creación de aplicaciones multiplataforma
    3. Creación de un componente web retro que se puede arrastrar con iluminación
    4. Creación y acoplamiento de una aplicación Node.js con arquitectura sin estado con la ayuda de Kinsta

    Creación de una aplicación web con CMS sin cabeza y React

    Creación de una aplicación web con CMS sin cabeza y React

    SmashingConf Nueva York 2024 ¡Registro! Índice ¿Cómo se ve esto en la práctica?

    programar

    es

    https://pseint.es/static/images/programar-creacion-de-una-aplicacion-web-con-cms-sin-cabeza-y-react-1020-0.jpg

    2024-04-04

     

    Creación de una aplicación web con CMS sin cabeza y React
    Creación de una aplicación web con CMS sin cabeza y React

     

     

    Top 20