Versión en EspañolES

Curso intensivo de TypeScript para contenido de un CMS sin cabeza

Please sign in to watch this workshop.

En este masterclass, primero te mostraré cómo crear un nuevo proyecto en un CMS sin cabeza, llenarlo con datos y usar el contenido en tu proyecto. Luego, pasaremos el resto del tiempo en código, haremos lo siguiente:

- Generar modelos y estructuras de tipo fuertemente tipados para el contenido obtenido.

- Usar el contenido en componentes

- Resolver contenido de campos de texto enriquecido en componentes de React

- Tocar los pipelines de implementación y las posibilidades de descubrir problemas relacionados con el contenido antes de llegar a producción

Aprenderás:

- Cómo trabajar con contenido de un CMS sin cabeza

- Cómo se puede aprovechar el modelo de contenido para generar tipos en TypeScript y qué beneficios aporta a tu proyecto

- Cómo dejar de usar literales de cadena para el contenido en el código

- Cómo resolver texto enriquecido en componentes de React

- Cómo minimizar o evitar problemas relacionados con el contenido antes de llegar a producción

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

FAQ

Un CMS sin cabeza es un sistema de gestión de contenido que proporciona una forma de trabajar con contenido a través de una API, lo que permite desarrollar interfaces de usuario personalizadas en cualquier plataforma sin estar ligado a una presentación específica del contenido.

El masterclass cubrirá cómo trabajar con contenido en TypeScript y componentes React, incluyendo la importación de contenido en un nuevo proyecto, la creación de modelos TypeScript a partir de tipos de contenido y la resolución de textos enriquecidos en componentes React.

Puedes importar el contenido utilizando el ID del proyecto de CMS proporcionado, lo que te permite trabajar con el contenido incluso sin necesidad de registrarte en el CMS. Durante el masterclass, se mostrará cómo importar y gestionar este contenido dentro de un proyecto.

Next.js es apreciado por su flexibilidad y facilidad de uso, permitiendo construir sitios web eficientes con mejores prácticas de SEO y optimización de rendimiento. Ofrece funcionalidades como generación estática y server-side rendering, que son esenciales para proyectos modernos.

Se utiliza un proceso que verifica el modelo de contenido con cada compilación. Esto ayuda a minimizar los errores de producción relacionados con contenido faltante o mal configurado, asegurando que los cambios en el CMS no afecten negativamente al sitio en producción.

En el masterclass se utiliza una herramienta automática que toma las definiciones de tipos de contenido del CMS y genera modelos de tipo fuertemente tipados para el contenido, lo que facilita el desarrollo y mantenimiento del código.

Se proporcionará un enlace en la ventana de chat del masterclass para clonar el repositorio, que incluye una plantilla de JS con varias páginas preconfiguradas, lo cual es esencial para seguir los ejercicios prácticos del curso.

typescript react components

Ondrej Polesny

98 min

01 Jul, 2022

Comments

Available in other languages:

Watch more workshops on topic

React, TypeScript y TDD

React Advanced 2021

174 min

React, TypeScript y TDD

Top Content

Featured Workshop

Paul Everitt

ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.

react best practices typescript devtools web development test driven development react

Dominando conceptos avanzados en TypeScript

React Summit US 2023

132 min

Dominando conceptos avanzados en TypeScript

Top Content

Featured WorkshopFree

Jiri Lojda

TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.

typescript devtools typescript libraries

Consejos y Trucos Profundos de TypeScript

Node Congress 2024

83 min

Consejos y Trucos Profundos de TypeScript

Top Content

Featured Workshop

Josh Goldberg

TypeScript tiene un sistema de tipos poderoso con todo tipo de características sofisticadas para representar estados de JavaScript salvajes y extravagantes. Pero la sintaxis para hacerlo no siempre es sencilla, y los mensajes de error no siempre son precisos al decirte qué está mal. Vamos a profundizar en cómo funcionan muchas de las características más poderosas de TypeScript, qué tipos de problemas del mundo real resuelven, y cómo dominar el sistema de tipos para que puedas escribir código TypeScript verdaderamente excelente.

typescript

Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React

React Advanced 2022

148 min

Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React

Top Content

Featured Workshop

Maurice de Beijer

¿Eres un desarrollador de React tratando de obtener los máximos beneficios de TypeScript? Entonces esta es la masterclass para ti.En esta masterclass interactiva, comenzaremos desde lo básico y examinaremos los pros y contras de las diferentes formas en que puedes declarar componentes de React usando TypeScript. Después de eso, pasaremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guardias y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapa de tipo nuevo. Y comenzaremos a programar en el sistema de tipos de TypeScript usando tipos condicionales e inferencia de tipos.

react typescript react with typescript best practices

Práctica con la Rejilla de Datos React de AG Grid

React Summit 2022

147 min

Práctica con la Rejilla de Datos React de AG Grid

Top Content

Workshop

Sean Landsman

