React, TypeScript y TDD

Rate this content
Bookmark

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.

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

FAQ

Es posible desarrollar en React sin necesidad de visualizar constantemente los cambios en el navegador manteniéndose dentro del IDE y utilizando pruebas unitarias para verificar la funcionalidad de los componentes. Esto permite trabajar de manera más metódica y concentrada, asegurando que todo funcione correctamente a través de pruebas automatizadas antes de proceder con más cambios.

TypeScript ofrece ventajas significativas en el desarrollo de React, como la capacidad de definir tipos de datos explícitos, lo que ayuda a prevenir errores y facilita la refactorización del código. Además, TypeScript mejora la autocompletación, haciendo que el desarrollo sea más eficiente y menos propenso a errores.

Para probar eventos de clic en React utilizando pruebas unitarias, se puede utilizar la biblioteca de pruebas de React junto con herramientas como fireEvent o userEvent. Estas herramientas permiten simular eventos de clic y verificar que los manejadores de eventos correspondientes se activen correctamente, lo que facilita la prueba de la interacción del usuario sin necesidad de un navegador.

Sí, es posible y recomendable separar la lógica de estado de los componentes de presentación en React. Esto se puede lograr utilizando hooks personalizados o moviendo el estado a componentes contenedores, lo que permite a los componentes de presentación ser más simples y reutilizables, mientras que la lógica de estado se maneja de manera más centralizada y eficiente.

La diferencia principal entre fireEvent y userEvent radica en que userEvent ofrece simulaciones más avanzadas y realistas de las interacciones del navegador. Mientras que fireEvent puede usarse para disparar eventos de forma básica, userEvent proporciona métodos que imitan más fielmente el comportamiento del usuario, como ingresar texto o hacer clic, lo que puede ser más efectivo para pruebas que involucran complejas interacciones del usuario.

Paul Everitt
Paul Everitt
174 min
12 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La masterclass de hoy se centra en el desarrollo guiado por pruebas en React, cubriendo temas como la ejecución, construcción y prueba de aplicaciones React, utilizando Prettier para el formateo de código, refactorización y creación de subcomponentes, implementación de estado y manejo de eventos en componentes, y gestión de proyectos e integración de IDE. La masterclass enfatiza los beneficios del desarrollo guiado por pruebas, el uso de IDEs, y la integración con herramientas como Jest y React Testing Library. TypeScript también se destaca como una herramienta valiosa para la comprobación de tipos y la mejora de la calidad del código. En general, la masterclass proporciona una guía completa para desarrollar componentes de React primero en prueba y seguir las mejores prácticas en el desarrollo de software.
Available in English: React, TypeScript, and TDD

1. Introducción al Desarrollo Guiado por Pruebas en React

Short description:

La masterclass de hoy trata sobre el desarrollo de componentes React primero en pruebas. Escribir una prueba antes de escribir el código y continuar desarrollando el código y el componente. Al final, puedes ver el resultado real en el navegador. El tutorial proporciona una URL donde puedes seguirlo, con resúmenes, código y videos. Cada paso en el tutorial tiene un enlace al código funcional para ese segmento.

La workshop de hoy va a ser yo tratando de convencerte sobre una idea. Y esa idea es sobre desarrollar tus React components primero en pruebas. Escribir una prueba antes de que escribas el code. Escribir una prueba como la forma de continuar desarrollando el code y el componente. Y solo al final, cuando necesitas ver cómo se ve realmente, vas a un navegador.

Este tutorial tiene asociado algo que puedes seguir. Puedes seguirlo en esta url www.jetbrains.com webstorm guide. Si haces clic en tutoriales llegarás a este tutorial. Y encontrarás en este tutorial que estoy haciendo trampa. Cada cosa tiene el resumen de lo que voy a hablar, tiene el code que voy a mostrar. Incluso tiene un video que es en su mayoría correcto.

