Curso Intensivo de Remix y Storyblok

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

Tal vez ya hayas leído sobre Remix. Probablemente ya lo hayas usado, y recientemente hayas escuchado mucho sobre los CMS sin cabeza. En este curso rápido, pondremos todas las piezas juntas y te mostraré por qué Storyblok en combinación con Remix es la mejor opción para tu próximo proyecto. ¡Pasa y pruébalo tú mismo!


Tabla de contenido:

- Introducción a Remix, diseño atómico y el mundo sin cabeza

- Configuración del entorno

- Creación de páginas y comprensión de cómo funcionan las rutas dinámicas con splat routes

- Consejos futuros y preguntas frecuentes


Prerrequisitos: Node.js instalado, cuenta de GitHub.

This workshop has been presented at Remix Conf Europe 2022, check out the latest edition of this React Conference.

FAQ

Storyblock es un sistema de gestión de contenido sin cabeza que permite a los desarrolladores integrar contenido en diversos proyectos y plataformas. Se utiliza para facilitar la gestión y entrega de contenido digital sin estar ligado a una tecnología o estructura de presentación específica.

Remix es un marco de trabajo basado en React que permite desarrollar aplicaciones web de forma rápida y eficiente. Es una pila completa que facilita la creación de interfaces de usuario y maneja tanto el frontend como el backend, optimizando la experiencia de desarrollo y del usuario.

Para integrar Storyblock con Remix, es necesario utilizar SDKs específicos como Storyblock React y configurar el proyecto para que se comunique con la API de Storyblock. Esto implica inicializar Storyblock en el proyecto, configurar el acceso a la API y crear componentes dinámicos que rendericen el contenido gestionado en Storyblock.

El CMS sin cabeza de Storyblock ofrece flexibilidad para desarrollar aplicaciones usando cualquier tecnología de front-end, independencia del back-end para presentar contenido y la capacidad de entregar contenido a múltiples plataformas y dispositivos, mejorando la experiencia omnicanal.

El diseño atómico es una metodología que permite construir interfaces de usuario a partir de componentes básicos (átomos) que se combinan para formar estructuras más complejas. En Storyblock, se utiliza para estructurar y reutilizar componentes de contenido, facilitando la gestión y escalabilidad del diseño de proyectos.

Facundo Giuliani
Facundo Giuliani
Arisa Fukuzaki
Arisa Fukuzaki
162 min
15 Nov, 2022

Comments

Sign in or register to post your comment.
Sign in to access video transcription and chapter summary.

Watch more workshops on topic

