Post on 06-Jan-2017
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