Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico

Rate this content
Bookmark

- React Bricks: por qué lo construimos, qué es y cómo funciona

- Crea una cuenta gratuita

- Crea un nuevo proyecto con Next.js y Tailwind

- Explora la estructura del directorio

- Anatomía de un Brick

- Crea un nuevo Brick (Texto-Imagen)

- Añade un título y descripción con edición visual RichText

- Añade una imagen con edición visual

- Añade controles de barra lateral para editar props (relleno y lado de la imagen)

- Anidación de Bricks utilizando el componente Repeater

- Crea un brick de galería de imágenes

- Publica en Netlify o Vercel

- Tipos de página y campos personalizados

- Acceso a los valores meta de la página

- Internacionalización

- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones

- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks

- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados

This workshop has been presented at React Summit 2023, check out the latest edition of this React Conference.

FAQ

React Bricks es un CMS con edición visual basado en componentes de React que combina la edición visual con la flexibilidad de la edición basada en formularios, optimizado tanto para desarrolladores como para editores de contenido.

React Bricks fue creado para proporcionar una síntesis entre las herramientas de edición visual y los CMS tradicionales, ofreciendo una solución que permite a los desarrolladores utilizar sus frameworks y herramientas favoritas mientras proporciona a los editores una experiencia de edición visual intuitiva y potente.

Para comenzar con React Bricks, se puede ejecutar el comando CLI 'npx create-reactbrics-app' para crear una nueva aplicación y seguir las instrucciones de configuración que incluyen seleccionar un framework y cargar contenido predeterminado.

Sí, React Bricks permite una gran flexibilidad en el diseño, soportando diferentes frameworks como NextJS y ofreciendo la libertad de elegir y cambiar de idea sobre la plataforma de alojamiento y el diseño específico.

React Bricks ofrece ventajas específicas como la flexibilidad y autonomía para los desarrolladores, control sobre el sistema de diseño para los diseñadores y un alto grado de productividad y opciones de futuro para los CTOs, asegurando que todos los miembros del equipo puedan trabajar de manera eficiente y efectiva.

React Bricks permite la reutilización de contenido a través de diferentes métodos como incrustaciones de página, donde se pueden incrustar fragmentos de una página en otra, y bloques predefinidos que pueden utilizarse en múltiples lugares dentro del sitio web.

Matteo Frana
Matteo Frana
139 min
18 May, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
React Bricks es un CMS con edición visual basado en componentes React que permite bloques de contenido editables visualmente llamados Brics. Ofrece flexibilidad para varios tipos de medios y soporta características como props de edición lateral, validación y colaboración. React Bricks también proporciona características avanzadas como enlaces de datos, tipos de página personalizados y la capacidad de consumir datos externos. Es compatible con cualquier marco, ofrece características a nivel empresarial y tiene desarrollos futuros en progreso.

1. Introducción a la Masterclass de React Bricks

Short description:

Bienvenidos a esta masterclass. Hoy veremos cómo podemos construir un sitio web de Next JS visualmente legible utilizando la biblioteca React Bricks. React Bricks es un CMS con edición visual basado en componentes React. Creamos React Bricks para encontrar una síntesis entre la edición visual y la edición con formularios. Necesitamos un CMS sin cabeza, un editor visual, una biblioteca de frontend y la libertad de elegir. Con React Bricks, obtienes estos cuatro productos en uno.

Bienvenidos a esta masterclass. Hoy veremos cómo podemos construir un sitio web de Next JS visualmente legible utilizando la biblioteca React Bricks. Soy Matteo Frana y soy el COO y desarrollador principal de Frontend en React Bricks. Esta será una masterclass de codificación en vivo, pero sugiero que me sigan y me gustaría que estuvieran relajados viendo lo que estoy haciendo en lugar de tener el estrés de copiar el código apresuradamente. Les daré el enlace al repositorio al final. Y de todos modos, si me siguen, entenderán los conceptos básicos de React Bricks tan bien que podrán empezar desde cero sin siquiera la necesidad de recurrir al repositorio. Así que por favor síganme, y no sabemos cómo copiar el código. Es realmente fácil. Verán que tendrán un método muy claro. Y entonces comenzaría con solo un par de diapositivas para darles un contexto de lo que es React Bricks. Y entonces es menos de 10 minutos. Y luego empezaremos a codificar.

