El pasado sábado 20 de febrero, en las 4Sessions, Dany Paredes y un servidor dimos una charla sobre la fórmula para ser un React Developer = ReactJS + React Native. En el siguiente post, os hacemos una pincelada. Empezamos!

¿Qué es ReactJS?

ReactJS es una librería de Javascript creada por Facebook, que se encarga de crear la UI, es decir, la V del modelo MVC. ReactJS al ser una librería, necesitaremos importar módulos de terceros para poder gestionar temas de enrutamiento, DOM, etc.

¿Cuáles son los objetivos de ReactJS?

Los objetivos de ReactJS no son otros que buscar un proceso de desarrollo simple y huir de la magia que tienen otros frameworks. ReactJS nos permite un mayor control de los datos, descargar el DOM real del navegador y saber qué ocurre en todo momento.

Los componentes

En React lo más importante son los componentes. Los componentes son pequeños snippets de código reusable que combinados entre sí, nos permiten construir la aplicación deseada. Con ellos, logramos que el código esté encapsulado por conceptos/objetivos y nos da facilidad de implementar testing en nuestra aplicación.

Los componentes tienen dos tipos de propiedades, las props y los states. Ambos nos permiten manejar la información en los componentes. La diferencia principal entre ambos, es que los props (properties) se encargan de pasar información entre componentes, y los state; se encargan de manejar información dentro del componente.

Para gestionar el ciclo de vida de los componentes, ReactJS nos proporciona un conjunto de eventos donde podremos controlar cuándo ha sido renderizado un componente, o cuando va a ser renderizado; o también cuando se ha cambiado el valor de una propiedad o state, entre otros. Con estos eventos, podremos manejar el Virtual DOM, controlar el estado de un componente e integrar plugins de terceros (por ejemplo, si pensamos en un carousel, al renderizar el componente daremos al play este empezará a mostrar las slides).

Otros temas importantes

Otros temas a tener en cuenta de React y no menos importantes que los anteriores, son los JSX y el Virtual DOM.

JSX es Javascript + XML que se compila dentro del componente. Ahora ya no está de moda el hecho de separar el HTML y el JS en ficheros aparte. React apuesta por tenerlo todo encapsulado en un solo fichero y eso le hace que sea más mantenible y rápido de saber qué hace cada componente.

El Virtual DOM es una copia del DOM real del navegador que, cuando un componente cambia de propiedad y/o estado, este se encarga de modificar solamente los nodos del DOM real que deben ser modificados. El problema que hay en otros frameworks es que atacan directamente el DOM real, y cada modificación de este, es una de las causas por las que a veces las aplicaciones van lentas.

Os dejo el enlace al repositorio donde tengo la aplicación que creé para esta presentación:

¿Qué es React Native?

React Native es un framework javascript para escribir aplicaciones nativas para iOS y Android. Está basado en la librería ReactJS de Facebook para desarrollar interfaces de usuarios, pero en vez de que enfocarse en el browser este se enfoca en plataformas móviles. Es importante saber que es un proyecto joven apenas en Marzo 2015 surgió para iOS y en Septiembre para Android, la documentación esta en continuo desarrollo.

Para desarrollar en React Native a día de hoy, la librería está bastante completa en Mac, pero en Windows y Linux aún no.

¿Porqué React Native?

React Native traduce nuestro JSX en elementos nativos de la plataforma, por tanto tendremos una aplicación nativa con comportamiento, interfaz y animaciones nativas del sistema. Cabe destacar, que si quisiéramos, podríamos abrir los proyectos en XCode o Android Studio.

React Native usa JSX para definir las interfaces e internamente transpila el código Javascript a las APIs de Objective C o Java, para renderizar componentes utilizando el mismo motor nativo sin tener que utilizar webviews. Además React Native, puede acceder a APIS del sistema como la cámara o gps etc.