React es una librería JavaScript desarrollada por Facebook que permite crear interfaces de usuario siguiendo el desarrollo basado en componentes. Esta librería puede usarse junto a cualquier framework, como por ejemplo Ruby on Rails, Meteor, Angular… Y se ha usado en el desarrollo de aplicaciones que son muy usadas como Netflix, Instagram, Airbnb, Dropbox…
JSX
JSX es el lenguaje que se usa para desarrollar las aplicaciones con React, aunque no es obligatorio usarlo, también se puede usar JS. Este lenguaje también desarrollado por Facebook, es una mezcla entre JavaScript y HTML. Al principio puede parecer un poco extraño, pero una vez que nos acostumbramos a él, veremos que el código JSX es muy legible y facilita el desarrollo.
Propiedades
Para poder hacer los componentes reusables, tiene que haber una forma de poder configurarlos. Esto se hace a través de las propiedades, que se van pasando a los componentes desde los componentes que están por encima.
Estas propiedades no se pueden pasar desde los componentes inferiores a los superiores, y no se deben modificar. Cuando se necesita modificar el valor de alguna de estas propiedades, hay que avisar (mediante callbacks) al componente superior que tenga dicha propiedad como estado para que realice el cambio. A las propiedades se les pueden poner valores por defecto y añadir validaciones.
Estado
El estado se inicia en el constructor de los componentes y es mutable. Los datos que se guardan en el estado del componente se suelen pasar a los componentes inferiores en forma de propiedades. No todos los componentes tienen que tener estado, podemos diferenciar dos tipos de componentes:
- Componentes tontos: componentes sin estado.
- Componentes listos: componentes con estado.
Cada vez que el estado cambia, se vuelven a renderizar los componentes que dependen de esos cambios.
Virtual DOM
Cuando el estado de los componentes sufre un cambio, será React quien se encargue de volver a pintar los componentes que dependen de ese estado, en lugar de realizarlo nosotros mismos, como haríamos con jQuery o JS, los cambios en el DOM. Antes de renderizar los cambios, va a seguir el siguiente proceso:
- Observa qué datos han cambiado.
- Realizará los cambios necesarios en una copia del DOM en memoria.
- Buscará las diferencias entre el DOM Virtual y el DOM real.
- Renderiza solo los componentes que dependen de esos datos.
React Native
React Native es una librería también desarrollada por Facebook y que usa React para crear aplicaciones móviles nativas. React Native ya tiene unos componentes equivalentes a los elementos que se usan tanto en Java (para android) como en Swift (para ios) y que sabe cómo convertirlos a elementos nativos.
Con React Native se pueden desarrollar aplicaciones nativas usando un solo lenguaje (JavaScript), sin necesidad de tener varios equipos de desarrollo y reduciendo el tiempo de desarrollo de la aplicación.
Conclusión
React es una librería muy sencilla y fácil de aprender que nos va a permitir desarrollar las interfaces de nuestras aplicaciones web de una manera ágil y rápida, teniendo todos los componentes bien organizados y siendo estos reusables y fáciles de mantener.
Si quieres saber más de React, ya sabes dónde encontrarnos.