Entonces, ¿empecemos con qué es React Bricks? React Bricks es un CMS con edición visual basado en React components. Pero la pregunta más importante es ¿por qué? ¿Por qué creamos otro CMS? Y bueno, sin arruinar demasiado la charla que será el 6 de junio, durante la historia de la gestión de contenidos, vimos muchas veces la alternancia de la edición visual y la edición con forms. Algo que es genial para los desarrolladores y algo que es genial para los editores de contenido sin encontrar una síntesis satisfactoria entre los dos. Así que cuando comencé con el web development, era 1996 y solo estaba escribiendo código HTML, que enviarías a un servidor BFTP. Luego tuvimos las herramientas visuales como una página frontal donde podrías crear el código visualmente, realmente el código que se creaba era un desastre. Y si le dabas una página frontal a tu cliente, podrían destruir el design. Así que tuvimos CGI con Pearl donde podrías crear los forms para editar contenido en una database y luego obtener el contenido de la database para crear el HTML y ESP y PHP. Que son las mismas cosas con el lenguaje de plantillas. Y luego llegaron los CMS, Joomla, WordPress, donde podrías editar de una manera visual en un lienzo blanco de nuevo. Pero tuvimos el problema de que todavía podríamos tener a nuestros clientes creando el texto rojo sobre fondo verde o algo por el estilo. Y entonces agregamos advanced campos personalizados a WordPress y volvimos a Ray Forms. Entonces, y llegamos a hoy donde tenemos estos dos mundos, tenemos las herramientas como Wix o Webflow, que son geniales para los editores, pero son un no-go para un sitio web corporativo porque no son lo suficientemente flexibles. Por ejemplo, con Wix, no puedes tener tu sistema de design perfecto en píxeles. Con Webflow, cuando tu editor entiende cómo cambiar cosas, agregar margen, etc., pueden volverse creativos y cambiar el design. Y por otro lado, tenemos los CMS headless que amamos, pero donde volvemos a los forms grises. Bueno, viste, si viste la próxima Conf, ves que también Vercel está pensando que esta edición visual ahora es el momento de encontrar esta síntesis de una forma visual de editar el sitio web, que también es genial para los desarrolladores. Y hablaremos de eso más tarde. Pero esencialmente por eso creamos React Bricks. Así que esencialmente necesitamos cuatro productos, un Headless CMS, un Editor Visual, una biblioteca de Frontend para crear nuestro código y un producto llamado Libertad. Y ahora veremos por qué.

