Ruta de Aprendizaje del Framework React

Como estudiante de desarrollo de aplicaciones, existen muchas librerías y frameworks que pueden ayudarte a desarrollar tus proyectos.

Pero cuando se trata de aprender ReactJS, eso no debería ser una decisión difícil de tomar. Existen razones por las que deberías aprender React.

ReactJS (también conocido como React) es una biblioteca de código abierto basada en JavaScript.

El framework de React es increíblemente popular y se encuentra entre los frameworks más utilizados para el desarrollo web y móvil. React Native es igualmente popular entre los desarrolladores de aplicaciones móviles.

En este artículo, vas a encontrar una ruta de aprendizaje completa para el framework de React. Si estás pensando en iniciar ReactJS y deseas obtener un enfoque paso a paso, este artículo es para ti.

Además, si eres un desarrollador de ReactJS que se pregunta qué temas avanzados podrías aprender para mejorar, también encontrarás respuestas aquí.

¿Por qué necesitas una ruta de aprendizaje para aprender React?

Buena pregunta. Piensa en ello de esta manera. Estás en una ciudad desconocida y tienes que viajar de un lugar a otro. Lo que más necesitas es un mapa o una guía que te ayude en el viaje.

Aprender algo nuevo no tiene por qué ser muy diferente. Si tienes una ruta o guía que te permita saber “si primero debes aprender A, para luego intentar aprender B y entonces pasar a C”.

Puedes sentirte un poco abrumado al ver esta hoja de ruta la primera vez. Pero no te preocupes. No es tan desafiante como parece.

Como ReactJS es muy popular, es posible que encuentres cierta semejanza aquí con muchas otras hojas de ruta sugeridas. Pero, no son exactamente iguales.

Dividir la ruta de aprendizaje en fases

Esta ruta de aprendizaje se divide en cuatro fases:

  1. Qué aprender antes de React.
  2. Qué aprender como principiante a React.
  3. Cómo pasar de desarrollador React principiante a intermedio.
  4. Cómo pasar de desarrollador React intermedio a avanzado.

Qué aprender antes de aprender React

ReactJS está basado en JavaScript. Debes estar familiarizado con algunas cosas (aparte del conocimiento básico de JavaScript) para acelerar su aprendizaje de React a toda velocidad, como por ejemplo: Git, HTML, CSS, Javascript y NPM.

Control de versiones Git

Git es una herramienta de control de versiones que le ayuda a administrar mejor su código fuente. No tiene una relación directa con ReactJS. Pero ayuda si aprende sus usos básicos para que pueda aprovechar el ecosistema de desarrollo.

Git es fácil de aprender cuando te enfocas en algunas cosas básicas:

  • Cómo iniciar un repositorio
  • Cómo organizar/desorganizar sus cambios
  • Cómo enviar sus cambios al repositorio
  • Cómo empujar al repositorio remoto
  • ¿Cómo resolver conflictos de fusión?

Junto con Git, también necesitarás saber cómo usar un servicio de administración de repositorios basado en Git como GitHub. Puede aprender todo sobre Git y GitHub en esta lista de reproducción de YouTube: Lista de reproducción de Git y GitHub .

HTML

HTML proporciona la estructura de una página web. Usará la estructura HTML en una nueva sintaxis llamada JSX cuando codifique en ReactJS.

No necesitas saber todo sobre HTML. Pero debe tener un conocimiento básico de las etiquetas y la semántica más utilizadas. Puedes consultar estos cursos intensivos de HTML para principiantes.

CSS

Puedes aprender mucho sobre CSS en el sitio de CSS-Tricks, con todos los cursos de CSS o con los recursos que he publicado aquí.

Javascript

Debe conocer los conceptos más importantes de JavaScript.

NPM

Debe saber cómo usar npm, yarny el administrador de versiones de nodos (nvm) para ayudarlo a ejecutar y probar una aplicación ReactJs localmente.

Saber cómo funcionan a un alto nivel siempre es útil para depurar su entorno en caso de que surjan problemas.

Cómo implementar, hospedar o hacer pública tu aplicación

No será muy divertido si ha creado algo genial con ReactJS y no puede mostrárselo al mundo. Por lo tanto, debe saber cómo implementar la aplicación y ponerla a disposición del público.

Existen herramientas como Vercel o Netlify que facilitan la implementación de su aplicación React con unos pocos clics.

¿Qué debes aprender como principiante de React?

Centrémonos ahora en lo que necesita aprender como mínimo para comenzar a disfrutar de React en la práctica. Estas son piezas fundamentales, así que asegúrese de dedicar suficiente tiempo y esfuerzo práctico para comprender realmente los conceptos.

