A presentation for a React Redux Workshop

1. React + Redux
Workshop

2. Who?
Nombre científico: Daniel Ochoa John
Experiencia: 6 años
Medio de alimentación: Fullstack in
5Rabbits.
Hábitat: @dochoaj en Twitter, @daniel
en Noysi

3. Conociendo React
Curso 1

4. Objetivos
- ¿Qué?
- ¿Por qué?
- ¿Cómo?
- Render!

5. ¿Qué es REACT?

6. Biblioteca de Javascript de código abierto para
crear interfaces de usuario, con el objetivo de
animar al desarrollo de aplicaciones en una sola
página.

8. React es una biblioteca de Javascript para
construir interfaces de usuario de manera
declarativa, eficiente y flexible

10. ¿Por qué REACT?

11. Soluciona solamente un problema: Construir
grandes aplicaciones con datos que cambian en
el tiempo.

12. ¿Cómo?

13. Virtual DOM! Evita modificar el DOM
directamente usando una copia en memoria del
mismo.

15. Render!
Pensando en
Componentes

16. Unidad lógica que permite separar la
UI en piezas independientes,
reutilizables y aisladas.

18. Construyendo
componentes

19. Importar dependencias
Crear componente
agregando el
comportamiento.
Método que se hereda de Component. Es lo
que genera React en el VirtualDOM
JSX es el lenguaje utilizado para describir el
contenido de un componente.

20. Componentes anidados

21. Instancia JSX del componente
importado

22. Boilerplate
https://github.com/dochoaj/react-boilerplate
Webpack + React + Babel + ES Lint + SASS

23. Codear!
Generar el componente
Tweet

24. Ejercicio 1
Repo:
https://github.com/dochoaj/
React-Workshop-Course-1
Objetivo:
Transformar un HTML plano en
componentes de React.

25. Proyecto con React
Curso 2

26. Objetivos
- Props y State
- Ciclo de vida de un componente
- Propagación de información
- CRUD!

27. Props
- Permite asignar información dinámica a los
componentes.
- Se agregan como una propiedad dentro del
contexto del objeto

28. Se asignan propiedades
al componente, de
manera similar a como se
agregan propiedades a
un nodo del DOM.

29. Las propiedades ahora son
parte de la instancia del objeto
que representa al
componente, dentro de la
variable props.

30. State
- Permite controlar el estado actual de un
componente
- Se agregan como una propiedad dentro del
contexto del objeto
- Se modifica con this.setState({object})
- Object debe ser una nueva referencia

31. Spread Operator
- Permite expandir una expresión para obtener por
separado su contenido. Por ejemplo:

32. Se especifica el estado inicial
del componente en su
constructor
Se utiliza un método para
construir el contenido del
componente
Como el componente está en
estado “loading” se retorna un
“Cargando” en lugar del listado
de pokemon

33. Ciclo de vida de un componete
- Métodos que son callbacks al ciclo de vida de un
Component
- Permiten ejecutar código en momentos claves de la
construcción/actualización de un componente.

34. Métodos

35. Propagación de Información

36. Propagación de Información
Container List List Item
Elementos del listado Datos del elemento
Click en delete
Parent.onDelete(item) Parent.onDelete(item)
Eliminar item

37. Codear!
Generar el Read de
Tweets

38. Ejercicio 2
Repo:
https://github.com/dochoaj/
React-Workshop-Course-2
Objetivo:
Terminar el CRUD de elementos

39. Conociendo Redux
Curso 3

40. Objetivos
- Qué es redux?
- Cómo funciona?
- Live coding!

41. ¿Qué es Redux?

42. Redux es un contenedor predecible del
estado de aplicaciones JavaScript.

46. Credits @thejenniekim for her awesome article http://www.youhavetolearncomputers.com/blog/2015/9/15/a-conceptual-
overview-of-redux-or-how-i-fell-in-love-with-a-javascript-state-container

49. BUT THAT’S MVC!

51. THAT’S REDUX!

52. Proyecto con Redux
Curso 4

53. ¿Cómo funciona?

55. Ese cambio dispara una
acción

58. Componentes de Redux

59. Unica fuente en donde se almacena el estado
global de la aplicación (global state)
Funciones puras que modifican el state dado
una acción
Componente de React que conoce la existencia
de Redux (Container)
Objeto con tipo y payload, que es enviado a
todos los reducers.
Dispatch es la acción que realiza una vista para
solicitar un nuevo state.

61. Live Coding
Building a Pokedex

62. Ejercicio 3
Repo:
https://github.com/dochoaj/
React-Workshop-Course-3
Objetivo:
Construir una pequeña
aplicación y explicar Redux.

63. Proyecto con Redux
Curso 4

64. Ejercicio 4
Repo:
https://github.com/dochoaj/
React-Workshop-Course-4
Objetivo:
Usar todo lo aprendido en el
taller para aplicar redux y leer
el api de posts.
https://jsonplaceholder.typicod
e.com/

65. Fin