Y pensemos que tenemos un Editor de Contenido también un CMO, un Desarrollador, un Diseñador y un CTO. Parece como el comienzo de una broma. Un Editor, Desarrollador, Diseñador, y el CTO entran a un bar. Pero veamos cuáles son las necesidades de estas personas. El Editor quiere tener una herramienta que sea fácil de usar. No quiere lidiar con entidades abstractas y relaciones. Nosotros como Desarrolladores, necesitamos algo que sea flexible que nos permita usar la herramienta que amamos, React frameworks y cualquier CSS framework donde necesitamos que el editor sea autónomo porque no queremos explicar a los editores cómo usar el CMS. Necesitan ser autónomos en su uso. Queremos ser productivos, por supuesto, mientras que los diseñadores quieren poder expresar la imagen corporativa perfecta con el sistema de design y estar seguros de que el editor no tiene forma de romperlo. El CTO quiere que el equipo sea productivo y quiere elegir una solución que sea flexible y a prueba de futuro. Entonces, lo que necesitamos es un editor visual para el editor y un verdadero editor visual donde tengamos la edición en línea como Word o Pages. Para la flexibilidad, queremos el acoplado headless CMS y la capacidad de usar React como sucede con un headless. Para que los lectores sean autónomos, solo necesitamos un nuevo editor visual, por lo que también resuelve el problema para nosotros. Para ser productivos, necesitamos un método. Entonces, un método de opinión que nos ayuda a crear el frontend. Para el sistema de design, necesitamos bloques. Necesitamos buenas restricciones para que el sistema de design no pueda romperse. Y si tenemos todas estas cosas, tenemos un equipo de alta productividad porque el editor está contento, el desarrollador está contento, y el diseñador también está contento. Entonces, un gran equipo, gran design, buen código. Buen código, y al final, gran contenido. Entonces, para tener flexibilidad y tener un sistema que es a prueba de futuro, necesitamos la libertad. La libertad de elegir hoy y la libertad de cambiar de idea mañana sobre el framework por ejemplo. Entonces queremos un sistema que sea agnóstico al framework que funcione con SDS, con Gatsby, con Remix, que funcionará con Astro muy pronto. Y queremos la libertad de poder alojar el sitio web donde queramos, ya sea Recel, Netlify, o cualquier otra cosa. Entonces, permítanme reorganizar estas cosas. Necesitamos un headless CMS, un editor visual. React y Blocks son solo los React components. Y necesitamos un método con restricciones y libertad. El headless CMS es proporcionado por las APIs de React Brics. Así que ahora tienes un headless CMS de grado enterprise. Con la biblioteca React Brics, tienes un método para crear bloques de contenido editables visualmente que son React components, y para establecer buenas restricciones para los editores. Y obtienes gratis la libertad de elegir y de cambiar de idea. Así que con un producto con React Brics, obtienes todos estos cuatro productos. Con otras soluciones que estamos viendo hoy, como por ejemplo, lo que vimos en la VersaConf, necesitas un headless CMS, que es algo como sanity o contentful. Luego tienes el editor visual, que realmente no está en línea con la edición visual como la que verás en un momento, y funcionará en la colaboración que tienes en VerCel. Entonces estás atado a esa plataforma. No tienes un buen método para crear los bloques de frontend, y estás obligado a usar next JS como framework. Entonces, al final, pierdes una parte de la libertad.

Read also

2. Creando React Brics

Short description:

React Brics se basa en bloques de contenido editables visualmente llamados Brics. Te permite editar directamente texto, imágenes y más utilizando componentes visuales. El esquema de React Brics te permite definir props de edición lateral que se mapean a las props de tu componente.

¿Cómo se crea React Brics? Bueno, todo se basa en este concepto de bloques de contenido editables visualmente que son simplemente componentes de react aumentados con la Biblioteca de React Brics. Y llamamos a estos bloques de contenido Brics. Así que es muy fácil. Es como usar Word o Pages para algunos de los contenidos que editas directamente. Así que, por ejemplo, para el texto, haces clic en él, editas. Para las imágenes, haces clic y las editas. Y esto es posible gracias a los componentes visuales de React Brics como texto, texto enriquecido, imagen, repetidor, archivo, etc. Y para las props que no son directamente editables como un color de fondo, es justo como lo que harías en Word. Alcanzas un control cibernético. Y así, React Brics tiene un esquema donde puedes definir props de edición lateral que son solo controles que se mapean a las props de tu componente para que recibas estos valores como props de tu componente.

Watch more workshops on topic

