00:00:00React acaba de recibir una nueva herramienta de escaneo de antipatrones llamada React Doctor.
00:00:05Fue creada por Aidan Bai, el mismo desarrollador supertalentoso que creó Million.js,
00:00:11React Grab, React Scan y Amy.
00:00:14Y en el video de hoy, vamos a echar un vistazo a esta herramienta, ver cómo funciona y probarla
00:00:19por nosotros mismos.
00:00:20Va a ser muy divertido, así que vamos a sumergirnos en ello.
00:00:27React Doctor es una herramienta de CLI sencilla diseñada para detectar antipatrones comunes de React como
00:00:33el uso innecesario de useEffect, problemas de accesibilidad o el “prop drilling”.
00:00:38Bajo el capó, utiliza OX lint, uno de los linter de JavaScript más rápidos, escrito
00:00:43en Rust.
00:00:44Y como OX lint está basado en Rust, puede escanear decenas de miles de líneas de código en
00:00:49milisegundos.
00:00:50Utiliza esto para construir un Árbol de Sintaxis Abstracta o AST de tu proyecto buscando patrones
00:00:56específicos de React como el uso de hooks, estructuras de props y límites de componentes.
00:01:01Está basado en más de 47 mejores prácticas de React e incluye escaneos útiles como, por ejemplo,
00:01:08buscar claves de seguridad incrustadas accidentalmente o detectar patrones de estado
00:01:13de carga, proporcionando un buen informe sobre cuándo usarlos en lugar de
00:01:19optar por “useTransition”.
00:01:21Este proyecto es completamente de código abierto y todavía es bastante reciente.
00:01:25Así que es una gran oportunidad para que la comunidad contribuya al proyecto añadiendo otras
00:01:30verificaciones de buenas prácticas que creas que podrían faltar.
00:01:33Creo que la parte más genial de este proyecto es la interfaz de usuario.
00:01:36Tiene un diseño y una estética muy agradables y, gracias a OX lint, es rapidísimo.
00:01:42Además de todo eso, también puedes ejecutarlo como una habilidad para tu agente de IA
00:01:47o usarlo programáticamente en algo como una API de Node.js, por ejemplo.
00:01:52Ahora vamos a probar esta herramienta nosotros mismos.
00:01:54Tengo este proyecto de código basado en React, una herramienta básica de visualización de gráficos de bolsa,
00:02:00que escribí hace seis años, cuando la IA ni siquiera era algo común todavía.
00:02:04Va a ser muy interesante ver qué tan bien escribía código React hace seis años.
00:02:09Voy a ejecutar el comando “react-doctor” en mi repositorio.
00:02:12Y como pueden ver, obtenemos un resultado al instante.
00:02:15Y miren eso.
00:02:16Mi proyecto tiene una puntuación casi perfecta.
00:02:18Me alegra el corazón saber que incluso hace seis años estaba escribiendo código React
00:02:24de buena calidad.
00:02:25Muy bien, veamos qué ha descubierto.
00:02:27Recibimos una advertencia sobre el uso de un índice como clave, lo cual es muy válido.
00:02:31También reconoció que “recharts” es una librería pesada.
00:02:35Así que me aconseja utilizar carga perezosa (lazy loading) en su lugar.
00:02:38Además, notó que tengo cuatro llamadas a “useState” en un solo “useEffect”.
00:02:44Y que debería considerar el uso de “useReducer”.
00:02:46Todos son puntos muy válidos.
00:02:48Gracias, React Doctor.
00:02:49Ahora intentemos ejecutarlo en una base de código más grande.
00:02:52Aquí hay un proyecto de CRM muy popular llamado 20, que se supone que es como una
00:02:57alternativa de código abierto a Salesforce.
00:02:59Y está escrito en React.
00:03:00Clonemos este repositorio y veamos cómo lo evalúa React Doctor.
00:03:04Una vez ejecutado, vemos que detecta automáticamente que el proyecto es
00:03:08un monorepo y reconoce los paquetes.
00:03:12Primero veamos la puntuación del paquete de su sitio web de marketing.
00:03:15Y como vemos aquí, también es bastante buena.
00:03:18Tenemos un error, pero es solo una etiqueta “alt” que falta.
00:03:22Así que diría que, en general, es una puntuación muy buena.
00:03:25Bien, ahora revisemos el paquete frontal, por ejemplo.
00:03:30A este le fue un poco peor porque obtuvimos 99 errores, pero sigue en la zona verde.
00:03:35Esto es lo que recomendaría.
00:03:37Si eres un desarrollador que quiere mejorar su portafolio de GitHub, esta es una buena herramienta
00:03:41para escanear varios proyectos de código abierto e identificar dónde puedes hacer
00:03:47contribuciones significativas.
00:03:48Ahí lo tienen, eso es React Doctor en pocas palabras; creo que es una herramienta
00:03:52ligera y práctica que puede ayudar significativamente a revisar y verificar la coherencia
00:03:58de tus proyectos de React.
00:03:59Y definitivamente la usaré en mis propios proyectos de ahora en adelante.
00:04:03Si les ha resultado útil este video, por favor háganmelo saber haciendo clic en el botón de “me gusta”
00:04:07debajo del video.
00:04:09Y no olviden suscribirse a nuestro canal para no perderse ninguno de nuestros
00:04:14futuros videos.
00:04:15Soy Andris de Better Stack y los veré en los próximos videos.