Permíteme cubrir ese punto rápidamente sobre el sí, puedo. Lo puse en discord, pero tienes razón. Debería haberlo pasado a alguien más lo hizo bien. Bien, me atrapaste, gracias por hacer eso. Cada cosa que tengo es como hacer trampa y ponerla aquí, pero hay una razón para esto, quiero que puedas seguirlo y jugar con él y no preocuparte por cada cosa. Digo si hay algo que no entendiste, hay algo que quieres seguir. Puedo ser fácilmente reemplazado por una URL a un sitio web. Y también debería saber que cada paso en el tutorial tiene un enlace al code funcional para ese segmento del tutorial.

2. Configurando un Proyecto React

Short description:

En esta parte, discutiremos los beneficios del desarrollo guiado por pruebas y el uso de IDEs en el proceso de desarrollo. También cubriremos el proceso de configuración y limpieza, pruebas y depuración. El tutorial está actualizado con la última versión de Create React App y se centra en la escritura de componentes React. Crearemos un nuevo proyecto utilizando WebStorm y NPX, asegurándonos de tener la última versión de Create React App. Se incluirá soporte para TypeScript. La salida de Create React App instalará las dependencias necesarias para nuestro proyecto. ¡Vamos a sumergirnos!

Entonces, lo que vamos a hacer es que vamos a pasar por esto. Hacer el caso para esta forma de hacer desarrollo. A medida que avanzo construyendo code de trabajo. Intentaremos hacer una parada tal vez como una hora y media a partir de ahora o algo así. Tomar un descanso de cinco minutos. Así que tengo mi temporizador configurado para eso. También estaremos hablando en el chat. Intentaré obtener tanto el canal de Discord como el chat de Zoom un poco más grande, para no cometer un error en él.

Muy bien, discúlpame por un segundo. Disculpas, me pregunto si mi micrófono recogió ese estornudo. Tomaremos un pequeño descanso, seguiremos todas estas cosas. Y si te quedas atascado, está bien, porque el enlace al code de trabajo para cada paso te teletransportará a un futuro mágico donde todo funciona correctamente.

Una última advertencia antes de comenzar, soy un defensor del desarrollador para nuestros IDEs. Entonces, en JetBrains, para esto, significaría WebStorm, o cualquiera de los otros IDEs que incluyen el complemento WebStorm. No voy a promocionar realmente WebStorm en esto. Será, utilizo la palabra IDE, porque entonces se aplicará a otros editores inteligentes que pueden mirar la estructura en lugar de solo las cadenas de texto. Pero al mismo tiempo, a medida que hago este tutorial, me emociono mucho acerca de cómo la tooling puede ayudarnos, la tooling de testing y la tooling de escritura puede hacernos tener una mejor experiencia de desarrollo y permanecer en el flujo.

Entonces, con eso en mente, comencemos. Esta es la secuencia que vamos a hacer configuración y limpieza y luego saltar directamente a testing. Haremos un poco de debugging para mostrar el beneficio de sentarse en un IDE, y luego directamente a varias cosas sobre la escritura de componentes React. Esto está actualizado a partir de la creación de la aplicación React la semana pasada, por lo que actualicé todo el code para esto. No actualicé los videos. Hay un par de lugares donde los videos están desactualizados en el uso de un selector jest para roles, pero todos somos inteligentes. Podemos trabajar en ello. No sé cuánto avanzaremos en todo esto hoy, pero, de nuevo, soy fácilmente reemplazable, por lo que si no llegamos al final, puedes ver el video en tu propio tiempo y ver estas últimas cosas. Son temas bastante interesantes y realmente muestran hasta dónde puedes llegar con las pruebas primero.

