En el primer tutorial de React JS, hablamos de cuáles son las utilidades que puede prestar al momento de desarrollar un proyecto desde el frontend. Hoy aprenderemos tres conceptos básicos que te ayudarán a implementar esta poderosa librería directamente en tus proyectos profesionales.
React.js nos ofrece un pseudolenguaje llamado JSX que facilita el desarrollo de aplicaciones web con su sintaxis para crear elementos en el DOM.
Recordemos que ReactJS se enfoca en la visualización y literalmente debemos armar el HTML que deseamos directamente en JSX, con el fin de describir nuestros componentes por medio de etiquetas y de una sintaxis muy parecida a la de HTML, que es compilada a Javascript.
No podemos usar directamente el JSX, pero tenemos dos opciones para compilarlo
Probablemente te estás preguntando por qué necesitas modelar el HTML desde JSX o JavaScript. ReactJS se enfoca en la visualización y funciona compilando una réplica del HTML final en el Virtual DOM el cual se compara con el DOM actual, y se aplican las diferencias necesarias para que ambos sean iguales.
Este proceso se repite cada vez que se hace algún cambio en el modelo, es decir, en cada cambio se recalculan los estados y propiedades de los elementos en el Virtual DOM y se aplican los cambios necesarios en el DOM.
Algo importante de señalar es su curva de aprendizaje, pues al principio puede parecer bastante complicado, pero gracias a la sintaxis de JSX y al hecho de que todo se va armando por módulos compilados de forma secuencial, uno se adapta muy rápido y lo domina en poco tiempo, pues es relativamente sencillo, sobre todo si se compara con AngularJS. Además su estructura es más manejable que Backbone.
El truco para dominar ReactJS es aprender a dividir todo en pequeños componentes que se agrupan para formar una aplicación. Personalmente me gusta ir de lo general a lo particular, pero es posible (y recomendable en aplicaciones complejas) iniciar con una serie de pequeños componentes, e irlos ensamblando hasta crear una aplicación compleja.
Dos conceptos importantes para entender en ReactJS son state y props. Los dos son fáciles de entender al verlos en el código, pero es muy importante comprender sus roles. Ambos representan los datos con los que se construirán las partes mutables en nuestro HTML y cuando alguno cambia, se vuelve a renderizar el HTML.
La diferencia es que los state son datos que el componente puede modificar en algún punto y los props son datos inmutables que pasan de padres a hijos hasta el final de la cadena. Un componente no puede cambiar sus props, pero es responsable de pasarlo de forma correcta a sus hijos.
Un state tiene un valor inicial por default, el cual varía eventualmente, generalmente en respuesta a una interacción del usuario, y representa el estado de un elemento en un momento específico. Es opcional si deseas que un componente tenga o no un state , y aunque su uso es indispensable para hacer tu aplicación interactiva, es mejor tener la menor cantidad posible de Stateful Components.
Todos los componentes tienen props pero solo los Stateful Components tienen state , estos son los responsables de comunicar tu aplicación con el servidor y con el usuario y pasar los cambios a los Stateless Components que se encuentren debajo de él, en la jerarquía de nuestra aplicación. Recordemos que los flujos en ReactJS siempre son en una misma dirección.
Los Stateless Components simplemente se encargan de renderizar una pequeña parte del código y pasar las props a sus hijos. ReactJS es una librería que aunque a primera vista puede parecernos rara o compleja, realmente puede simplificar el proceso de planeación de nuestra aplicación gracias a su flujo de datos lineal y unidireccional, además ayuda a que nuestro código sea reusable y escalable, con menos problemas.
Finalmente puede tener un gran impacto en el performance de nuestra aplicación a nivel de Frontend, todo esto promete mejorar tanto la experiencia de usuario como la de desarrollo. Si tienes dudas sobre los conceptos básicos de JSX y ReactJS, no dudes en comentar.
