Durante el lanzamiento de Facebook Developer Circle Santiago el pasado 28 de Junio de 2017 Daniel Ochoa realizó la charla sobre "React en la vida real", mostrándonos ejemplos de uso de React y parte su experiencia como desarrollador FullStack. Puedes revisar la presentación desde aquí: https://youtu.be/-R4qCpsJaos No olvides unirte a nuestro grupo de Facebook Developer Circle Santiago y estar al tanto de todas nuestras actividades, artículos, tutoriales y videotutoriales. Se parte de DevC Santiago! https://www.facebook.com/groups/DevCSantiago/

2. Daniel Ochoa
@dochoaj
React en la vida real

3. React en
Daniel Ochoa

5. Para cambiar UI
Daniel Ochoa

6. Daniel Ochoa

7. Para cambiar UX
Daniel Ochoa

8. Daniel Ochoa

9. Para cambiar cómo
hacemos front
Daniel Ochoa

10. 01 Cambiamos un MVC por un State Oriented
Development.
02 Todos sabemos dónde está el código.
03 La tecnología debería ser ayuda y no un
impedimento.
04 Codear para la web, para desktop y para mobile.
Cambiar cómo hacemos front
Daniel Ochoa

11. 6 casos del
mundo real
React

12. I. Encontrar las dependencias “core”
Daniel Ochoa

13. 01 Para comenzar, lo de siempre: React, ReactDOM, Redux, Webpack, Babel.
02 Must have for us:
02a Axios: Cliente HTTP basado en promesas.
02b React-router (2+): Routing declarativo para React.
02c React-select: Un selector construído para React (forked).
02d React-paginate: Un componente React que crea paginación.
02e Redux-form: Un HOC para manejar formularios con Redux (use wisely).
02f Portrait (beta): Layout declarativo para aplicaciones.
03 Haga lock de las dependencias en el package.json, o mejor, use yarn!
I. Definiendo dependencias Core
Daniel Ochoa

14. II. Cómo hacer fetch
Daniel Ochoa

15. Daniel Ochoa

16. II. Cómo hacer fetch: ComponentWillMount

17. II. Cómo hacer fetch: ComponentDidMount

18. Cómo hacer fetch: State is everything
01 Modelar bien todos los estados posibles de la
aplicación.
02 El “tener información” es solamente un estado
más.
03 Manejar los estados con guard clauses en el
render del componente.
04 Reutiliza componentes y comportamientos que
permitan separar responsabilidades.
Daniel Ochoa

20. III. Estructura de directorios
y coding style
Daniel Ochoa

21. 01 Decidir cómo organizar las piezas de la aplicación,
sobretodo si usamos Redux.
02 Ponerse de acuerdo en dónde se escriben las
piezas de la aplicación.
03 Use linters.
Estructura de directorios y coding style
Daniel Ochoa

22. III. Estructura de directorios: Cómo Organizar

23. III. Estructura de directorios: Cómo Organizar

24. III. Estructura de directorios: Cómo Organizar

25. III. Estructura de directorios: Coding Style

26. III. Estructura de directorios: Coding Style

27. III. Estructura de directorios: Coding Style

28. IV. Encapsula dependencias
Daniel Ochoa

29. IV. Encapsula dependencias

30. Conclusiones
Daniel Ochoa

31. 01 No olvide fijar las versiones de sus dependencias
02 React nos ha acelerado la velocidad y calidad de
los desarrollos, al menos 2x.
03 Estamos usando React con Redux y Mobx
en producción.
04 Compartir una sola forma de estructurar la
aplicación facilita e impulsa el peer review.
05 Generó un avance en la capacidad de
diseño: pensar en los componentes antes que en el todo.
Conclusiones
Daniel Ochoa

32. Más de la “vida real”
Daniel Ochoa

35. Gracias