Creating Flexible React Applications

Rate this content
Bookmark

Como desarrolladores de React, pasamos innumerables horas creando páginas y componentes para dar vida a nuestras aplicaciones. Es un viaje emocionante, pero ¿alguna vez te has preguntado qué sucede cuando te enfrentas al desafío de no conocer los componentes que tendrá tu aplicación de página?
Únete a mí en esta charla donde exploraremos el mundo del duck typing en TypeScript. Descubre cómo esta poderosa técnica puede transformar tu mentalidad de desarrollo en React y construir sin esfuerzo una aplicación genérica que pueda servir un número ilimitado de páginas.

This talk has been presented at React Summit US 2024, check out the latest edition of this React Conference.

David Villamarin
David Villamarin
12 min
22 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
¡Hola, React Summit! Hoy quiero compartir mis ideas sobre cómo crear una aplicación genérica de React utilizando TypeScript. Discutiré el concepto de Type Build, el enrutamiento genérico de aplicaciones y proporcionaré un ejemplo. ¿Qué es el Type Build? Es una prueba que utiliza las características o propiedades de un objeto para determinar su tipo. El duck typing aporta flexibilidad y simplicidad, permitiendo un acoplamiento suelto y un código más corto. Los type guards se utilizan para implementar el duck typing en TypeScript, lo que permite una lógica personalizada para determinar el tipo de un objeto. Este enfoque garantiza la seguridad de tipos y una mejor verificación de errores. Utilizamos un componente switcher para renderizar componentes basados en el tipo de variable CMP. Al trabajar con React, crea componentes como lo harías para cualquier aplicación. Utiliza routers para rutas dinámicas con IDs para manejar diferentes páginas. El outlet recibe el ID de página válido de los padres y utiliza un mapa para renderizar componentes según el tipo. El resultado del objeto se puede ver en la siguiente diapositiva. Crea un menú en tu aplicación con páginas válidas. Este es un enfoque extensible para manejar formularios complejos. Encuentra la aplicación de ejemplo en mi GitHub.

1. Introducción

Short description:

¡Hola, React Summit! Hoy quiero compartir mis pensamientos sobre cómo crear una aplicación genérica de React utilizando TypeScript. Hablaré sobre el concepto de Type Build, enrutamiento genérico de aplicaciones y proporcionaré un ejemplo.

¡Hola, Summit de React! Mi nombre es David Villar-Marin. Hoy quiero compartir con ustedes algunos de mis pensamientos sobre una forma de crear una aplicación genérica de React utilizando TypeScript. Pero primero, ¿quién soy yo? Soy ecuatoriano. Soy desarrollador de día y jugador de ajedrez de noche. He trabajado en Stack Builders. Es una consultoría enfocada en la programación funcional. Utilizamos lenguajes funcionales, pero también hacemos cosas geniales como esta. También soy un colaborador de código abierto. Puedes revisar mi GitHub.

Quiero comenzar diciendo que esta es solo una de las muchas formas en las que puedes crear aplicaciones genéricas en React. Solo para que estés al tanto. Entonces, ¿qué tenemos hoy? En primer lugar, hablaremos sobre el Type Build. Crearemos una aplicación genérica aplicando este concepto, y más adelante veremos el enrutamiento de una aplicación genérica y también un ejemplo. Así que sí, vamos a ello.

2. Type Build and Generic React Application

Short description:

¿Qué es el Type Build? Es una prueba que utiliza las características o propiedades de un objeto para determinar su tipo. La tipificación de pato brinda flexibilidad y simplicidad, permitiendo un acoplamiento suelto y un código más corto. Los type guards se utilizan para implementar la tipificación de pato en TypeScript, lo que permite una lógica personalizada para determinar el tipo de un objeto. Este enfoque garantiza la seguridad de tipos y una mejor verificación de errores. Comenzamos creando modelos con una propiedad de tipo, asegurando la consistencia en los componentes. Luego, creamos type guards para diferentes tipos de componentes. Finalmente, verificamos el tipo de la variable CMP para asegurarnos de que coincida con el tipo deseado.

En primer lugar, ¿qué es el Type Build? El Type Build proviene de una prueba que básicamente dice que si se parece a un pato, nada como un pato y hace cuac cuac como un pato, entonces probablemente sea un pato. Esto es simplemente una inferencia lógica que implica que alguien puede identificar un sujeto no por observar las características o propiedades de ese sujeto. Entonces podemos usar esta prueba en el mundo de la programación. Básicamente, podemos verificar algunas propiedades y luego adivinar el tipo de un objeto en particular.

Entonces, ¿por qué la tipificación de pato? Este concepto te brinda flexibilidad y simplicidad para tener un código con un acoplamiento suelto y también para tener un código más corto y simple. Esto fomenta un mejor código utilizando la reutilización, la modularidad y la mantenibilidad. Entonces, primero que nada, ¿cómo puedes implementar la tipificación de pato en TypeScript utilizando type guards? ¿Qué es un type guard? Es una función cuyo tipo de retorno es un predicado de tipo. Un predicado de tipo es una afirmación de tipo que verifica si un objeto tiene una propiedad específica o un conjunto de propiedades. En este caso, estamos verificando si la mascota, que podría ser un pez o un pájaro, tiene una propiedad de flujo. Esto te permite crear lógica personalizada para determinar si un valor se llama de un tipo específico. En este caso, estamos creando esto como pez. Estamos verificando si la mascota, que podría ser un pez o un pájaro, es realmente un pez. Esto es una estrecha formalización de tipo.

Esto permite un código seguro en cuanto a tipos, una mejor verificación de errores y un mejor tiempo de compilación. En esta pequeña condición a la izquierda, nos aseguramos en la primera parte de que la mascota siempre sea un pez. Y dado que la mascota podría ser un pez o un pájaro en la declaración else, podemos llamar a propiedades o métodos específicos.

Entonces, vamos a comenzar a crear esta aplicación genérica de React. En primer lugar, comenzamos con los modelos. Los modelos son simplemente plantillas simples. Una parte importante aquí es la propiedad de tipo. Nos aseguramos de que todos nuestros componentes puedan tener esta propiedad de tipo, ya sea un campo de entrada, un área de texto, un checkbox o un botón. También podemos tener muchas más propiedades como variante o icono para los botones o para el acordeón. Este es solo un ejemplo de un componente contenedor.

Después de tener tus modelos, puedes crear tus type guards. En primer lugar, tendrás una variable CMP que es nuestro objeto conocido. Podría ser cualquier cosa. Por eso creamos nuestros type guards. Para el campo de texto, para el checkbox, para el botón y también para el acordeón. Nos aseguramos de que después de aplicar estas funciones, verifiquemos que esta variable CMP sea de un cierto tipo.

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 2023React Day Berlin 2023
21 min
Los tipos más útiles de React
Top Content
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 y React: Secretos de un matrimonio feliz
React Advanced 2022React Advanced 2022
21 min
TypeScript y React: Secretos de un matrimonio feliz
Top Content
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.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
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.

Workshops on related topic

React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
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.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
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.
Consejos y Trucos Profundos de TypeScript
Node Congress 2024Node Congress 2024
83 min
Consejos y Trucos Profundos de TypeScript
Top Content
Featured Workshop
Josh Goldberg
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.
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
React Advanced 2022React Advanced 2022
148 min
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
Top Content
Featured Workshop
Maurice de Beijer
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.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.