Muy bien, comencemos, así que voy a ir a la configuración del proyecto, y voy a conseguirnos una aplicación de muestra, y vamos a mostrar tres tipos de ejecución de cosas en el code. Vamos a mostrar la configuración de desarrollo, la configuración de construcción de su sitio final y la configuración de prueba. Y en el camino, vamos a empezar a introducir un poco de cosas sobre el IDE. Entonces, con eso en mente, si quieres seguir en esta página, está bien. También lo tengo en segundo plano para poder hacer trampa. Voy a ir a mi IDE, voy a empezar en la pantalla de bienvenida a WebStorm. Voy a crear un nuevo proyecto. Ahora, podría, si no estás usando WebStorm, está bien, puedes escribir esto. Entonces, voy a crear un nuevo proyecto, va a ser un proyecto react. Lo voy a llamar Create React App y me va a indicar algunas de las cosas que va a utilizar por defecto. Déjame asegurarme de que lo tengo. Tengo que desplazarme hacia arriba. Estamos bien. Ahí. Estamos bien aquí. Estoy usando hug. Creo que node 16. Sí. 16.10 Gracias, WebStorm por responder esa pregunta por mí. Va a estar usando NPX para obtener create React app. Así que veamos si tienes idea inteligente definitiva, entonces tienes acceso al plugin Node JS. Y si has instalado Node JS, tienes acceso a todo esto. Muy bien. Un pequeño descargo de responsabilidad sobre esto, voy a explicar como si algunas cosas para algunos de ustedes podrían ser nuevas. Pero también me doy cuenta de que algunos de ustedes sí saben lo que es NPX. No me detendré en ello porque está muy bien explicado en otro lugar. En el mundo de Node JS. Pero si estás creando un proyecto, puedes usar el comando NPM para instalar paquetes. Pero ¿qué pasa si quieres instalar como una aplicación, algo que vas a ejecutar, que luego creará un paquete. Hay esta cosa llamada NPX que dice, Bueno, ve a buscar la última versión de esto ponlo en un entorno temporal y ejecútalo. Así que ves muchas de estas herramientas de línea de comandos como aprendices y formateadores y andamios como este. Create React app usando NPM para que siempre estés obteniendo la última versión. ¿Cuál es la última versión de Create React app? Que es la herramienta de andamiaje que queremos usar. Es cuatro punto oh punto tres. Y finalmente, quiero hacer un proyecto Typescript porque la escritura es una parte importante de esto.

Bueno, con eso en mente. un poco fuera del final. Debería haber. Voy a volver y hacer uno nuevo. Lo hice bien, voy a ir y borrar ese bolígrafo de rasguño. Muy bien. Vale, y luego volveré. Mis disculpas debería haber borrado eso. Así que nuevo proyecto, react lo voy a llamar CRA, y voy a pedir soporte para TypeScript, decir crear nuevo proyecto y WebStorm está poniendo en mi monitor externo. Así que déjame redimensionar esto aquí. Y entonces. Entonces. Entonces lo que hizo WebStorm fue que creó un nuevo proyecto entre comillas en ese directorio y ejecutó algunas cosas que sabe cómo ejecutar, como crear react out, que está creando todo el software y luego instalando todas las dependencias. Así que eso es lo que ves ahora es la salida de create react app, como si lo estuviera haciendo en la línea de comandos.

Ah, sí next JS, de hecho, estamos cada vez más interesados en next JS, mi colega Ebenezer Dawn tiene un largo post en el blog sobre MDX y next JS que publicamos recientemente. Muy bien, así que esto está yendo y obteniendo, déjame hablar sobre create react app. Para aquellos de ustedes que no lo conocen, es un andamio para generar la mejor colección de software soportado para una moderna aplicación react. Lo que eso significa es paquetes adicionales que podrías querer usar y tooling que podrías querer usar como prestamistas y cosas así. Va a ser más de mil, tal vez 1,500 paquetes que instala. Y esto es simplemente locura. Es tan difícil mantener todas estas cosas en tu cabeza. Y luego a medida que cambia como cada día, esto romperá eso create react app nos está haciendo un gran favor al tomar la propiedad de qué software deberías usar. ¿Y qué versiones de qué software deberías usar? Y ellos dirán que apoyaremos todo eso. Así que esto es algo realmente importante que hacer para create react app. Y por eso lo estoy usando como punto de partida.

Qué suerte tenemos compañeros de trabajo aquí juntos.

Watch more workshops on topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Aventuras de Renderizado Concurrente en React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
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.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
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.

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

Una Guía del Comportamiento de Renderizado de React
React Advanced Conference 2022React Advanced Conference 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
No resuelvas problemas, elimínalos
React Advanced Conference 2021React Advanced Conference 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Compilador React Forget - Entendiendo React Idiomático
React Advanced Conference 2023React Advanced Conference 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced Conference 2022React Advanced Conference 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.