Create-React-App (CRA) y sus beneficios en React

¡Buenas! Hoy voy a compartir con ustedes algunas reflexiones personales sobre un tema que ha estado en mi mente últimamente: El cambio en la forma en que utilizamos create-react-app (CRA) y cómo esto beneficia la experiencia de los desarrolladores en React.

¿Por qué create-react-app ya no es rentable?

Hace algún tiempo, CRA solía ser la elección predeterminada para iniciar proyectos en React. Pero ¿por qué ya no es rentable?

1- Complejidad del proyecto

A medida que nuestras aplicaciones web se tornan más sofisticadas, CRA a menudo no proporciona la flexibilidad necesaria para configurar herramientas avanzadas como Webpack, Babel o ESLint de acuerdo con las necesidades de nuestro proyecto. Esto puede resultar en soluciones extremas, como la “eyección” de la configuración predeterminada de CRA, que rompe con su simplicidad original.

2- Configuración excesiva

CRA incluye una gran cantidad de configuración predeterminada, lo que puede hacer que nuestras aplicaciones estén llenas de código innecesario. Esto, a su vez, puede afectar negativamente la velocidad de carga y el rendimiento general de la aplicación. A medida que nuestros proyectos crecen, esta sobrecarga puede volverse significativa y difícil de optimizar.

3- Falta de personalización

En un mundo donde buscamos soluciones más personalizables. CRA puede limitar nuestra capacidad para modificar la configuración de construcción y agregar características personalizadas sin un esfuerzo significativo. Esto puede ser una barrera para proyectos que requieren configuraciones más avanzadas.

Beneficios del cambio en React

Ahora hablemos sobre cómo este cambio puede beneficioso en la forma en que usamos React:

1- Mayor flexibilidad

Las alternativas a CRA nos brindan un mayor control sobre la configuración de nuestra aplicación React, lo que nos permite adaptarla a nuestras necesidades específicas. Esto es especialmente útil para proyectos que requieren un enfoque más personalizado.

2- Mejor rendimiento

Con opciones de configuración más optimizadas, nuestras aplicaciones  tienden a tener un mejor rendimiento, lo que mejora la experiencia del usuario final. La velocidad de carga y la eficiencia son factores cruciales para el éxito de una aplicación web.

3- Aprendizaje profundo

Usar alternativas a CRA nos da la oportunidad de aprender más sobre las herramientas y tecnologías subyacentes, lo que es beneficioso para nuestro crecimiento profesional. Con el control sobre la configuración, podemos profundizar en aspectos clave del desarrollo web.

¿Cómo instalar las alternativas a React?

Ahora que hemos explorado por qué create-react-app ya no es la elección predeterminada y cómo el cambio en la forma en que utilizamos React puede ayudarnos, es importante conocer las alternativas que están ganando terreno. Aquí te mostraré cómo puedes comenzar con algunas de las opciones más populares: Next.js, Gatsby, Remix y Expo.

Instalar Next.js

Next.js es una de las alternativas más populares que combina React con características avanzadas como el enrutamiento y la renderización del lado del servidor (SSR). Para comenzar, sigue estos pasos:

1) Crea un proyecto Next.js

Coloca en tu terminal el siguiente comando:

npx create-next-app [projectName]

(para utilizar la última versión disponible usa npx create-next-app@latest [projectName])

2) Cambia el directorio del proyecto:

Coloca en tu terminal el siguiente comando:

cd [projectName]

3) Inicia el servidor de desarrollo:

Coloca en tu terminal el siguiente comando:

npm run start

Visita http://localhost:3000 en tu navegador para ver tu aplicación en acción.

Instalar Gatsby

Gatsby es una excelente opción para construir sitios web estáticos y aplicaciones web modernas. Para comenzar, sigue estos pasos:

1) Crea un proyecto Gatsby:

Coloca en tu terminal el siguiente comando:

npx gatsby new [projectName]

2) Cambia al directorio del proyecto:

Coloca en tu terminal el siguiente comando:

cd [projectName]

3) Inicia el servidor de desarrollo:

Coloca en tu terminal el siguiente comando:

npm run develop

Visita http://localhost:8000 en tu navegador para ver tu sitio Gatsby.

Instalar Remix

Remix es una plataforma de desarrollo web con un enfoque en el rendimiento y la experiencia del desarrollador. Para comenzar, sigue estos pasos:

1) Crea un proyecto Remix:

Coloca en tu terminal el siguiente comando:

npm init remix

2) Cambia al directorio del proyecto:

Coloca en tu terminal el siguiente comando:

cd [projectName]

3) Inicia el servidor de desarrollo:

Coloca en tu terminal el siguiente comando:

npm run start

Visita http://localhost:3000 en tu navegador para comenzar a trabajar con Remix.

Instalar Expo

Expo es una herramienta que facilita el desarrollo de aplicaciones móviles con React Native. Sigue estos pasos para comenzar:

1) Instala Expo CLI globalmente (si aún no lo has hecho):

Coloca en tu terminal el siguiente comando: npm install -g expo-cli

2) Crea un proyecto Expo:

Coloca en tu terminal el siguiente comando: expo init [projectName]

3) Cambia al directorio del proyecto:

Coloca en tu terminal el siguiente comando: cd [projectName]

4) Inicia el servidor de desarrollo:

Coloca en tu terminal el siguiente comando: expo start

Esto abrirá Expo DevTools en tu navegador y te proporcionará un código QR que puedes escanear con la aplicación Expo Go en tu dispositivo móvil.

El panorama de desarrollo de React evoluciona constantemente y estas alternativas ofrecen una variedad de opciones para adaptarse a las necesidades de tu proyecto. Ya sea que busques rendimiento, facilidad de desarrollo o características avanzadas, estas herramientas tienen algo que ofrecer.

Experiencia personal

Desde que cambié mi enfoque y comencé a explorar alternativas, mi experiencia con React ha mejorado significativamente. Aquí hay algunos ejemplos de cómo este cambio me ha beneficiado:

• La mayor flexibilidad que ofrecen las alternativas a CRA (sobre todo Next.js) me ha permitido adaptar cada proyecto de React a sus necesidades específicas. Ya no estoy limitado por las decisiones de configuración predeterminadas.
  
• El rendimiento de mis aplicaciones ha mejorado notablemente. Con opciones de configuración más optimizadas, mis usuarios experimentan una velocidad de carga más rápida y una mayor eficiencia en el uso de la aplicación.
  
• Mi crecimiento profesional también ha avanzado. Usar alternativas a CRA me ha dado la oportunidad de profundizar en las herramientas y tecnologías subyacentes, lo que ha ampliado mi conjunto de habilidades como desarrollador web.

En resumen, el cambio en mi opinión y mi perspectiva hacia las alternativas a create-react-app ha sido una revelación. Desde que hice este cambio, mi trabajo con React se ha vuelto mucho más sencillo y eficiente. Adaptarme a estas nuevas herramientas ha sido fundamental para mantenerme relevante en la industria del desarrollo web en constante cambio.

Espero que mi experiencia pueda inspirarte o servirte en tu propio viaje como desarrollador.

¡Éxitos!