Charla acerca de cómo funciona ReactJS.

1. React JS
ALFREDO BONILLA @BROLAG
DANNY MORA @ARGOSBASS
DRUPAL CAMP COSTA RICA
2016

2. Una mirada al ecosistema actual…
Existen varias librerías/frameworks para front end que se
encargan de:
o Gestión de modelo
o Enrutamiento
o Comunicación con el servidor
o Composición app y arquitectura
o Rendering UI *
o Eventos UI *

3. ¿Qué es React?
o React es una librería de código abierto escrita en JavaScript, mantenida por
Facebook.
o Sirve para crear aplicaciones de tipo SPA cuyos datos cambian a través del
tiempo.
o Su objetivo es ser sencilla, declarativa, y fácil de combinar.

4. ¿Por qué utilizar React?
o Ofrece grandes beneficios en modularidady desempeño gracias al DOM
Virtual.
o Beneficia el desarrollo orientado a componentes reutilizables.
o Tiene gran aceptación por parte de la comunidad de desarrolladores.

5. DOM Virtual
o Es una representación del DOM ubicada en memoria.
o Previene manipular innecesariamente el DOM, ya que es muy costoso.
o React hace una comparativa (diff) entre el DOM actual y el DOM Virtual para
conocer que partes cambiaron y solamente actualizar estas partes.
o Comparar el DOM con el DOM virtual no es costoso y permite realizar el
menor numero de operaciones necesarias para actualizar el DOM real.

6. JSX
o Es una extensión de JavaScript similar a XML.
o Es propia de React.
o Permite utilizar etiquetas dentro del código JavaScript. Su uso no es
obligatorio pero es recomendable.
o Permite definir bindings({}) unidireccionales.
o React NO soporta bindingsbidireccionales.

7. JSX
JSX vs JavaScript puro

8. ¿Cómo pensar al estilo React?
1. Definir un bosquejo.
2. Dividir en una jerarquía de componentes.
3. Construir una versión estática en React.
4. Definir el estado mínimo inicial del estado de la
interface. Ejemplo: la lista original de productos, los
valores de los checkbox marcados por defecto.
5. Definir donde debe vivir el estado.
6. Definir el flujo de datos inverso (setState()).

9. Componentes
o Idea central de React
§ Método Render: debe devolver un nodo.
§ Propiedades: valores inmutables asociados a un componente
o El método render regenera todo el DOM del componente

10. Propiedades
o Parte inmutable de un componente.
o Se pasan al componente al usar el tags JSX para instanciarlo
§ <Mycomponente prop1="" prop2={} />

11. Validación de propiedades
o Por tipo.
o Por obligatoriedad:
§ React.PropTypes.string.isRequired
o Por valores:
§ React.Proptypes.oneOf([ 'valor1' , 'valor2' ])
o Validación personalizada.

12. Estado
o Parte mutable de un componente
o El componente accede mediante this.state
o REGLA DE ORO
§ Intentar hacer siempre tus componentes sin estado.

13. Composición
o Un componente puede instanciar en su función render a otro componente.
o El componente instanciado pertenece al componente que le instancia.
o El estado de un componente padre puede ser recibido como propiedades en
el componente hijo.

14. Ejemplos
https://github.com/argosbass/reactdrupalcamp16

15. Comunidad
Costa Rica JS
http://costaricajs.co/
Drupal CR
https://www.facebook.com/drupalcostarica/

16. Oportunidades de empleo
React
NodeJS
React Native
Meteor
alfredo.bonilla@salsamobi.com

17. ¿Preguntas?
MUCHAS GRACIAS
@brolag
@argosbass