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

Please sign in to watch this workshop.
Sign in
Bookmark
Rate this content

- 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.
Sign in to access video transcription and chapter summary.

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
Top Content
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)
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Featured Workshop
Lazar Nikolov
Sarah Guthals
2 authors
Los problemas de frontend que afectan a tus usuarios a menudo son provocados por problemas de backend. En esta masterclass, aprenderás cómo identificar problemas que causan páginas web lentas y malos Core Web Vitals usando tracing.
Luego, pruébalo tú mismo configurando Sentry en un proyecto Next.js ya preparado para descubrir problemas de rendimiento, incluyendo consultas lentas a la base de datos en una sesión interactiva de programación en pareja.
Saldrás de la masterclass siendo capaz de:- Encontrar problemas de backend que podrían estar ralentizando tus aplicaciones de frontend- Configurar tracing con Sentry en un proyecto Next.js- Depurar y solucionar problemas de rendimiento deficiente usando tracing
Este será un evento en vivo de 2 horas donde tendrás la oportunidad de codificar junto con nosotros y hacernos preguntas.
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
Workshop
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
Workshop
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
Workshop
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.

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 Router de Aplicaciones Next.js
React Summit 2023React Summit 2023
27 min
El Nuevo Router de Aplicaciones 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.