Taller React 4/11

Primera clase taller React

Transcript

1. ReactJS Qué es Cómo se come Y cómo entrenar a tu dragón Daniel Belohlavek dbhvk.96@gmail.com @dbhvk
2. Nuestra historia comienza comienza en un tiempo lejano cuando las aplicaciones web eran puramente server side... Los primeros desarrolladores tallaban sus creaciones usando el patrón MVC. Sus sistemas eran monoliticos y difíciles de escalar...
3. En pocas ocaciones, se acercaban comerciantes de lejanas tierras, evangelizando sus ideas propietarias (pero aún así innovadoras)
4. Los tiempos eran cambiantes. Crecía el consumo de computadoras y dispositivos, crecía la necesidad de sistemas más complejos e interconectados. Sistemas mas complejos requieren equipos mas grandes. Grandes equipos trabajando bajo una misma base de código puede traer muuuchos problemas. Escalar verticalmente sistemas monoliticos se volvia ineficiente. Los sistemas terminaban estando fuertemente acoplados. Consumir modulos era extremadamente dificil.
5. Fue aqui cuando el salvador de los sistemas propuso una idea diferente... (mentira, fueron varios tipos de importantes empresas Estadounidenses) EEEEeee Micro Servicios wacho Sabe
6. El antes y el después: nuevas arquitecturas
7. Anteriormente dependiamos de jQuery para acceder a ciertas funcionalidades de manera omogenea entre navegadores. Hoy jQuery ya no es necesario. (IE 10+) Javascript del presente Hoy en día podemos correct Javascript en el servidor (NodeJS). El tooling existe al rededor de esta tecnología. Hoy en día no escribimos Javascript, sino alguno de estos lenguajes derivados: ECMAScript 6-7-2015-2016-2017-next... Typescript Dart Otros lenguajes como Java, Scala, Go, etc.
8. Usando ES6+ tenemos acceso a clases y herencia. Usando Typescript/Flow tenemos acceso a tipos e interfaces. Usando JSX tenemos acceso a una sintaxis similar a HTML dentro de Javascript. Usando NodeJS podemos correr Webpack, una herramienta que nos permitirá crear bundles de nuestro código. Usando NodeJS podemos correr Express y servir nuestro proyecto de forma simple. Javascript del presente
9. Tu primera clase con el javascript del presente. ES6+: primeros pasos c l a s s T e s t { p r o p e r y = ' W o r l d ' ; g r e e t e r ( ) { r e t u r n ` H e l l o $ { t h i s . p r o p e r t y } ` ; } } e x p o r t d e f a u l t T e s t ; No hay tipado estricto. greeter() es un método que devuelve un string. `Hello ${this.property}` es un template string, permite inyectar expresiones. export default hace disponible la clase para ser importada por otros modulos.
10. ES6+: guia de bolsillo i m p o r t R e a c t , { C o m p o n e n t } f r o m ' r e a c t ' ; / / A c c e d e a R e a c t . C o m p o n e n t l e t f o o = ' a ' ; / / s i m p l i f i c a d o : e l r e e m p l a z o d e l a k e y w o r d ` v a r ` c o n s t f o o = ' a ' ; / / c o n s t a n t e : n o p u e d e c a m b i a r d e r e f e r e n c i a c o n s t { f o o } = b a r ; / / e q u i v a l e n t e a c o n s t f o o = b a r . f o o ; c o n s t f o o = ( ) = > 1 ; / / l a m b d a q u e d e v u e l v e 1 , e q u i v a l e a : / / f u n c t i o n ( ) { r e t u r n 1 ; c o n s t a = [ 1 , 2 , 3 ] ; c o n s t b = [ 5 , . . . a ] ; / / b = [ 5 , 1 , 2 , 3 ] ; e x p o r t d e f a u l t F o o ; / / i m p o r t F o o f r o m ' . / F o o ' e x p o r t c o n s t f o o = { } ; / / i m p o r t { f o o } f r o m ' . / F o o ' [ 1 , 2 , 3 ] . m a p ( ( i t e m , i n d e x ) = > i t e m + 1 ) / / r e t u r n s a n e w a r r a y [ 2 , 3 , 4 ] [ 1 , 2 , 3 ] . f o r E a c h ( ( i t e m , i n d e x ) = > c o n s o l e . l o g ( i t e m + 1 ) ) / / l o g s [ 2 , 3 , 4 ] Para todo lo demás, existe la Mozilla Developer Network
11. React es una libreria de Javascript que permite la construccion de interfaces de usuario (UI) basadas en componentes. Estos componentes pueden ser reutilizados y generados a partir de nuestra propia lógica. Por ejemplo, generar una lista es tan simple como iterar sobre un Array. El fuerte de la libreria esta en crear Single Page Applications. Es decir, una aplicación que va a correr puramente a partir de Javascript, sin necesidad de realizar una peticion de HTML al servidor. De alguna manera, las aplicaciones hechas en React son similares a las aplicaciones mobile. Son independientes y se comunican de forma asíncrona con uno o más servicios externos. Sobre React
12. Un componente puede ser representado en una clase. React: primeros pasos i m p o r t R e a c t f r o m ' r e a c t ' ; c l a s s T e s t e x t e n d s R e a c t . C o m p o n e n t { p r o p e r y = ' W o r l d ' ; r e n d e r ( ) { r e t u r n ( < h 1 > H e l l o { t h i s . p r o p e r y } < / h 1 > ) ; } } e x p o r t d e f a u l t T e s t ; Las etiquetas de HTML son parte de la sintaxis de JSX. Las llaves {} son utilizadas para ejecutar código Javascript dentro de JSX. El método render() es parte del lifecyle de react (reservado)
13. La visualización de un componente esta definida por operaciones simples. React: primeros pasos i m p o r t R e a c t f r o m ' r e a c t ' ; c l a s s T e s t e x t e n d s R e a c t . C o m p o n e n t { p r o p e r y = [ { n a m e : ' D a n i e l ' , l a s t N a m e : ' B e l o h l a v e k ' } , { n a m e : ' A s h ' , l a s t N a m e : ' K e t c h u m ' } , { n a m e : ' R i c k ' , l a s t N a m e : ' S a n c h e z ' } ] ; r e n d e r ( ) { r e t u r n t h i s . p r o p e r y . m a p ( i t e m = > ( < d i v > { i t e m . l a s t N a m e } , { i t e m . n a m e } < / d i v > ) ) ; }
14. En React no es una practica común que un componente extienda de otro. React: composición por sobre herencia i m p o r t R e a c t f r o m ' r e a c t ' ; i m p o r t M y W r a p p e r f r o m ' . / M y W r a p p e r ' ; / / . j s n o e s n e c e s a r i o c l a s s T e s t e x t e n d s R e a c t . C o m p o n e n t { r e n d e r ( ) { r e t u r n ( < M y W r a p p e r > A l g u n t e x t o < b u t t o n > C l i c k < / b u t t o n > < / M y W r a p p e r > ) ; } } e x p o r t d e f a u l t T e s t ; En general, lo mejor es componer componentes anidandolos y comunicandolos por medio de las herramientas que nos provee React.
15. React: anatomía de un JSX tag i m p o r t R e a c t f r o m ' r e a c t ' ; i m p o r t M y W r a p p e r , { O t h e r C o m p o n e n t } f r o m ' . / M y W r a p p e r ' ; c l a s s T e s t e x t e n d s R e a c t . C o m p o n e n t { d o S o m e t h i n g ( ) { r e t u r n ; } r e n d e r ( ) { r e t u r n ( < M y W r a p p e r > < O t h e r C o m p o n e n t d i s a b l e d / > < b u t t o n o n C l i c k = { ( ) = > t h i s . d o S o m e t h i n g ( ) } > C l i c k < / b u t t o n > < / M y W r a p p e r > ) ; } } A diferencia de HTML, JSX permite hacer self-closing de cualquier tag. A diferencia de HTML, JSX permite que los atributos contengan expresiones. A diferencia de HTML, JSX permite que el contenido de un elemento contenga expresiones. JSX NO ES HTML.
16. A la hora de estructurar nuestros componentes, nos damos cuenta rapidamente de que necesitamos compartir informacion entre ellos. Una de las maneras por las cuales un componente recibe informacion es por medio de Props. React: props Las props son propiedades que el componente padre pasa a un hijo. Normalmente el componente hijo se mostrará o funcionará distinto en base a esta información. En JSX pasar un prop es tan simple como especificar un atributo de la misma forma que se haria en HTML. Los valores de los props pueden ser strings o cualquier tipo de dato que sea devuelto por una expresion. < C o m p o n e n t d a t a = { { n a m e : ' j o h n ' } } e n a b l e d > < C h i l d t y p e = " e x a m p l e " c o u n t = { 2 } e n a b l e d = { i s E n a b l e d } / > < / C o m p o n e n t >
17. Cuando React llama al método render() de un componente, este redibujara todos los componentes hijos. Para cada componente hijo recalculará y le pasará sus correspondientes props actualizadas. React: props Existen props especiales como className (reemplaza a class de HTML) y style, ambas son utilizadas en relacion a CSS.
18. A la hora de pensar en componentes podemos darnos cuenta de la necesidad de mantener un estado. El estado puede ser tan simple como abierto/cerrado o tan complejo como el modelo de datos de una entidad especifica. React: estado local React ofrece una manera de definir y actualizar el estado de un componente. Cuando el estado es modificado, React llama al método render() el cual redibuja el DOM teniendo en cuenta el nuevo estado. Es completamente posible acceder al estado dentro de la definicion del layout de un componente (JSX). Actualizar el estado dentro del método render causaría un loop infinito.
19. El siguiente componente actualiza el estado local al presionar el boton. React: estado local i m p o r t R e a c t f r o m ' r e a c t ' ; c l a s s T e s t e x t e n d s R e a c t . C o m p o n e n t { s t a t e = { c o u n t : 0 } h a n d l e C l i c k = ( ) = > { t h i s . s e t S t a t e ( { c o u n t : t h i s . s t a t e . c o u n t + 1 } ) ; } r e n d e r ( ) { r e t u r n ( < d i v > C o u n t : { t h i s . s t a t e . c o u n t } < b u t t o n o n C l i c k = { t h i s . h a n d l e C l i c k } > C l i c k < / b u t t o n > < / d i v > ) ; } } e x p o r t d e f a u l t T e s t ;
20. Ejemplo de una llamada asincrona a un servicio externo React: introducción a lifecycle methods i m p o r t R e a c t f r o m ' r e a c t ' ; c l a s s T e s t e x t e n d s R e a c t . C o m p o n e n t { s t a t e = { n a m e : n u l l } c o m p o n e n t D i d M o u n t ( ) { f e t c h ( ' h t t p s : / / p o k e a p i . c o / a p i / v 2 / p o k e m o n / 1 ' ) . t h e n ( r e s p o n s e = > r e s p o n s e . j s o n ( ) ) . t h e n ( r e s u l t = > { t h i s . s e t S t a t e ( { n a m e : r e s u l t . s p e c i e s . n a m e } ) } ) . c a t c h ( e r r = > c o n s o l e . e r r o r ( e r r ) ) ; } r e n d e r ( ) { r e t u r n ( < d i v > { t h i s . s t a t e . n a m e | | ' L o a d i n g . . . ' } < / d i v > ) ; }