Repensando el Estado del Servidor con React Query
React Summit 2020React Summit 2020
96 min
Repensando el Estado del Servidor con React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
La distinción entre el estado del servidor y el estado del cliente en nuestras aplicaciones puede ser un concepto nuevo para algunos, pero es muy importante entenderlo cuando se entrega una experiencia de usuario de primera calidad. El estado del servidor viene con problemas únicos que a menudo se cuelan en nuestras aplicaciones sorpresa como:
- Compartir datos entre aplicaciones- Caché y Persistencia- Deduplicación de Solicitudes- Actualizaciones en segundo plano- Gestión de Datos "Obsoletos"- Paginación y Recuperación Incremental- Memoria y Recolección de Basura- Actualizaciones Optimistas
Los gestores tradicionales de "Estado Global" pretenden que estos desafíos no existen y esto finalmente resulta en que los desarrolladores construyan sus propios intentos sobre la marcha para mitigarlos.
En esta masterclass, construiremos una aplicación que expone estos problemas, nos permite entenderlos mejor, y finalmente los convierte de desafíos a características usando una biblioteca diseñada para gestionar el estado del servidor llamada React Query.
Al final de la masterclass, tendrás una mejor comprensión del estado del servidor, el estado del cliente, la sincronización de datos asíncronos (un bocado, lo sé), y React Query.
AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Featured Workshop
Eve Porcello
Eve Porcello
El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
React Summit 2022React Summit 2022
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
De Todo App a B2B SaaS con Next.js y Clerk
React Summit US 2023React Summit US 2023
153 min
De Todo App a B2B SaaS con Next.js y Clerk
WorkshopFree
Dev Agrawal
Dev Agrawal
Si eres como yo, probablemente tengas un millón de ideas para proyectos secundarios, algunas de las cuales incluso podrían hacerte ganar dinero como un micro SaaS, o podrían resultar ser la próxima startup de mil millones de dólares. Pero, ¿cómo sabes cuáles? ¿Cómo pasas de una idea a un producto funcional que puede ser puesto en manos de clientes que pagan sin renunciar a tu trabajo e invirtiendo todo tu tiempo y dinero en ello? ¿Cómo pueden competir tus proyectos secundarios en solitario con las aplicaciones construidas por enormes equipos y grandes empresas?
Construir productos SaaS ricos viene con desafíos técnicos como infraestructura, escalabilidad, disponibilidad, seguridad y subsistemas complicados como autenticación y pagos. Por eso, a menudo son los gigantes tecnológicos ya establecidos quienes pueden construir y operar productos de este tipo de manera razonable. Sin embargo, una nueva generación de devtools está permitiendo a los desarrolladores construir fácilmente soluciones completas que aprovechan la mejor infraestructura en la nube disponible, y ofrecen una experiencia que te permite iterar rápidamente en tus ideas por un bajo costo de $0. Se llevan todos los desafíos técnicos de construir y operar productos de software para que solo tengas que pasar tu tiempo construyendo las características que tus usuarios quieren, dándote una oportunidad razonable de competir contra el mercado al mantenerte increíblemente ágil y receptivo a las necesidades de los usuarios.
En esta masterclass de 3 horas comenzarás con una simple aplicación de gestión de tareas construida con React y Next.js y la convertirás en un producto SaaS completamente funcional y escalable integrando una base de datos escalable (PlanetScale), autenticación multi-tenant (Clerk), y pagos basados en suscripción (Stripe). También aprenderás cómo los principios del desarrollo de software ágil y el diseño impulsado por el dominio pueden ayudarte a construir productos rápidamente y de manera rentable, y competir con las soluciones existentes.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
React Query: ¡Es hora de romper con tu "Estado Global"!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: ¡Es hora de romper con tu "Estado Global"!
Top Content
Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
React Day Berlin 2023React Day Berlin 2023
16 min
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
Top Content
This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
El Nuevo Enrutador de Aplicaciones de Next.js
React Summit 2023React Summit 2023
27 min
El Nuevo Enrutador de Aplicaciones de Next.js
Top Content
Today's Talk is about the Next.js App Router, which has evolved over the years and is now a core feature of Next.js. The Talk covers topics such as adding components, fetching remote data, and exploring layouts. It also discusses submitting form data, simplifying code, and reusing components. The App Router allows for coexistence with the existing pages router and enables data fetching at the layout level using React Server Components.
No sabes cómo hacer SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
No sabes cómo hacer SSR
The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.