Análisis de dependencias en proyectos de React

Al desarrollar proyectos de React.js (o de JavaScript con paquetes de NPM en general) es muy importante analizar las dependencias con las que vamos a trabajar.

Si creas un proyecto desde cero, lo más seguro es que utilices la última y más moderna versión de tus herramientas favoritas. Pero este no es el caso en la mayoría de proyectos de software “avanzados”.

¿Qué version de React utilizar?

¿Has oído de todas las empresas y productos que usan React.js (Platzi, Facebook, Instagram, Netflix, Uber, Airbnb)? Bueno, lamento decirte que ninguna de ellas usa React 18.

¿¡Cómo es posible!? ¿Por qué una empresa de este tamaño no podría actualizarse? ¿Es esto acaso una muestra de incompetencia? ¿Sus equipos de software viven debajo de una piedra? ¿Perdieron interés en nunca parar de aprender?

Noup. Simplemente actualizar no es una prioridad.

Imagina que trabajas en Platzi. Miles de estudiantes están ansiosos por mejoras en la plataforma. Algunos incluso están desesperados porque tienen un error que les impide avanzar con su aprendizaje.

¿Qué es más prioritario?

• ¿Darle la mejor experiencia posible a tus estudiantes?
• ¿O migrar de React [inserte versión "vieja" aquí] a React 18, 19, 20 y las que vengan?

Imaginemos otra situación:

Aún no trabajas en Platzi. Estás en entrevista con Diego De Granda. Él está muy satisfecho con tu portafolio y todo lo que sabes de React. Pero te asigna una última prueba para decidir si entras o no al team: resolver todos los bugs que puedas de un proyecto gigantesco que usa React 16.

¿Qué harías en tu prueba de trabajo?

• ¿Decirle a Diego “uy, Dieguillo, qué decepción, yo esperaba más de Platzi, yo no trabajo con versiones cavernícolas de React, ¡adiós! ¡me avisan cuando quieran actualizar!”?
• ¿O sencillamente trabajar con la React que tenga el proyecto y enfocarte en lo importante (entender la arquitectura, resolver los bugs, etc.)?

¿Cómo usar una versión en específico de React?

Para tomar este curso es requisito obligatorio que conozcas cómo trabajar con NPM. Si no lo has hecho antes, te recomiendo tomar el Curso de Gestión de Paquetes y Dependencias con NPM.

Para instalar React y React DOM usamos el comando npm install react react-dom --save. Eso instala automáticamente la última versión de estas tecnologías.

Si quieres usar otra versión, usamos el símbolo @ y la versión con la que queramos trabajar (por ejemplo, en este curso usaremos React 17, así que la instalación puede realizarse con el comando npm install [email protected] [email protected] --save).

En próximas clases instalaremos React y muchas otras herramientas para configurar nuestro entorno de trabajo profesional. Si te fijas en el archivo package.json, verás que estas son las dependencias con las que trabajaremos en este curso:

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.0.0"

Estás en tu completo derecho de usar estas u otras versiones.

Si usas las mismas que el profesor Oscar, podrás seguir todas sus instrucciones sin conflictos por cambios inesperados en las últimas versiones de React, Webpack o React Router.

Pero también es perfectamente válido instalar la última versión de todo y “cacharrearle” hasta que logres hacerla funcionar. No es el camino más fácil. Pero es parte de la vida. Conseguirlo es un gran logro del que deberías sentir mucho orgullo.

Mi recomendación es que uses las mismas versiones del profesor si es tu primera vez trabajando con estas herramientas. Pero si ya las conoces, tratar de usar versiones diferentes definitivamente será una gran aventura (que vale la pena).

Recomendación personal

Recuerda que tú eres el o la máxima responsable de tu aprendizaje.

Platzi es el camino corto, como hacer trampa en un videojuego para ir más rápido. La increíble comunidad de estudiantes y profes que nos acompaña es maravillosa para hacer tu carrera profesional en cámara rápida.

Pero tú sigues estando en control de tus decisiones. Aprópiate de ellas. Toma riesgos y asume sus consecuencias. Lo peor que puede pasar es que debas volver a empezar unas clases atrás. Y eso está muy bien. Vas a avanzar más rápido que la primera vez.

Siempre nos encontrarás en la sección de aportes y preguntas para ayudarte en todo lo que podamos. 💚

¿Entonces NO vale la pena aprender nuevas versiones de React?

¡No! ¡Esa NO es la lección correcta!

Sí es muy importante conocer los cambios en las nuevas versiones de nuestras tecnologías favoritas. Pero esto no debe impedirte avanzar con tu aprendizaje ni colaborar en proyectos con versiones que aún funcionan aunque no sean la última.

Muchas veces sí aporta muchísimo valor que una empresa o equipo actualice la versión de algunas de sus dependencias:

• Si ya salió hace un tiempo, es muy probable que los clásicos bugs que aparecen en los lanzamientos ya hayan sido solucionados.
• También es posible que esta migración represente una mejora en los tiempos de carga de nuestra aplicación, así que con solo actualizar podemos mejorar la experiencia de los usuarios.

Estas decisiones no suelen tomarse de un día para otro. Se planea con mucho tiempo de anticipación y analizando muy bien qué ventajas a largo plazo traerá esta inversión. A veces puede valer la pena. En otras simplemente no será prioridad.

---

Entonces, ¿qué versión de React vas a utilizar para el proyecto de React Shop? ¿Cuál será tu estrategia de estudio para completar este curso y sacarle todo el provecho posible? Cuéntame en los comentarios. 😉