Comienza con la Rejilla de Datos React de AG Grid con un tutorial práctico del equipo central que te llevará a través de los pasos para crear tu primera rejilla, incluyendo cómo configurar la rejilla con propiedades simples y componentes personalizados. La edición comunitaria de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar inmediatamente a tus proyectos. También descubrirás cómo cargar datos en la rejilla y diferentes formas de agregar renderizado personalizado a la rejilla. Al final de la masterclass, habrás creado una Rejilla de Datos React de AG Grid y personalizado con componentes React funcionales.- Comenzando e instalando AG Grid- Configurando ordenación, filtrado, paginación- Cargando datos en la rejilla- La API de la rejilla- Usando hooks y componentes funcionales con AG Grid- Capacidades de la edición comunitaria gratuita de AG Grid- Personalizando la rejilla con Componentes React

react components api development aggrid react react table

Practica Técnicas de TypeScript Construyendo una Aplicación con Componentes de Servidor React

TypeScript Congress 2023

131 min

Practica Técnicas de TypeScript Construyendo una Aplicación con Componentes de Servidor React

Workshop

Maurice de Beijer

En esta masterclass práctica, Maurice te guiará personalmente a través de una serie de ejercicios diseñados para empoderarte con una profunda comprensión de los Componentes de Servidor React y el poder de TypeScript. Descubre cómo optimizar tus aplicaciones, mejorar el rendimiento y desbloquear nuevas posibilidades.

Durante la masterclass, realizarás:
- Maximizar la mantenibilidad y escalabilidad del código con prácticas avanzadas de TypeScript
- Desatar los beneficios de rendimiento de los Componentes de Servidor React, superando enfoques tradicionales
- Potenciar tu TypeScript con el poder de los Tipos Mapeados
- Hacer tus tipos TypeScript más seguros con Tipos Opacos
- Explorar el poder de los Tipos de Plantillas Literales al usar Tipos Mapeados

Maurice estará virtualmente a tu lado, ofreciendo una guía completa y respondiendo a tus preguntas mientras navegas por cada ejercicio. Al final de la masterclass, habrás dominado los Componentes de Servidor React, armado con un nuevo arsenal de conocimientos de TypeScript para potenciar tus aplicaciones React.

No pierdas esta oportunidad de elevar tu experiencia en React a nuevas alturas. Únete a nuestra masterclass y desbloquea el potencial de los Componentes de Servidor React con TypeScript. Tus aplicaciones te lo agradecerán.

react typescript react components react with typescript best practices

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

Los tipos más útiles de React

React Day Berlin 2023

21 min

Los tipos más útiles de React

Top Content

Matt Pocock

Independent

Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.

typescript react element vs component react fc react with typescript

TypeScript y React: Secretos de un matrimonio feliz

React Advanced 2022

21 min

TypeScript y React: Secretos de un matrimonio feliz

Top Content

Matt Pocock

Independent

React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.

react best practices typescript

Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript

TypeScript Congress 2023

31 min

Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript

Top Content

Daniel Roe

Leads the Nuxt core team

Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.

typescript frameworks vue nuxt.js deep dive builders and founders

Deja de Escribir Tus Rutas

Vue.js London 2023

30 min

Deja de Escribir Tus Rutas

Top Content

Eduardo San Martin Morote

Vue.js Core Team

Designing APIs is a challenge, and it's important to consider the language used and different versions of the API. API ergonomics focus on ease of use and trade-offs. Routing is a misunderstood aspect of API design, and file-based routing can simplify it. Unplugging View Router provides typed routes and eliminates the need to pass routes when creating the router. Data loading and handling can be improved with data loaders and predictable routes. Handling protected routes and index and ID files are also discussed.

typescript vue 3 typescript libraries

Estudio de caso: Construcción de componentes React reutilizables accesibles en GitHub

React Summit 2024

29 min

Estudio de caso: Construcción de componentes React reutilizables accesibles en GitHub

Siddharth Kshetrapal

GitHub

The talk discusses building accessible React components and emphasizes the importance of using the correct HTML elements and ARIA roles for accessibility. It explains how to navigate and select options within a form and how to add supplementary text using Aria described by. The speaker also discusses the benefits of using conditional checkboxes and ARIA disabled to improve the UI. Additionally, the talk explores the role of JavaScript in web accessibility and provides recommendations for testing website accessibility.

react components react accessibility

React Server Components en Aplicaciones de IA

React Advanced 2024

17 min

React Server Components en Aplicaciones de IA

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

Today we will discuss React server components with AI and how to build a better search experience using them. We will learn how to make a Next.js app AI-enabled using the Vercel AI SDK. The Vercel AI SDK's streamUI function with the GPT 4.0 model will be used to make suggestions interactive. We will explore the use of history and conversation in AI and how to continue the conversation and read the result. The concept of generative UI with the vector database will be introduced, along with querying the database for movies. We will process user queries and return movies based on them. The power of React server components in enhancing UI will be demonstrated. In summary, the Talk covers vector embeddings, natural language search, and generative UI.

react components artificial intelligence