Log in
React Conferences
React Summit 2023React Summit 2023
ES

Curso Intensivo de Astro, Kontent.ai y Portable Text

Ondrej Polesny
Ondrej Polesny
Developer Evangelist @ Kontent.ai
Backdrop
Please sign in to watch this workshop.
Sign in
Bookmark
Rate this content

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.

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

FAQ

Content.ai es un proveedor de CMS sin cabeza, especializado en el almacenamiento de contenido y que permite una alta personalización en el desarrollo de sitios web.

En el taller se cubrieron temas como la importación de contenido en el CMS, la ejecución de un proyecto en Astro, la creación de páginas y componentes en Astro, la generación de modelos TypeScript y la implementación de la resolución de texto enriquecido.

Astro es un marco de trabajo de front-end que se enfoca en hacer que los paquetes del cliente sean lo más pequeños posible, ofreciendo una alternativa a marcos más pesados como Next.js o Gatsby.

Se puede participar en el taller de manera virtual, clonando el repositorio de GitHub proporcionado durante el evento y siguiendo las instrucciones en línea para configurar el entorno de desarrollo.

La resolución de texto enriquecido es el proceso de convertir texto con formato enriquecido, como HTML, a un formato que puede ser correctamente gestionado y mostrado por un CMS sin cabeza.

Para el taller práctico se necesitan herramientas como Visual Studio Code y Git instalados, además de acceso al repositorio de GitHub para clonar el proyecto y seguir los pasos del taller.

headless cmsastroportable text react
Ondrej Polesny
Ondrej Polesny
91 min
22 May, 2023

Comments

Sign in or register to post your comment.
Sign in to access video transcription and chapter summary.
Available in other languages:

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
WorkshopFree
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
react useeffectreact queryheadless cmsswr vs react queryreact query vs useeffectreact swr
Curso intensivo sobre Astro y Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Curso intensivo sobre Astro y Storyblok
WorkshopFree
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
headless cmsastro
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
WorkshopFree
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.
next.jsheadless cmssanity react
Curso Intensivo de Remix y Storyblok
Remix Conf Europe 2022Remix Conf Europe 2022
162 min
Curso Intensivo de Remix y Storyblok
Workshop
Facundo Giuliani
Arisa Fukuzaki
2 authors
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.
headless cms
Astro: All Hands On
React Day Berlin 2024React Day Berlin 2024
126 min
Astro: All Hands On
Workshop
Elian Van Cutsem
Elian Van Cutsem
Mentorship available
La web es capaz de mucho más de lo que podríamos pensar. Durante esta masterclass, exploraremos algunas partes menos conocidas de la web. ¿Sabías que puedes controlar la web a través de webHID o enviar y recibir notas a dispositivos a través de webMIDI? En esta charla interactiva podríamos hacer música juntos, controlando sintetizadores y explorando la amplia gama de extrañas API web. Todo eso en JavaScript puro, sin necesidad de frameworks.
astro
Localizando tu sitio web de Remix
React Summit 2023React Summit 2023
154 min
Localizando tu sitio web de Remix
WorkshopFree
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
remixheadless cmsweb developmentinternationalization

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

No sabes cómo hacer SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
No sabes cómo hacer SSR
Emanuele Stoppa
Emanuele Stoppa
Active contributor to the Biome project
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.
next.jsserverlessastro
Diseño Opt-in – La Nueva Era de los Marcos de React
React Advanced 2023React Advanced 2023
23 min
Diseño Opt-in – La Nueva Era de los Marcos de React
Ben Holmes
Ben Holmes
Ben is a full-stack developer, open source maintainer, and whiteboardist making the web a little better.
This Talk discusses opt-in design in web development, focusing on API design and understanding good defaults. Opt-in design allows developers to start with minimal tools and gradually add complexity as needed. The principles of opt-in design include finding the lowest common denominator, making complexity easy to add, and prioritizing the user experience. The Talk also explores the concept of opt-in design in React and Astro, as well as the comparison between React and Solid frameworks. Server rendering and streaming in React are highlighted, along with the importance of suspense boundaries for a better user experience.
builders and foundersframeworksastropreact
Todo Sobre Astro
React Day Berlin 2023React Day Berlin 2023
28 min
Todo Sobre Astro
Elian Van Cutsem
Elian Van Cutsem
Mentorship available
Astro Ambassador
Astro is a powerful framework for content-driven websites, with its own syntax and the ability to use favorite front-end libraries. It has seen significant improvements in Astro 2 and Astro 3, including view transitions and improved performance. Astro 4 introduces features like a powerful dev toolbar, content caching, and internationalization support. The Astro community is highly regarded, and Astro is being used for production websites. Astro also supports migrating legacy websites and integrating with headless CMSs.
astro
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
Ondrej Polesny
Ondrej Polesny
Developer Evangelist @ Kontent.ai
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.
next.jstypescriptheadless cmsslugify react
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
Jeff Everhart
Jeff Everhart
Senior Developer Advocate @ WP Engine
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.
remixwordpressheadless cms
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)
Leonidas Mamais
Leonidas Mamais
Front-end chapter lead @ Vodafone
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.
next.jsheadless cmsenterprisecase study