El proceso de aprendizaje de cualquier cosa en la vida normalmente es arduo y confuso, pero mi idea con este artículo es guiar a cualquier persona que lo lea a través de este asombroso viaje de crecimiento y nuevos conocimientos aprendiendo React.
Vamos a comenzar desde lo más básico, es decir, verificar que tenemos una serie de conocimientos que son necesarios para que podamos practicar y realizar aplicaciones en esta librería y como es lógico, es necesario tener conocimientos en programación y cierta soltura en HTML, CSS, JavaScript.
En mi opinión, diría que es casi obligatorio re-aprender JavaScript para que al momento que se nos presenten eufemismos y syntactic sugar usual en JS ES6 (aunque estemos en ES10) sepamos de qué nos están hablando. Por la misma razón, dejo este link a FreeCodeCamp (increíble herramienta) para que estudies este lenguaje. Asegúrate de entender los quirks de este lenguaje para que en las partes siguientes sean mucho más sencillas.
¿Qué necesitas para aprender React?
Lo siguiente sería afilar los cuchillos y sacar punta a los lápices, es decir: preparar nuestro entorno de desarrollo. Para ello, lo primero sería descargar nuestro code editor de preferencia, en mi caso utilizo VS code, creo que de momento es el code editor más utilizado y para el cual te recomendaria ciertos plugins:
- Bracket colorizer, para saber fácilmente en qué indentación nos encontramos.
- Eslint, una herramienta que ayuda a picar código y que detecta posibles problemas en nuestro código y nos ayuda a solucionarlos.
- Los Plugin de React, Redux y JavaScript para que nos facilite snippets y documentación
- Algún plugin de auto closing tag y auto renaming tag
- Y Prettier para formatear nuestro código instantáneamente.
Con esto podemos empezar con React, una librería de JavaScript creada por FaceBook y de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página (SPAs) la cual está basada en lo que se conoce como virtual DOM que es una “copia” del DOM de HTML (el objeto que representa la estructura de la página) que nos permitirá hacer unas cositas que explicaremos más adelante.
Además de esto contamos con los building block que son los componentes, estos están escritos en JSX que es la unión de JS con XML, todo en React es un componente y son como las funciones de JavaScript. Aceptan entradas de datos llamadas “props” y devuelven a React elementos que describen lo que debe aparecer en la pantalla.
Otra parte importante de React es el state, que no es más que un objeto de variables que pertenecen al DOM virtual y que al momento en que cambian se hace una comparación con el state del DOM de html y éste es actualizado pero solo en la parte en la que éste se cambió. Al final el DOM virtual de React es una copia más ligera del DOM de HTML que es mucho más costoso en cuanto a los recursos a cambiar.
Luego de haber visto todo esto, es pertinente empezar a ver algo que es esencial en cualquier pagina: el enrutamiento. Para ello utilizaremos React Router, que es una librería de React con la cual podremos implementar renderizado delimitado a la sección de la página a la cual queremos navegar, consiguiendo que la carga de recursos sea más eficiente.
Un ejemplo sería tener una barra lateral y superior de navegación a manera de menú y que estarían presentes en todas las páginas de la aplicación. Con React Router lo que logramos es que al momento de navegar con estos componentes, los mismos no tengan que renderizarse una y otra vez, de forma que los recursos quedan destinados a renderizar el cuerpo de la aplicación donde esta la data y los componentes cambiantes de nuestra aplicación.
Manejo de multi estados con React
Lo siguiente es explorar opciones de manejo de multi estados. Existen varias opciones en el universo de React que cumplen con esta función, pero la más conocida y que recomendaría que aprendieras es Redux, que no es más que una librería basada en Flux, que no es más que un patrón de diseño para el manejo de estados, el cual está constituido por 4 pasos: acción, despacho, almacén y vista.
Lo principal en Flux es el almacén, que es donde se guardan los estados, y las acciones que son las funciones que alteran este estado para actualizar la vista o UI. Esta librería se ha ido extendiendo y abstrayendo con el tiempo y hoy en dia existen 3 librerías y 3 niveles de abstracción o facilidad, que en orden de complejidad de mayor a menor serían:
> La original o Redux
> React-Redux
> Y por último Redux-Toolkit
Como recomendación aprendería desde la librería original hasta la última, porque siempre se tiene que aprender a caminar antes de correr y es mejor tener unas buenas bases en cuanto a la utilización de esta poderosa librería.
Aprende React pero después…
Este es el recorrido para aprender React, pero React solo cubre lo el front-end de una aplicación y si queremos ser unos programadores web completos (Full-Stack) tenemos que aprender también de Back-end, pero eso lo dejaremos para la segunda parte. No obstante, en OXYGEN puedes ver de qué se compone el Bootcamp Full Stack que tiene todas las nociones que necesita un desarrollador Full Stack.
Autor
Raúl Puigbó
Desarrollador Junior en OXYGEN Training