Conociendo ReactJS

ASPECTOS BÁSICOS

Que es ReactJSEs una librería ideada para facilitar el desarrollo de interfaces de usuario que requieren de una gran interacción y responsividad.

Fue desarrollada por Facebook con la intención de que permitiera generar componentes reutilizables, escalables y fácilmente manipulables.

Actualmente, Instagram y Facebook hacen uso de ReactJS

Es Open Source, fue publicado con una licencia Apache 2.0

https://facebook.github.io/react/

ConsideracionesEs una librería enfocada en la Visualización

No es un framework como lo son AngularJS o EmberJS por ejemplo

Podría decirse que funciona al nivel de la vista en modelos como MVC o MVVM

ReactJS utiliza un sistema de “binding unidireccional”

Virtual DOMCada componente desarrollado con React posee un método Render

Este método genera el código HTML que necesita.

Cuando algún cambio afecta el estado del componente, se llama de nuevo al método Render; es decir, se renderiza por completo al componente

ReactJS mantiene una abstracción del DOM en memoria; todos los componentes que requieren realizar un render, lo hacen en el virtual DOM

ReactJS compara entonces el DOM real y el virtual y aplica solo los cambios necesarios para que sean iguales, el proceso se llama “Reconciliation”

Propiedades y estadoTodo componente maneja 2 tipos de información

Propiedades (props)Son las opciones que un componente posee; se refieren a información que no cambiará durante el ciclo de vida del componente y que solo se podrá modificar a través del uso del objeto State

Estado (State)Posee una referencia a la información que si puede ser gestionada y modificada por el componente; por ejemplo que se renderice el componente como resultado de una acción del usuario.

Propiedades y EstadoUn componente puede contener otros componentes

Al renderizar un componente padre, todos sus descendientes son renderizados de nuevo.

JSX Es una extensión sintáctica de Javascript similar a XML

El equip de ReactJS recomienda utilizar JSX para hacer el render de los componentes

Si se desea, puede usarse Javascript normal.

JSX

Ejemplos• Hello World• http://jsfiddle.net/69z2wepo/19057/

• To Do• http://jsfiddle.net/69z2wepo/19056/

Gracias