React Workshop

Introductory Workshop to React (In Spanish). Browse code at https://github.com/jplaza/react-workshop

Transcript

1. ReactJS Composable User Interfaces
2. Acerca de • CTO Dátil • Desarrollando aplicaciones web por más de 7 años • Programación funcional
3. UI The View
4. ¿Porqué React? Simple Componible Declarativo
5. Simple Puedes definir de manera simple como se debe ver tu aplicación. Piensa que un componente trabaja como una función, a la que le das una parámetro de entrada x y siempre retornará y
6. Declarativo Comunica claramente que partes conforman tu interfaz y como reacciona a los cambios de estado.
7. Componible Crea componentes re-utilizables y aumenta tu velocidad de desarrollo.
8. ¿Para qué?
9. –Edsger W. Dijkstra “Simplicity is prerequisite for reliability.”
12. ¡Manos a la obra!
13. Pensando en componentes • Single responsibility principle. • Modelos de datos del sistema. • Re-utilizables.
16. PhotoViewer Navbar Photo PhotoList ListToggle NavItem Album Title Photo
17. JSX Extensión a la sintaxis de JavaScript. Muy similar a HTML
18. ¿Cómo se ve?
19. JSX transformado
20. Estado de la aplicación Cambia en el tiempo. No puede ser calculado.
21. Transmitiendo eventos entre componentes Callbacks. Inverse data flow.
22. Gracias @jplazaarguello