Hay un dicho famoso llamado “Piensa en React”. Estos conceptos fundamentales deberían ayudarte a desarrollar esa mentalidad de “Piensa en React”.

Comprender qué es React

Debes comprender qué tiene de especial ReactJs. Es una biblioteca de interfaz de usuario declarativa basada en componentes.

Aprende a configurar tu entorno de desarrollo

Hay varias formas de configurar un entorno de desarrollo para ReactJs. Como mínimo, puede apuntar a la distribución de CDN desde tu archivo de script.

Este enfoque está bien para empezar, pero no es sostenible. Como principiante, es posible que no desee dedicar demasiado tiempo a las configuraciones relacionadas con Babel o Webpack para sus proyectos.

En mi opinión, la forma más inteligente y rápida de comenzar con el entorno de desarrollo de ReactJS es mediante el uso de la aplicación Create React . Puede seguir los sencillos pasos en su página de inicio para que funcione en unos minutos.

Aprende JSX

ReactJS permite que la lógica de la interfaz de usuario se combine con la lógica de representación, los eventos, el manejo de cambios de estado y más. Este acoplamiento es para fomentar las prácticas de construcción de componentes autónomos.

JSX es una sintaxis que se parece HTMLpero también tiene el poder de JavaScript. Esta sintaxis ayuda a los desarrolladores a escribir la lógica de la interfaz de usuario con todos los elementos necesarios, como la obtención de datos, las condiciones, los bucles, las expresiones, etc.

Puedes escribir una aplicación ReactJS sin usar la sintaxis JSX, pero la experiencia de desarrollo no será tan buena.

Aprende sobre los componentes de React

Los componentes son el corazón de las aplicaciones de ReactJs.

Creamos componentes independientes que son reutilizables, autónomos y aislados. Se supone que un componente debe realizar un trabajo correctamente. Múltiples componentes se unen para construir la aplicación.

En ReactJS, puede crear componentes utilizando clases de JavaScript o funciones simples. Abogo por el uso de componentes funcionales, ya que es más sencillo y requiere menos codificación.

Estados en React

El estado son los datos privados de su componente. No compartimos estados entre componentes. El “estado” de su componente que utiliza para representar información y modificar información.

Accesorios en React

En la programación del mundo real, necesitará que los componentes interactúen entre sí. Los estados son privados para un componente, pero debe pasar los datos entre los componentes. Ahí es donde entra props a escena. Tenga en cuenta que los accesorios son de solo lectura.

Listas y claves en React

Usamos list para representar una lista de elementos en un componente React. Es una tarea muy común enumerar usuarios, elementos TODO y otras cosas. Usamos la map() función para iterar sobre la lista y mostrar los resultados.

keys ayuda a identificar qué elemento de la lista ha cambiado para informar a React para volver a renderizar. ReactJS da una advertencia si olvida mencionar las claves de una lista.

Métodos de ciclo de vida en React

Discutimos que el “estado” es un asunto privado de un componente. El estado puede ser dinámico y puede necesitar modificaciones. También necesitamos realizar limpiezas de recursos cuando se destruyen componentes. ReactJs proporciona varios métodos de ciclo de vida para detectar las fases y tomar medidas.

Si recién está comenzando con ReactJS, debe comprender la gestión del ciclo de vida de los componentes funcionales. Puede hacer esto usando los ganchos incorporados como useState , useEffect , etc.

¿Cómo pasar de desarrollador principiante a intermedio?

Ahora veamos lo que se necesita para pasar de un nivel principiante a un nivel intermedio con React.

En esta fase, comenzarás a concentrarte en la integridad de la aplicación. Al final de esta fase, podrás asumir la mayoría de los desafíos de ReactJs y disfrutar al completarlos.

Estilo en React

Todos queremos que nuestras aplicaciones se vean frescas y estéticamente agradables. Puede usar CSS simple y antiguo para diseñar su aplicación ReactJS.

O puedes usar Sass u otras bibliotecas de componentes basadas en CSS como TailwindCSS , ChakraUI , react-bootstrap o MUI . La decisión es completamente tuya.

Manejo de formularios en React

El manejo de formularios es un requisito indispensable en las aplicaciones web. Debe comprender cómo manejar los elementos de formulario a la manera de ReactJS.

Por ejemplo, puede usar la biblioteca react-hook-form para crear formularios fácilmente.

Manejo de datos en React

Esta es una parte crucial del desarrollo de aplicaciones. Debe aprender a usar las fetch API bibliotecas o como node-fetch e axios interactuar con las API y manejar datos en su componente.