Fetch, useEffect, React Query, SWR, ¿qué más?
React Advanced 2023React Advanced 2023
102 min
Fetch, useEffect, React Query, SWR, ¿qué más?
Top Content
Workshop
Ondrej Polesny
Ondrej Polesny
En esta masterclass, primero, repasaremos las diferentes formas en que puedes consumir APIs en React. Luego, probaremos cada una obteniendo contenido de un CMS sin cabeza (tanto con REST como con GraphQL) y verificando en detalle cómo funcionan.
Aunque no se requiere un conocimiento avanzado de React, esta será una sesión práctica, por lo que necesitarás clonar un repositorio de GitHub preconfigurado y utilizar tu editor de programación React preferido, como VS Code.
Aprenderás:- Qué diversas opciones de obtención de datos hay en React- Cuáles son las ventajas y desventajas de cada una- Cuáles son los casos de uso típicos y cuándo cada estrategia es más beneficiosa que otras
Curso intensivo sobre Astro y Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Curso intensivo sobre Astro y Storyblok
Workshop
Arisa Fukuzaki
Arisa Fukuzaki
La arquitectura sin cabeza ha ganado inmensa popularidad en los últimos años por su capacidad para desacoplar el frontend y el backend, permitiendo a los desarrolladores crear aplicaciones web atractivas, interactivas y escalables.
En esta masterclass, nos sumergiremos rápidamente en el Mundo y la Arquitectura sin Cabeza.
Además, construiremos un sitio web de blog súper rápido utilizando Storyblok, un CMS sin cabeza que ofrece una función de vista previa en tiempo real con un enfoque de componente anidable, y Astro (3.0) que ya está creando revuelo con el nuevo directorio de aplicaciones.
- Domina los fundamentos de CMS sin cabeza- Domina un enfoque de Astro & CMS sin cabeza- Usa el diseño atómico en tu aplicación Astro & Storyblok- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza
Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io
React Summit 2023React Summit 2023
71 min
Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io
Workshop
Nancy Du
Nataliya Ioffe
2 authors
Únete a nosotros en un masterclass práctico donde te mostraremos cómo mejorar tus habilidades de React para construir un sitio web sin cabeza de alto rendimiento utilizando Next.js, Sanity y la arquitectura JAMstack. No se requiere conocimiento previo de Next.js o Sanity, lo que hace que este masterclass sea ideal para cualquier persona familiarizada con React que quiera aprender más sobre la construcción de sitios web dinámicos y receptivos.
En este masterclass, exploraremos cómo Next.js, un framework basado en React, se puede utilizar para construir un sitio web estático con renderizado del lado del servidor y enrutamiento dinámico. Aprenderás cómo utilizar Sanity como un CMS sin cabeza para gestionar el contenido de tu sitio web, crear plantillas de página personalizadas con Next.js, utilizar APIs para integrarte con el CMS y desplegar tu sitio web en producción con Vercel.
Al final de este masterclass, tendrás una comprensión sólida de cómo Next.js y Sanity.io pueden utilizarse juntos para crear un sitio web de alto rendimiento, escalable y flexible.
Curso Intensivo de Astro, Kontent.ai y Portable Text
React Summit 2023React Summit 2023
91 min
Curso Intensivo de Astro, Kontent.ai y Portable Text
Workshop
Ondrej Polesny
Ondrej Polesny
En este curso intensivo, crearemos un nuevo proyecto en el CMS sin cabeza, crearemos el modelo de contenido y los datos utilizando la CLI de Kontent.ai. Luego, utilizaremos el contenido para construir un sitio web de Astro que incluya componentes front-end y resolución de texto enriquecido utilizando Portable Text.
Este será un taller práctico, necesitarás VS Code, Git, NPM y conocimientos básicos de JavaScript. No te preocupes, explicaré todos los pasos a medida que avancemos en el taller y podrás hacer preguntas directamente.
Localizando tu sitio web de Remix
React Summit 2023React Summit 2023
154 min
Localizando tu sitio web de Remix
Workshop
Harshil Agrawal
Harshil Agrawal
El contenido localizado te ayuda a conectarte con tu audiencia en su idioma preferido. No solo te ayuda a hacer crecer tu negocio, sino que también ayuda a tu audiencia a comprender mejor tus ofertas. En este masterclass, obtendrás una introducción a la localización y aprenderás cómo implementar la localización en tu sitio web de Remix alimentado por Contentful.
Tabla de contenidos:- Introducción a la localización- Introducción a Contentful- Localización en Contentful- Introducción a Remix- Configuración de un nuevo proyecto de Remix- Renderización de contenido en el sitio web- Implementación de la localización en el sitio web de Remix- Recapitulación- Próximos pasos
Desplegando un sitio de reseñas de restaurantes desacoplado en producción con Strapi y Platform.sh
Node Congress 2022Node Congress 2022
134 min
Desplegando un sitio de reseñas de restaurantes desacoplado en producción con Strapi y Platform.sh
Workshop
Shedrack Akintayo
Chad Carlson
2 authors
Node.js se ha convertido en un lenguaje cada vez más popular para construir y desplegar APIs backend. En un mundo de CMSs heredados que adoptan implementaciones desacopladas, han surgido muchos frameworks que se autodenominan CMS "headless", diseñados desde el principio para proporcionar una forma fácil de personalizar modelos de contenido, administrar permisos y autenticación, y servir rápidamente una API de contenido.
Strapi, uno de los líderes en este espacio, ha lanzado recientemente su versión 4 del framework, y con Platform.sh se puede desplegar junto con varios frontends dentro del mismo proyecto, lo que brinda una experiencia de desarrollo drásticamente simplificada al trabajar con sitios desacoplados. En este masterclass, desplegaremos una aplicación de demostración de Strapi, que ha sido configurada para servir un sitio de reseñas de restaurantes.
Paso a paso, agregarás servicios de base de datos, pruebas y frontends, todo dentro de entornos de desarrollo aislados. Al final, cada usuario tendrá un sitio desacoplado funcional y una mayor comprensión de cómo trabajar con sitios desacoplados en producción.

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

Cómo manejar correctamente los cambios de URL slug en Next.js
TypeScript Congress 2022TypeScript Congress 2022
10 min
Cómo manejar correctamente los cambios de URL slug en Next.js
Top Content
This Talk explains how to handle URL slug changes in Next.js by using the getStaticPaths and getStaticProps methods. It covers implementing redirects and provides a solution to eliminate the need for editors to perform additional steps. The approach involves tracking URL slug changes and issuing proper redirects. The speaker encourages the audience to reach out with any questions or experiences with handling URL slugs.
Remixando WordPress: Construyendo un Sitio Headless con Remix, WPGraphQL y Fundamentos Web
React Summit 2022React Summit 2022
21 min
Remixando WordPress: Construyendo un Sitio Headless con Remix, WPGraphQL y Fundamentos Web
In this Talk, the concept of headless WordPress and its benefits for developers are discussed. The use of front-end frameworks like Remix, Nuxt, Next, or SvelteKit to interact with WordPress through REST or GraphQL APIs is highlighted. The process of creating content models, adding data, and querying the GraphQL schema is explained. The setup of a basic Remix app with Apollo Client and the loading of data into route components using Remix are covered. The handling of dynamic routing with Remix and WordPress is also explored.
Desafíos en proyectos a gran escala (NextJS - Contentful)
React Summit 2022React Summit 2022
20 min
Desafíos en proyectos a gran escala (NextJS - Contentful)
This Talk discusses the challenges faced when implementing or migrating a legacy stack to Next.js and Contentful in large-scale projects. It emphasizes the need for careful analysis and estimation of time and resources. The Talk also highlights the benefits of Next.js in facilitating collaboration with isolated teams and integrating with other frameworks. It addresses the challenges of using a headless CMS in large-scale projects and suggests strategies for handling unavailability and crashes. The importance of using global state wisely and promoting code reusability is also emphasized, along with techniques for overcoming challenges in large-scale projects.
Explorando el Gráfico de WordPress con Next.js y WPGraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
23 min
Explorando el Gráfico de WordPress con Next.js y WPGraphQL
WordPress is widely used, and it now supports a REST API for headless usage. Serving static HTML files allows for infinite scaling and surviving viral traffic. GraphQL can be used to interface with WordPress data, reducing complexity. WordPress can be coupled with plugins like Yoast and ACF, and WPGraphQL works seamlessly with these plugins. GraphQL allows for selecting only necessary data and has performance advantages over REST APIs.