Proceso de reconciliación en React

ReactJS utiliza el DOM virtual y el algoritmo de diferenciación para decidir cuándo y qué actualizar en el DOM real para la representación. Saber cómo funciona debajo del capó lo ayudará con la depuración.

Ganchos de React

Con suerte, aprendiste un poco sobre algunos ganchos incorporados, como useState useEffect cuando aprendes sobre el ciclo de vida. Hay otros ganchos incorporados útiles que necesita aprender con casos de uso. Asegúrate de no ignorarlos.

Ganchos de React personalizados

Los ganchos personalizados ayudan en la reutilización. Debe buscar oportunidades para extraer la lógica de los componentes a ganchos reutilizables. El código se vuelve limpio y modular con el uso de ganchos personalizados.

Contexto en React

En las aplicaciones React, pasamos datos de los componentes principales a los secundarios. Es unidireccional y de arriba hacia abajo. Si hay demasiados componentes en el fondo, los datos (accesorios) deben pasar a través de muchos componentes.

Además, si necesita compartir algunos valores entre componentes que no forman parte de una jerarquía, necesita un mecanismo. Ahí es cuando puedes hacer uso de Context .

¿Cómo pasar de desarrollador intermedio a avanzado?

En esta fase, se tratarán algunos temas de nivel experto. Necesitas conocer estos conceptos solo cuando estés trabajando en un desarrollo de aplicaciones más extenso usando ReactJS.

Carga diferida en React

ReactJS admite la división de código. Es una forma de cargar de forma diferida lo que necesita el usuario actual. También evita producir un paquete de construcción grande. La dynamic import característica es la mejor manera de incluir la división de código en una aplicación React.

Portales en React

Es posible que deba usar portales cuando se trata de modales, cuadros de diálogo o información sobre herramientas con un mejor manejo de eventos. Es compatible de forma inmediata en ReactJS.

Gestión de estado en React

En una aplicación más grande, debe compartir información entre componentes. A veces, el soporte predeterminado de Props y Context puede no ser suficiente.

En estos casos, es posible que necesite una solución de gestión de estado como Redux o MobX en estos casos. Pero, de nuevo, puede decidir si los necesitará (o no).

Enrutamiento en React

El enrutamiento es necesario para aplicaciones de varias páginas. También es útil marcar una página en particular o recorrer la aplicación de un lado a otro usando el botón Atrás del navegador.

React Router es la solución de enrutamiento más popular que ayuda con el enrutamiento declarativo.

Tematización en React

La tematización es una característica moderna en las aplicaciones web. Deberíamos dar a los usuarios la opción de qué tema quieren usar, como claro u oscuro, para ayudarlos a sentirse cómodos al usar su sitio o aplicación.

Incluso puede crear sus temas personalizados en algunas aplicaciones y aplicarlos. Hay varias formas de crear un tema para una aplicación React. Seleccione el que mejor coincida con la pila de CSS de su aplicación.

Patrones en React

Hay varios patrones que puede usar como soluciones a problemas comunes en React. Con el tiempo, los desarrolladores de ReactJS han encontrado patrones que podrían usar para ayudarlos a dejar de reinventar la rueda.

Aprender estos patrones te ayudará considerablemente. Visite este sitio para encontrar los patrones de ReactJS más utilizados documentados con ejemplos.

Anti-Patrones en React

Los antipatrones son las prácticas que debes evitar usar en las aplicaciones de ReactJS. Debe aprenderlos junto con los patrones útiles que debe usar.

Solo ten en cuenta que el aprendizaje de conceptos avanzados de React no se detiene aquí. Puede continuar aprendiendo sobre accesibilidad, marcos de prueba y muchos conceptos más avanzados según sea necesario.

Entonces, ¿Cómo comenzar con React?

¡Esa es la pregunta del billón! Hay muchos recursos excelentes (libros, artículos, videos) para ayudarlo con los temas anteriores, muchos de los cuales están vinculados en cada sección. Así podrás encontrar los que más te convengan.

¿Debería seguir aprendiendo React para el futuro?

Otra pregunta frecuente, y la respuesta es SÍ. React está en constante crecimiento, y la comunidad también está creciendo rápidamente. No hay razón para quedarse atrás.

Además, React es una base para muchos otros marcos populares como Next.js , GatsbyJS y, muy recientemente, Remix .

No estoy comparando React con los marcos Angular, Vue o Svelte. Todos son excelentes a su manera, como ReactJS es una excelente biblioteca para el desarrollo de la interfaz de usuario.

Relacionados

Deja un comentario