\n
![\"PlaceHolder](\"https://jlgarcia.fulldev.ninja/assets/images/2017/07/Screen-Shot-2017-07-29-at-19.51.45.png\")
\nVemos como nos añade el contenido de la key nombre, "pues muy bien, y esto pa que cansino??" diréis...vale realmente Your superName es un placeholder, la idea es que ese texto cambie en algún momento.
Vamos a empezar a ver donde está realmente la gracia de esta librería, lo que vimos en el post de introducción bien lo podíamos tener con un poco de código HTML de toda la vida. Ahora vamos a darle algo de dinamismo a nuestro código.
\nTeníamos este código al final de nuestro primer post:
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="UTF-8" />\n <title>Hello World</title>\n <!-- Libreria para trabajar con React -->\n <script src="https://unpkg.com/react@latest/dist/react.js"></script>\n <!-- Libreria de react para trabajar con el Dom-->\n <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>\n <!--Preprocesador para traducir lo que escribimos a todos los navegadores ya que react funciona con ECS6 y puede que no \n funcione en todos -->\n <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>\n <script type="text/babel">\n\n class SuperComponente extends React.Component{\n render(){\n return (\n <div>\n <h2>Hello with React</h2>\n <MiSegundoComponente/>\n </div>\n );\n }\n }\n\n class MiSegundoComponente extends React.Component{\n render(){\n return (\n <h2>REACT is in the HOUSE...YEAH!!!!</h2> \n )\n }\n }\n\n ReactDOM.render(\n <SuperComponente/>,\n document.getElementById('root')\n );\n\n </script>\n \n </head>\n <body>\n <div id="root"></div>\n </body>\n</html>\nBien tenemos 2 componentes y los renderizamos dentro del body en nuestro div con id root, pues bien, vamos a añadir/modificar lo siguiente en nuestro MiSegundoComponente:
\nclass MiSegundoComponente extends React.Component{\n constructor(){\n super();\n this.name = {\n nombre: "Your Super Name"\n }\n }\n render(){\n return (\n <div>\n <h2>REACT is in the HOUSE...YEAH!!!!</h2>\n <h4> { this.name.nombre } </h4>\n </div>\n )\n }\n}\nLo que hacemos es crear un método constructor (OJO es palabra reservada no es que lo haya puesto yo), por el momento siempre llamamos a super (esencial para que se ejecute), y hacemos que nuestra instancia del componente (nuestro amigo this) tenga una propiedad name, que es un objeto de clave=valor en este caso con una key nombre con un texto. Asimismo en la parte de render entre {}, llamamos a this, es decir, a la instancia de nuestro componente, pasándole la propiedad y el key que hemos creado. ESTO SERIA PROPIO DE JSX, este superpoder nos permite añadir JS en nuestro código HTML. Si ahora ejecutamos esto:
\n
\nVemos como nos añade el contenido de la key nombre, "pues muy bien, y esto pa que cansino??" diréis...vale realmente Your superName es un placeholder, la idea es que ese texto cambie en algún momento.
Para ello necesitamos "escuchar algo en algún sitio" y hacérselo saber a nuestra propiedad nombre. Pero... ¿como hacemos esto? Muy fácil, vamos por partes, primero como "escuchamos":
\n//Añadimos un input con la propiedad onChange\n<input onChange={}/>\n<h4> { this.name.nombre } </h4>\nY esto que hace, básicamente envía los eventos de cambio de ese elemento a lo que tengamos dentro de {} y ¿que debemos poner dentro? pues como es costumbre un método que creemos a través de nuestra instancia(this):
\n//Fuera de render\ngetName(input){\n console.log(input)\n}\n\n//Dentro de render\n<input onChange={this.getName}></input>\n<h4> { this.name.nombre } </h4>\nComo véis tenemos un método getName que recibe algo por parámetro, y le pasamos dentro del onChange, nuestra instancia llamando al método getName. De momento le ponemos un console.log para que podamos ver que es lo que nos pasa cada vez que escribimos. Si guardamos y abrimos nuestro index.html, cada vez que escribamos algo en nuestro input, recibiremos algo del estilo a esto:
\n![\"Input](\"https://jlgarcia.fulldev.ninja/assets/images/2017/07/Screen-Shot-2017-07-29-at-20.18.10.png\")
\nEs un objeto con nombre Proxy y mogollón de información. Es un estilo de elemento clásico de eventos(digo estilo), pero claro no es lo que realmente buscamos, como conseguimos el contenido de nuestro input:
getName(input){\n console.log(input.target.value)\n}\nEsto lo habréis tenido que ver alguna vez ya, simplemente buscamos el value del target de nuestro elemento, y ahora nuesto console.log nos ofrece, esta información según escribimos:
\n![\"Input](\"https://jlgarcia.fulldev.ninja/assets/images/2017/07/Screen-Shot-2017-07-29-at-20.22.58.png\")
\nBien ya tenemos lo que necesitamos, ahora completemos la función para que nos modifique nuestro placeholder.
getName(input){\n this.setState(this.name = {nombre: input.target.value});\n}\nPara modificar "el estado" de un objeto o elemento del DOM tenemos el método o propiedad setState, el cual modificaría solo lo que le pasemos entre ().
\nTeóricamente sería algo como esto, pero lo habéis probado? Si lo probáis veréis que no funciona,nos indica que this es undefined
\n![\"This](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-02-at-08.33.45.png\")
\npero.....¿por qué? Básicamente porque this no está disponible como propiedad u objeto de las funciones o métodos que nosotros mismos creamos, para hacer que funcione es necesario enlazar(bind) el this con el contexto de ejecución. Para ello solo seria necesario hacer el siguiente cambio:
<div>\n <h2>REACT is in the HOUSE...YEAH!!!!</h2>\n <input onChange={this.getName.bind(this)}></input>\n <h4> { this.name.nombre } </h4>\n</div>\nComo veis dentro de nuestro método render le hemos añadido bind(this), es decir, enlazame el this de render con mi método getName et voilá:
\n![\"Its](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-02-at-08.41.36.png\")
\nRealmente es todo muy sencillo ¿verdad?
\nAntes de terminar con este post me faltaría comentar otro concepto, fijaros en esta parte del código que casi no hemos comentado:
this.setState(this.name = {nombre: input.target.value});\nHemos hablado de la propiedad setState pero no mucho de lo que hay dentro, si miráis un poco el código esto es prácticamente lo mismo que tenemos dentro de nuestro método constructor(es un poco feo no?). Pues bien realmente la propiedad tiene un motivo por el que se llama setState() y es porque el método constructor ya está preparado para gestionar los cambios de estado, si cambiamos el nombre de la propiedad y en lugar de name ponemos state:
\nconstructor(){\n super();\n this.state = {\n nombre: "Your Super Name"\n }\n}\nVeamos como tendría que quedar nuestro método getName:
\ngetName(input){\n this.setState({nombre: input.target.value});\n}\nY que no se nos olvide cambiar nuestro placeholder:
\n<input onChange={this.getName.bind(this)}></input>\n<h4> { this.state.nombre } </h4>\nSi lo probáis veréis que todo funciona correctamente y hemos quitado alguna cosa que no quedaba del todo bien, aún así puede que algún momento queramos usarlo por lo que solo tenemos que recordar que si en el constructor no lo hacemos todo dentro del this.state, a la hora de usarlo es necesario indicar la estructura completa del objeto o propiedad que queremos cambiar.
\nEn el próximo post veremos como comunicarnos entre componentes y alguna cosa más. Nos vemooooooos
Vamos a empezar a ver donde está realmente la gracia de esta librería, lo que vimos en el post de introducción bien lo podíamos tener con un poco de código HTML de toda la vida. Ahora vamos a darle algo de dinamismo a nuestro código.
\nTeníamos este código al final de nuestro primer post:
<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\" />\n <title>Hello World</title>\n <!-- Libreria para trabajar con React -->\n <script src=\"https://unpkg.com/react@latest/dist/react.js\"></script>\n <!-- Libreria de react para trabajar con el Dom-->\n <script src=\"https://unpkg.com/react-dom@latest/dist/react-dom.js\"></script>\n <!--Preprocesador para traducir lo que escribimos a todos los navegadores ya que react funciona con ECS6 y puede que no \n funcione en todos -->\n <script src=\"https://unpkg.com/babel-standalone@6.15.0/babel.min.js\"></script>\n <script type=\"text/babel\">\n\n class SuperComponente extends React.Component{\n render(){\n return (\n <div>\n <h2>Hello with React</h2>\n <MiSegundoComponente/>\n </div>\n );\n }\n }\n\n class MiSegundoComponente extends React.Component{\n render(){\n return (\n <h2>REACT is in the HOUSE...YEAH!!!!</h2> \n )\n }\n }\n\n ReactDOM.render(\n <SuperComponente/>,\n document.getElementById('root')\n );\n\n </script>\n \n </head>\n <body>\n <div id=\"root\"></div>\n </body>\n</html>\nBien tenemos 2 componentes y los renderizamos dentro del body en nuestro div con id root, pues bien, vamos a añadir/modificar lo siguiente en nuestro MiSegundoComponente:
\nclass MiSegundoComponente extends React.Component{\n constructor(){\n super();\n this.name = {\n nombre: \"Your Super Name\"\n }\n }\n render(){\n return (\n <div>\n <h2>REACT is in the HOUSE...YEAH!!!!</h2>\n <h4> { this.name.nombre } </h4>\n </div>\n )\n }\n}\nLo que hacemos es crear un método constructor (OJO es palabra reservada no es que lo haya puesto yo), por el momento siempre llamamos a super (esencial para que se ejecute), y hacemos que nuestra instancia del componente (nuestro amigo this) tenga una propiedad name, que es un objeto de clave=valor en este caso con una key nombre con un texto. Asimismo en la parte de render entre {}, llamamos a this, es decir, a la instancia de nuestro componente, pasándole la propiedad y el key que hemos creado. ESTO SERIA PROPIO DE JSX, este superpoder nos permite añadir JS en nuestro código HTML. Si ahora ejecutamos esto:
\n
\nVemos como nos añade el contenido de la key nombre, \"pues muy bien, y esto pa que cansino??\" diréis...vale realmente Your superName es un placeholder, la idea es que ese texto cambie en algún momento.
Para ello necesitamos \"escuchar algo en algún sitio\" y hacérselo saber a nuestra propiedad nombre. Pero... ¿como hacemos esto? Muy fácil, vamos por partes, primero como \"escuchamos\":
\n//Añadimos un input con la propiedad onChange\n<input onChange={}/>\n<h4> { this.name.nombre } </h4>\nY esto que hace, básicamente envía los eventos de cambio de ese elemento a lo que tengamos dentro de {} y ¿que debemos poner dentro? pues como es costumbre un método que creemos a través de nuestra instancia(this):
\n//Fuera de render\ngetName(input){\n console.log(input)\n}\n\n//Dentro de render\n<input onChange={this.getName}></input>\n<h4> { this.name.nombre } </h4>\nComo véis tenemos un método getName que recibe algo por parámetro, y le pasamos dentro del onChange, nuestra instancia llamando al método getName. De momento le ponemos un console.log para que podamos ver que es lo que nos pasa cada vez que escribimos. Si guardamos y abrimos nuestro index.html, cada vez que escribamos algo en nuestro input, recibiremos algo del estilo a esto:
\n
\nEs un objeto con nombre Proxy y mogollón de información. Es un estilo de elemento clásico de eventos(digo estilo), pero claro no es lo que realmente buscamos, como conseguimos el contenido de nuestro input:
getName(input){\n console.log(input.target.value)\n}\nEsto lo habréis tenido que ver alguna vez ya, simplemente buscamos el value del target de nuestro elemento, y ahora nuesto console.log nos ofrece, esta información según escribimos:
\n
\nBien ya tenemos lo que necesitamos, ahora completemos la función para que nos modifique nuestro placeholder.
getName(input){\n this.setState(this.name = {nombre: input.target.value});\n}\nPara modificar \"el estado\" de un objeto o elemento del DOM tenemos el método o propiedad setState, el cual modificaría solo lo que le pasemos entre ().
\nTeóricamente sería algo como esto, pero lo habéis probado? Si lo probáis veréis que no funciona,nos indica que this es undefined
\n
\npero.....¿por qué? Básicamente porque this no está disponible como propiedad u objeto de las funciones o métodos que nosotros mismos creamos, para hacer que funcione es necesario enlazar(bind) el this con el contexto de ejecución. Para ello solo seria necesario hacer el siguiente cambio:
<div>\n <h2>REACT is in the HOUSE...YEAH!!!!</h2>\n <input onChange={this.getName.bind(this)}></input>\n <h4> { this.name.nombre } </h4>\n</div>\nComo veis dentro de nuestro método render le hemos añadido bind(this), es decir, enlazame el this de render con mi método getName et voilá:
\n
\nRealmente es todo muy sencillo ¿verdad?
\nAntes de terminar con este post me faltaría comentar otro concepto, fijaros en esta parte del código que casi no hemos comentado:
this.setState(this.name = {nombre: input.target.value});\nHemos hablado de la propiedad setState pero no mucho de lo que hay dentro, si miráis un poco el código esto es prácticamente lo mismo que tenemos dentro de nuestro método constructor(es un poco feo no?). Pues bien realmente la propiedad tiene un motivo por el que se llama setState() y es porque el método constructor ya está preparado para gestionar los cambios de estado, si cambiamos el nombre de la propiedad y en lugar de name ponemos state:
\nconstructor(){\n super();\n this.state = {\n nombre: \"Your Super Name\"\n }\n}\nVeamos como tendría que quedar nuestro método getName:
\ngetName(input){\n this.setState({nombre: input.target.value});\n}\nY que no se nos olvide cambiar nuestro placeholder:
\n<input onChange={this.getName.bind(this)}></input>\n<h4> { this.state.nombre } </h4>\nSi lo probáis veréis que todo funciona correctamente y hemos quitado alguna cosa que no quedaba del todo bien, aún así puede que algún momento queramos usarlo por lo que solo tenemos que recordar que si en el constructor no lo hacemos todo dentro del this.state, a la hora de usarlo es necesario indicar la estructura completa del objeto o propiedad que queremos cambiar.
\nEn el próximo post veremos como comunicarnos entre componentes y alguna cosa más. Nos vemooooooos
Espero que este post sea bastante rápido jejejejej.
\nEn este caso hablaremos de los Maps o lo que en otros lenguajes conoceríamos como diccionario. En general siguen las mismas teorías que los arrays o los slices en cuanto a creación y a lo referente al rendimiento, los mapas crecen dinámicamente pero podemos indicarles el tamaño lo que optimizaría un poco su rendimiento.
Empecemos con la creación. Como ya hemos visto en Go tenemos siempre varias formas de crear los elementos:
\n//var nombreVariable map[tipoClave]tipoValor\nvar rangerRojo map[string]int\n//Inicializando sin valores\nrangerRojo := map[string]int{}\n\n//Inicializando con valores. Obligatoria la coma ultima\nrangerVerde := map[string]int{\n "Fuerza": 10000,\n "Resistencia": 5000,\n}\nrangerVerde := make(map[string]int)\n//Al igual que en los arrays podemos indicar el tamaño para optimizar rendimiento.\nrangerNegro := make(map[string]int, 2) \nYa hemos visto un poco como es la creación de Maps en golang, no es muy complicado no?, veamos ahora algunos detalles de su uso.
\nCuando asignamos el valor, realmente este devuelve 2, el contenido que queremos sacar y si existe o no. Veamoslo con un ejemplo:
\nrangerRojo := map[string]int{\n "Fuerza": 10000,\n}\n\nrangerVerde := make(map[string]int)\n\npower, exist := rangerRojo["Fuerza"]\nfmt.Println("Valor: ", power, "Existe: ", exist)\n\npower2, exist2 := rangerVerde["Fuerza"]\nfmt.Println("Valor: ", power2, "Existe: ", exist2)\nHe usado dos formas de crear maps y el resultado de esto seria:
\n![\"Map](\"https://jlgarcia.fulldev.ninja/assets/images/2017/07/Screen-Shot-2017-07-20-at-21.08.38.png\")
\nComo veis nos inicializa el valor como suele hacer Go y nos indica que no existe realmente.
En este caso Go se vuelve muy útil tiene una función propia para poder eliminar el elemento que queramos:
\ndelete(rangerRojo,"Fuerza")\nProbémoslo en un ejemplo más completo:
\nrangerRojo := map[string]int{\n\t"Fuerza": 10000,\n\t"Resistencia": 500,\n}\nfmt.Println(rangerRojo)\n\ndelete(rangerRojo, "Fuerza")\n\nfmt.Println(rangerRojo)\nY como vemos elimina el contenido sin problemas:
\n![\"Delete](\"https://jlgarcia.fulldev.ninja/assets/images/2017/07/Screen-Shot-2017-07-20-at-21.16.50.png\")
Para recorrer un MAP usamos la misma teoría que para los arrays o slices: RANGE vamos directos al ejemplo ya que es bastante simple:
\nrangerRojo := map[string]interface{}{\n "Fuerza": 10000,\n "Resistencia": 500,\n "Inteligencia": "200",\n "Arma": "Espada",\n}\n\nfor key, value := range rangerRojo {\n fmt.Println("Clave: ", key, " Valor: ", value)\n}\nTenemos un map que tiene como claves varios strings representando las características de nuestro ranger y como valor he introducido algo que no habiamos visto todavia INTERFACE{}, bueno como resumen haceros a la idea de que es un tipo especial que funciona como un genérico, es decir, que representa cualquier valor(por eso podemos tener valores tipo INT y tipo STRING) y al recorrerlo tenemos esto:
\n![\"Range](\"https://jlgarcia.fulldev.ninja/assets/images/2017/07/Screen-Shot-2017-07-20-at-21.34.29.png\")
\nOJO a tener en cuenta, no tiene porque hacerlo en orden sobretodo si introducimos algo a posteriori, mirar un ejemplo:
rangerRojo := map[string]interface{}{\n "Fuerza": 10000,\n "Resistencia": 500,\n "Inteligencia": 150,\n "Arma": "Espada",\n}\n\nrangerRojo["Maná"] = 150\n\nfor key, value := range rangerRojo {\n fmt.Println("Clave: ", key, " Valor: ", value)\n}\nHe añadido otra propiedad a nuestro ranger y el resultado es:
\n![\"First](\"https://jlgarcia.fulldev.ninja/assets/images/2017/07/Screen-Shot-2017-07-20-at-21.39.11.png\")
Si lo ejecuto de nuevo:
\n![\"Second](\"https://jlgarcia.fulldev.ninja/assets/images/2017/07/Screen-Shot-2017-07-20-at-21.40.10.png\")
Por último y como he adelantado en el ejemplo anterior:
\nBueno como ya hemos visto esto es muy sencillo:
\nrangerRojo["Maná"] = 150\n\nfmt.Println(rangerRojo)\nY nos muestra
\n![\"Print](\"https://jlgarcia.fulldev.ninja/assets/images/2017/07/Screen-Shot-2017-07-20-at-21.43.26.png\")
\nPor el momento hemos terminado con los mapas, profundizaremos en el trabajo con ellos más adelante.
\nSin mucho más nos vemos en la siguiente superNinjas :)
Espero que este post sea bastante rápido jejejejej.
\nEn este caso hablaremos de los Maps o lo que en otros lenguajes conoceríamos como diccionario. En general siguen las mismas teorías que los arrays o los slices en cuanto a creación y a lo referente al rendimiento, los mapas crecen dinámicamente pero podemos indicarles el tamaño lo que optimizaría un poco su rendimiento.
Empecemos con la creación. Como ya hemos visto en Go tenemos siempre varias formas de crear los elementos:
\n//var nombreVariable map[tipoClave]tipoValor\nvar rangerRojo map[string]int\n//Inicializando sin valores\nrangerRojo := map[string]int{}\n\n//Inicializando con valores. Obligatoria la coma ultima\nrangerVerde := map[string]int{\n \"Fuerza\": 10000,\n \"Resistencia\": 5000,\n}\nrangerVerde := make(map[string]int)\n//Al igual que en los arrays podemos indicar el tamaño para optimizar rendimiento.\nrangerNegro := make(map[string]int, 2) \nYa hemos visto un poco como es la creación de Maps en golang, no es muy complicado no?, veamos ahora algunos detalles de su uso.
\nCuando asignamos el valor, realmente este devuelve 2, el contenido que queremos sacar y si existe o no. Veamoslo con un ejemplo:
\nrangerRojo := map[string]int{\n \"Fuerza\": 10000,\n}\n\nrangerVerde := make(map[string]int)\n\npower, exist := rangerRojo[\"Fuerza\"]\nfmt.Println(\"Valor: \", power, \"Existe: \", exist)\n\npower2, exist2 := rangerVerde[\"Fuerza\"]\nfmt.Println(\"Valor: \", power2, \"Existe: \", exist2)\nHe usado dos formas de crear maps y el resultado de esto seria:
\n
\nComo veis nos inicializa el valor como suele hacer Go y nos indica que no existe realmente.
En este caso Go se vuelve muy útil tiene una función propia para poder eliminar el elemento que queramos:
\ndelete(rangerRojo,\"Fuerza\")\nProbémoslo en un ejemplo más completo:
\nrangerRojo := map[string]int{\n\t\"Fuerza\": 10000,\n\t\"Resistencia\": 500,\n}\nfmt.Println(rangerRojo)\n\ndelete(rangerRojo, \"Fuerza\")\n\nfmt.Println(rangerRojo)\nY como vemos elimina el contenido sin problemas:
\n
Para recorrer un MAP usamos la misma teoría que para los arrays o slices: RANGE vamos directos al ejemplo ya que es bastante simple:
\nrangerRojo := map[string]interface{}{\n \"Fuerza\": 10000,\n \"Resistencia\": 500,\n \"Inteligencia\": \"200\",\n \"Arma\": \"Espada\",\n}\n\nfor key, value := range rangerRojo {\n fmt.Println(\"Clave: \", key, \" Valor: \", value)\n}\nTenemos un map que tiene como claves varios strings representando las características de nuestro ranger y como valor he introducido algo que no habiamos visto todavia INTERFACE{}, bueno como resumen haceros a la idea de que es un tipo especial que funciona como un genérico, es decir, que representa cualquier valor(por eso podemos tener valores tipo INT y tipo STRING) y al recorrerlo tenemos esto:
\n
\nOJO a tener en cuenta, no tiene porque hacerlo en orden sobretodo si introducimos algo a posteriori, mirar un ejemplo:
rangerRojo := map[string]interface{}{\n \"Fuerza\": 10000,\n \"Resistencia\": 500,\n \"Inteligencia\": 150,\n \"Arma\": \"Espada\",\n}\n\nrangerRojo[\"Maná\"] = 150\n\nfor key, value := range rangerRojo {\n fmt.Println(\"Clave: \", key, \" Valor: \", value)\n}\nHe añadido otra propiedad a nuestro ranger y el resultado es:
\n
Si lo ejecuto de nuevo:
\n
Por último y como he adelantado en el ejemplo anterior:
\nBueno como ya hemos visto esto es muy sencillo:
\nrangerRojo[\"Maná\"] = 150\n\nfmt.Println(rangerRojo)\nY nos muestra
\n
\nPor el momento hemos terminado con los mapas, profundizaremos en el trabajo con ellos más adelante.
\nSin mucho más nos vemos en la siguiente superNinjas :)
\n We started working below this line\n
\n\n We started working below this line\n
\n\n We started working below this line\n
\nEn este post hablaremos de una librería muy útil llamada Mobx que entre otras cosas nos facilita un poco el desarrollo en cuanto a la comunicación entre componentes se refiere, es decir, ya hemos visto un poco como comunicarnos de un componente a otro para realizar alguna modificación en alguna propiedad, pues bien Mobx nos facilita este planteamiento (entre otras cosas claro ;) ). Si queréis algo más de información aqui tenéis la página oficial de Mobx
\nPara instalar mobx usaremos nuestro magnífico npm:
\nnpm install mobx mobx-react --save\nEsto nos instalará en el proyecto los módulos de NodeJS necesarios para poder trabajar con Mobx
\nBien vamos a empezar a partir de la estructura de proyecto que teniamos en el post anterior (tras ejecutar nuestro create-app....).
\nVamos a trabajar sobre el fichero App.js que es el componente que se esta rendeando por defecto, pero vamos a cambiarlo un poco y asi vemos que realmente estamos en este punto, vamos a cambiar la frase que aparece debajo de Welcome to React para indicar que trabajaremos despues de esa linea:
import React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n <div className="App">\n <div className="App-header">\n <img src={logo} className="App-logo" alt="logo" />\n <h2>Welcome to React</h2>\n </div>\n <p className="App-intro">\n We started working below this line\n </p>\n </div>\n );\n }\n}\n\nexport default App;\nTras guardar, automáticamente tendriamos algo similar a
\n![\"Started](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-13.37.40.png\")
\nBien ya sabemos donde estamos, ahora haremos un ejemplo simple para ver que es lo que conseguimos con Mobx, vamos a mostrar un número y este aumentará cuando pulsemos un botón.
\nPrimero mostremos nuestro número, en un principio es algo sencillo que ya hemos visto no?, creamos un componente nuevo y lo indicamos en el componente que se esta renderizando como principal no??...... si esa es una opción pero al final estaríamos haciendo lo mismo que ya hemos visto y entonces para que queremos mobx no??. Pues bien la teoría del componente es válida a medias, vamos a crear una clase y en esta tenemos que importar extendObservable de la librería de mobx. Yo le he puesto el nombre FirstMobxClass.js y esto es lo que ponemos
import {extendObservable} from 'mobx'\n\nclass FirstMobxClass {\n constructor(){\n //Recibe el objeto a observar y las propiedades\n extendObservable(this,{\n number: 1\n })\n }\n}\n\n//Creamos una nueva instancia de nuestra clase,la almacenamos\n// y la exportamos para que se tenga acceso desde fuera\n//de esta clase\nvar numberMobxClass = new FirstMobxClass();\n\nexport default numberMobxClass;\nCon esto tendríamos una variable con una propiedad number que deberíamos poder usar. Para ello volvamos a nuestra clase App.js y ponemos lo siguiente:
\nimport React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n//Our imports\nimport numberMobxClass from './FirstMobxClass';\n\nclass App extends Component {\n render() {\n return (\n <div className="App">\n <div className="App-header">\n <img src={logo} className="App-logo" alt="logo" />\n <h2>Welcome to React</h2>\n </div>\n <p className="App-intro">\n We started working below this line\n </p>\n <h2>{ numberMobxClass.number }</h2>\n </div>\n );\n }\n}\n\nexport default App;\nPara diferenciar los imports que ya teniamos de los nuevos he indicado el comentario our imports. Como véis lo que importamos es nuestra variable del fichero con nombre FirstMobxClass y para usarlo nos valemos de las magias del lenguaje JSX y con poner
\n<h2>{ numberMobxClass.number }</h2>\nYa tendríamos nuestra linea con el número que hemos puesto
\n![\"FirstMobx\"](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-14.01.56.png\")
Lo siguiente será crear nuestro botón, en este caso seguimos la teoría inicial de los componentes que ya sabíamos, me refiero a que lo creamos como un componente normal. Creamos el fichero IncreaseNumber.js
\nimport React, { Component } from 'react';\n\nclass IncreaseNumber extends Component {\n render(){\n return(\n <button>Increase Number</button>\n )\n }\n}\n\nexport default IncreaseNumber;\nDe momento nada nuevo, para verlo lo importamos en App.js y lo ponemos a continuación, es decir ahora en App.js debajo de Our imports añadimos un import más debajo del numberMobxClass
\n//Our imports\nimport numberMobxClass from './FirstMobxClass';\nimport IncreaseNumber from './IncreaseNumber';\nY luego debajo de nuestro número le ponemos el botón
\n<h2>{ numberMobxClass.number }</h2>\n<IncreaseNumber/>\nY al guardar ya veríamos nuestro botón
\n![\"NewButton\"](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-14.12.23.png\")
\nPero aunque pulsemos de momento no hace nada no??....continuemos ahora para añadirle funcionalidad. Al igual que haciamos antes necesitamos un método que haga que aumente nuestro número, y al igual que haciamos antes lo mejor es que lo creemos en el mismo punto que donde tenemos nuestra propiedad. Esto es tan simple como sumarle 1 al número, es decir añadimos a nuestra clase FirstMobxClass el método increase
class FirstMobxClass {\n constructor(){\n //Recibe el objeto a observar y las propiedades\n extendObservable(this,{\n number: 1\n });\n }\n increase(){\n this.number = this.number + 1;\n }\n}\nYa tenemos nuestro método ahora indiquemosle a nuestro botón que tiene que usarlo, probemos a ponerlo directamente con un onClick en el componente IncreaseNumber
\nimport React, { Component } from 'react';\nimport numberMobxClass from './FirstMobxClass';\n\nclass IncreaseNumber extends Component {\n render(){\n return(\n <button onClick={numberMobxClass.increase} >Increase Number</button>\n )\n }\n}\n\nexport default IncreaseNumber;\nSi os fijáis hemos importado nuestra clase numberMobxClass y hemos usado nuestro método increase directamente en el onClick, bien si guardamos vemos que la página renderiza bien pero que pasa si pulsamos.......UPSSS!!!
\n![\"Error](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-14.33.03.png\")
\nVemos que nos sale este error, y eso es como os podéis imaginar que this no tiene nada, diréis "pues entonces podemos ponerle un bind igual que haciamos antes y ya esta", bueno pues vamos a probarlo a ver que pasa y de paso le ponemos al método increase un log para ver que tiene this.
\nEl método increase ahora quedaria así
increase(){\n console.log(this);\n this.number = this.number + 1;\n}\nY nuestro onClick
\n<button onClick={numberMobxClass.increase.bind(this)} >Increase Number</button>\nVeamos que pasa cuando pulsamos
\n![\"Log](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-14.37.48.png\")
\nNo nos da error pero si nos fijamos en lo que nos devuelve nuestro log, la propiedad number es NaN y eso ¿por qué? Pues porque realmente estamos pasando con bind el this de nuestro componente IncreaseNumber el cual no tiene esa propiedad, hagamos un pequeño ejemplo para verlo, creemos una propiedad en el componente IncreaseNumber como hemos visto en anteriores post y veamos el log ahora.
\nEl componente IncreaseNumber quedaria asi
class IncreaseNumber extends Component {\n constructor(){\n super();\n this.test = 2;\n \n }\n render(){\n return(\n <button onClick={numberMobxClass.increase.bind(this)} >Increase Number</button>\n )\n }\n}\nY al pulsar tenemos este log
\n![\"Testing](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-14.47.11.png\")
\nSi os fijáis number sigue siendo NaN pero sin embargo tenemos nuestra propiedad test con el valor que hemos puesto, entonces quiere decir que estamos pasando el contexto del componente IncreaseNumber.... y entonces como lo hacemos??...Es más fácil de lo que parece, onClick espera una función no?, pues simplemente usemos una función que cada vez que se use esta "llame" a nuestro método increase (al estilo típico de la programación habitual)
\nCon esta teoría nuestro onClick quedaría así
<button onClick={() => numberMobxClass.increase()} >Increase Number</button>\nVeamos lo que tiene this ahora
\n![\"Log](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-14.52.52.png\")
\nAnda!! Ahora nuestro number si aumenta pero..... en nuestra página no se ve.....y eso?? bueno la explicación es sencilla no estamos "observando" la propiedad para que responda los cambios y como hacemos eso?...Fácil, importamos observer de la libreria mobx-react y le indicamos que observe donde estamos renderizando, es decir en App.js, por lo que el componente quedaría asi
import React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n//Our imports\nimport numberMobxClass from './FirstMobxClass';\nimport IncreaseNumber from './IncreaseNumber';\nimport { observer } from 'mobx-react';\n\nclass App extends Component {\n render() {\n return (\n <div className="App">\n <div className="App-header">\n <img src={logo} className="App-logo" alt="logo" />\n <h2>Welcome to React</h2>\n </div>\n <p className="App-intro">\n We started working below this line\n </p>\n <h2>{ numberMobxClass.number }</h2>\n <IncreaseNumber/>\n </div>\n );\n }\n}\n\nexport default observer(App);\nY voilá ya tenemos nuestro numero aumentando en nuestra página
\n![\"The](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-15.00.31.png\")
Espero que quede más o menos claro como estamos usando la característica observable que nos proporciona Mobx, que realmente nos facilita un poco estar pendiente de los estados o cambios de nuestras propiedades.
\nEn el siguiente post seguiremos viendo que más cosas podemos hacer con Mobx, nos vemos, un abrazooorrrrrr
\n","url":"https://jlgarcia.fulldev.ninja/react-superhero-v-mobx/","canonical_url":null,"uuid":"93502e4c-0ee1-43cb-a96d-cb6751f8ee84","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"59b051bd6c31a60001f69f0d","reading_time":7,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"En este post hablaremos de una librería muy útil llamada Mobx que entre otras cosas nos facilita un poco el desarrollo en cuanto a la comunicación entre componentes se refiere, es decir, ya hemos visto un poco como comunicarnos de un componente a otro para realizar alguna modificación en alguna propiedad, pues bien Mobx nos facilita este planteamiento (entre otras cosas claro ;) ). Si queréis algo más de información aqui tenéis la página oficial de Mobx
\nPara instalar mobx usaremos nuestro magnífico npm:
\nnpm install mobx mobx-react --save\nEsto nos instalará en el proyecto los módulos de NodeJS necesarios para poder trabajar con Mobx
\nBien vamos a empezar a partir de la estructura de proyecto que teniamos en el post anterior (tras ejecutar nuestro create-app....).
\nVamos a trabajar sobre el fichero App.js que es el componente que se esta rendeando por defecto, pero vamos a cambiarlo un poco y asi vemos que realmente estamos en este punto, vamos a cambiar la frase que aparece debajo de Welcome to React para indicar que trabajaremos despues de esa linea:
import React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n <div className=\"App\">\n <div className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <h2>Welcome to React</h2>\n </div>\n <p className=\"App-intro\">\n We started working below this line\n </p>\n </div>\n );\n }\n}\n\nexport default App;\nTras guardar, automáticamente tendriamos algo similar a
\n
\nBien ya sabemos donde estamos, ahora haremos un ejemplo simple para ver que es lo que conseguimos con Mobx, vamos a mostrar un número y este aumentará cuando pulsemos un botón.
\nPrimero mostremos nuestro número, en un principio es algo sencillo que ya hemos visto no?, creamos un componente nuevo y lo indicamos en el componente que se esta renderizando como principal no??...... si esa es una opción pero al final estaríamos haciendo lo mismo que ya hemos visto y entonces para que queremos mobx no??. Pues bien la teoría del componente es válida a medias, vamos a crear una clase y en esta tenemos que importar extendObservable de la librería de mobx. Yo le he puesto el nombre FirstMobxClass.js y esto es lo que ponemos
import {extendObservable} from 'mobx'\n\nclass FirstMobxClass {\n constructor(){\n //Recibe el objeto a observar y las propiedades\n extendObservable(this,{\n number: 1\n })\n }\n}\n\n//Creamos una nueva instancia de nuestra clase,la almacenamos\n// y la exportamos para que se tenga acceso desde fuera\n//de esta clase\nvar numberMobxClass = new FirstMobxClass();\n\nexport default numberMobxClass;\nCon esto tendríamos una variable con una propiedad number que deberíamos poder usar. Para ello volvamos a nuestra clase App.js y ponemos lo siguiente:
\nimport React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n//Our imports\nimport numberMobxClass from './FirstMobxClass';\n\nclass App extends Component {\n render() {\n return (\n <div className=\"App\">\n <div className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <h2>Welcome to React</h2>\n </div>\n <p className=\"App-intro\">\n We started working below this line\n </p>\n <h2>{ numberMobxClass.number }</h2>\n </div>\n );\n }\n}\n\nexport default App;\nPara diferenciar los imports que ya teniamos de los nuevos he indicado el comentario our imports. Como véis lo que importamos es nuestra variable del fichero con nombre FirstMobxClass y para usarlo nos valemos de las magias del lenguaje JSX y con poner
\n<h2>{ numberMobxClass.number }</h2>\nYa tendríamos nuestra linea con el número que hemos puesto
\n
Lo siguiente será crear nuestro botón, en este caso seguimos la teoría inicial de los componentes que ya sabíamos, me refiero a que lo creamos como un componente normal. Creamos el fichero IncreaseNumber.js
\nimport React, { Component } from 'react';\n\nclass IncreaseNumber extends Component {\n render(){\n return(\n <button>Increase Number</button>\n )\n }\n}\n\nexport default IncreaseNumber;\nDe momento nada nuevo, para verlo lo importamos en App.js y lo ponemos a continuación, es decir ahora en App.js debajo de Our imports añadimos un import más debajo del numberMobxClass
\n//Our imports\nimport numberMobxClass from './FirstMobxClass';\nimport IncreaseNumber from './IncreaseNumber';\nY luego debajo de nuestro número le ponemos el botón
\n<h2>{ numberMobxClass.number }</h2>\n<IncreaseNumber/>\nY al guardar ya veríamos nuestro botón
\n
\nPero aunque pulsemos de momento no hace nada no??....continuemos ahora para añadirle funcionalidad. Al igual que haciamos antes necesitamos un método que haga que aumente nuestro número, y al igual que haciamos antes lo mejor es que lo creemos en el mismo punto que donde tenemos nuestra propiedad. Esto es tan simple como sumarle 1 al número, es decir añadimos a nuestra clase FirstMobxClass el método increase
class FirstMobxClass {\n constructor(){\n //Recibe el objeto a observar y las propiedades\n extendObservable(this,{\n number: 1\n });\n }\n increase(){\n this.number = this.number + 1;\n }\n}\nYa tenemos nuestro método ahora indiquemosle a nuestro botón que tiene que usarlo, probemos a ponerlo directamente con un onClick en el componente IncreaseNumber
\nimport React, { Component } from 'react';\nimport numberMobxClass from './FirstMobxClass';\n\nclass IncreaseNumber extends Component {\n render(){\n return(\n <button onClick={numberMobxClass.increase} >Increase Number</button>\n )\n }\n}\n\nexport default IncreaseNumber;\nSi os fijáis hemos importado nuestra clase numberMobxClass y hemos usado nuestro método increase directamente en el onClick, bien si guardamos vemos que la página renderiza bien pero que pasa si pulsamos.......UPSSS!!!
\n
\nVemos que nos sale este error, y eso es como os podéis imaginar que this no tiene nada, diréis \"pues entonces podemos ponerle un bind igual que haciamos antes y ya esta\", bueno pues vamos a probarlo a ver que pasa y de paso le ponemos al método increase un log para ver que tiene this.
\nEl método increase ahora quedaria así
increase(){\n console.log(this);\n this.number = this.number + 1;\n}\nY nuestro onClick
\n<button onClick={numberMobxClass.increase.bind(this)} >Increase Number</button>\nVeamos que pasa cuando pulsamos
\n
\nNo nos da error pero si nos fijamos en lo que nos devuelve nuestro log, la propiedad number es NaN y eso ¿por qué? Pues porque realmente estamos pasando con bind el this de nuestro componente IncreaseNumber el cual no tiene esa propiedad, hagamos un pequeño ejemplo para verlo, creemos una propiedad en el componente IncreaseNumber como hemos visto en anteriores post y veamos el log ahora.
\nEl componente IncreaseNumber quedaria asi
class IncreaseNumber extends Component {\n constructor(){\n super();\n this.test = 2;\n \n }\n render(){\n return(\n <button onClick={numberMobxClass.increase.bind(this)} >Increase Number</button>\n )\n }\n}\nY al pulsar tenemos este log
\n
\nSi os fijáis number sigue siendo NaN pero sin embargo tenemos nuestra propiedad test con el valor que hemos puesto, entonces quiere decir que estamos pasando el contexto del componente IncreaseNumber.... y entonces como lo hacemos??...Es más fácil de lo que parece, onClick espera una función no?, pues simplemente usemos una función que cada vez que se use esta \"llame\" a nuestro método increase (al estilo típico de la programación habitual)
\nCon esta teoría nuestro onClick quedaría así
<button onClick={() => numberMobxClass.increase()} >Increase Number</button>\nVeamos lo que tiene this ahora
\n
\nAnda!! Ahora nuestro number si aumenta pero..... en nuestra página no se ve.....y eso?? bueno la explicación es sencilla no estamos \"observando\" la propiedad para que responda los cambios y como hacemos eso?...Fácil, importamos observer de la libreria mobx-react y le indicamos que observe donde estamos renderizando, es decir en App.js, por lo que el componente quedaría asi
import React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n//Our imports\nimport numberMobxClass from './FirstMobxClass';\nimport IncreaseNumber from './IncreaseNumber';\nimport { observer } from 'mobx-react';\n\nclass App extends Component {\n render() {\n return (\n <div className=\"App\">\n <div className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <h2>Welcome to React</h2>\n </div>\n <p className=\"App-intro\">\n We started working below this line\n </p>\n <h2>{ numberMobxClass.number }</h2>\n <IncreaseNumber/>\n </div>\n );\n }\n}\n\nexport default observer(App);\nY voilá ya tenemos nuestro numero aumentando en nuestra página
\n
Espero que quede más o menos claro como estamos usando la característica observable que nos proporciona Mobx, que realmente nos facilita un poco estar pendiente de los estados o cambios de nuestras propiedades.
\nEn el siguiente post seguiremos viendo que más cosas podemos hacer con Mobx, nos vemos, un abrazooorrrrrr
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En este post hablaremos de una librería muy útil llamada "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Mobx"}]},{"type":"text","value":" que entre otras cosas nos facilita un poco el desarrollo en cuanto a la comunicación entre componentes se refiere, es decir, ya hemos visto un poco como comunicarnos de un componente a otro para realizar alguna modificación en alguna propiedad, pues bien "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Mobx"}]},{"type":"text","value":" nos facilita este planteamiento (entre otras cosas claro ;) ). Si queréis algo más de información aqui tenéis la página oficial de "},{"type":"element","tagName":"a","properties":{"href":"https://mobx.js.org/"},"children":[{"type":"text","value":"Mobx"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"instalacin"},"children":[{"type":"text","value":"Instalación"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para instalar "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"mobx"}]},{"type":"text","value":" usaremos nuestro magnífico "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm install mobx mobx-react --save\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto nos instalará en el proyecto los módulos de NodeJS necesarios para poder trabajar con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Mobx"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"usandomobx"},"children":[{"type":"text","value":"Usando Mobx"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien vamos a empezar a partir de la estructura de proyecto que teniamos en el post anterior (tras ejecutar nuestro create-app....)."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVamos a trabajar sobre el fichero "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"App.js"}]},{"type":"text","value":" que es el componente que se esta rendeando por defecto, pero vamos a cambiarlo un poco y asi vemos que realmente estamos en este punto, vamos a cambiar la frase que aparece debajo de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Welcome to React"}]},{"type":"text","value":" para indicar que trabajaremos despues de esa linea:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"import React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n\n We started working below this line\n
\n\n We started working below this line\n
\n\n We started working below this line\n
\n\n To get started, edit src/App.js and save to reload.\n
En el post anterior creamos un proyecto de React usando el CLI que nos proporcionan los creadores del mismo. Esta herramienta de linea de comandos nos crea un proyecto base desde el que partir y como vimos cuando usamos npm start para arrancar nuestro servidor de desarrollo, la herramienta nos muestra una página similar a esta:
\n![\"React](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-04-at-09.26.57.png\")
Veamos un poco la estructura del proyecto y desde donde podemos empezar a trabajar.
\nLo primero veamos lo que tenemos:
\n![\"Folders](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-04-at-09.29.33.png\")
En lo primero que nos tenemos que fijar es en los index tanto el js, como el html, ya que son desde donde se empieza a llamar al resto. Si miramos el index.html tenemos una pagina html con varios tags pero lo que nos importa realmente es algo que ya hemos visto:
\n <div id="root"></div>\nRecordemos que es en ese punto donde se empieza a componer nuestra aplicación.
\nLo siguiente miremos dentro de la carpeta src y veamos el index.js que aqui tenemos varias cosas interesantes:
\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport registerServiceWorker from './registerServiceWorker';\n\n\nReactDOM.render(<App />, document.getElementById('root'));\nregisterServiceWorker();\nTenemos varios imports, luego el típico ReactDOM.render y por último una llamada a un método registerServiceWorker(). Comencemos con los imports, los dos primeros ya los hemos visto antes, son los específicos para que React funcione, veamos los siguientes:
\nA continuación como ya hemos comentado, tenemos nuestro típico render de react que lo que hace es instanciar el componente App. Si miramos el código de App.js:
\nimport React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n <div className="App">\n <div className="App-header">\n <img src={logo} className="App-logo" alt="logo" />\n <h2>Welcome to React</h2>\n </div>\n <p className="App-intro">\n To get started, edit <code>src/App.js</code> and save to reload.\n </p>\n </div>\n );\n }\n}\n\nexport default App;\nVemos que ya hemos visto muchas cosas, comentar que los imports de logo y de App.css los necesitamos para usarlos en nuestro código JSX, si os fijáis en la línea:
\n<img src={logo} className="App-logo" alt="logo" />\nTenemos las dos cosas, usamos el logo dentro de src y ya estamos usando tambien nombres de clases del fichero css.
\nEn este punto faltaría solo comentar la última y casi la más importante del conjunto (en este punto jejeje):
\nexport default App;\nEsta línea lo que indica es que por defecto cuando se haga un import de este fichero se importe el componente App. Un detalle importante, sin export no importamos nada, si comentáramos esa línea tendríamos este resultado:
\n![\"Screen-Shot-2017-09-04-at-21.42.51\"](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-04-at-21.42.51.png\")
Creo que más o menos se entiende todo, solo comentar que si quisieramos cambiar el componente App por otro solo tendríamos que crear el componente como queramos ponerle la línea export y cambiar el
Como vemos prácticamente todo lo haremos dentro de la carpeta src y sigue manteniendo el nivel de sencillez que hemos estado viendo.
\nSin mucho más nos vemos en el siguiente. Un abrazoooooooo
\n","url":"https://jlgarcia.fulldev.ninja/react-superhero-iv/","canonical_url":null,"uuid":"a12fcedc-92c4-4094-a631-9144bc91e900","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"59acfee5c5286700019db1d5","reading_time":3,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"En el post anterior creamos un proyecto de React usando el CLI que nos proporcionan los creadores del mismo. Esta herramienta de linea de comandos nos crea un proyecto base desde el que partir y como vimos cuando usamos npm start para arrancar nuestro servidor de desarrollo, la herramienta nos muestra una página similar a esta:
\n
Veamos un poco la estructura del proyecto y desde donde podemos empezar a trabajar.
\nLo primero veamos lo que tenemos:
\n
En lo primero que nos tenemos que fijar es en los index tanto el js, como el html, ya que son desde donde se empieza a llamar al resto. Si miramos el index.html tenemos una pagina html con varios tags pero lo que nos importa realmente es algo que ya hemos visto:
\n <div id=\"root\"></div>\nRecordemos que es en ese punto donde se empieza a componer nuestra aplicación.
\nLo siguiente miremos dentro de la carpeta src y veamos el index.js que aqui tenemos varias cosas interesantes:
\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport registerServiceWorker from './registerServiceWorker';\n\n\nReactDOM.render(<App />, document.getElementById('root'));\nregisterServiceWorker();\nTenemos varios imports, luego el típico ReactDOM.render y por último una llamada a un método registerServiceWorker(). Comencemos con los imports, los dos primeros ya los hemos visto antes, son los específicos para que React funcione, veamos los siguientes:
\nA continuación como ya hemos comentado, tenemos nuestro típico render de react que lo que hace es instanciar el componente App. Si miramos el código de App.js:
\nimport React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n <div className=\"App\">\n <div className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <h2>Welcome to React</h2>\n </div>\n <p className=\"App-intro\">\n To get started, edit <code>src/App.js</code> and save to reload.\n </p>\n </div>\n );\n }\n}\n\nexport default App;\nVemos que ya hemos visto muchas cosas, comentar que los imports de logo y de App.css los necesitamos para usarlos en nuestro código JSX, si os fijáis en la línea:
\n<img src={logo} className=\"App-logo\" alt=\"logo\" />\nTenemos las dos cosas, usamos el logo dentro de src y ya estamos usando tambien nombres de clases del fichero css.
\nEn este punto faltaría solo comentar la última y casi la más importante del conjunto (en este punto jejeje):
\nexport default App;\nEsta línea lo que indica es que por defecto cuando se haga un import de este fichero se importe el componente App. Un detalle importante, sin export no importamos nada, si comentáramos esa línea tendríamos este resultado:
\n
Creo que más o menos se entiende todo, solo comentar que si quisieramos cambiar el componente App por otro solo tendríamos que crear el componente como queramos ponerle la línea export y cambiar el
Como vemos prácticamente todo lo haremos dentro de la carpeta src y sigue manteniendo el nivel de sencillez que hemos estado viendo.
\nSin mucho más nos vemos en el siguiente. Un abrazoooooooo
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En el post anterior creamos un proyecto de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"React"}]},{"type":"text","value":" usando el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"CLI"}]},{"type":"text","value":" que nos proporcionan los creadores del mismo. Esta herramienta de linea de comandos nos crea un proyecto base desde el que partir y como vimos cuando usamos "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"npm start"}]},{"type":"text","value":" para arrancar nuestro servidor de desarrollo, la herramienta nos muestra una página similar a esta:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-04-at-09.26.57.png","alt":"React base page"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos un poco la estructura del proyecto y desde donde podemos empezar a trabajar."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nLo primero veamos lo que tenemos:"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-04-at-09.29.33.png","alt":"Folders Base Project"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En lo primero que nos tenemos que fijar es en los "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index"}]},{"type":"text","value":" tanto el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"js"}]},{"type":"text","value":", como el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"html"}]},{"type":"text","value":", ya que son desde donde se empieza a llamar al resto. Si miramos el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.html"}]},{"type":"text","value":" tenemos una pagina html con varios tags pero lo que nos importa realmente es algo que ya hemos visto:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":" \n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Recordemos que es en ese punto donde se empieza a componer nuestra aplicación."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo siguiente miremos dentro de la carpeta "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":" y veamos el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.js"}]},{"type":"text","value":" que aqui tenemos varias cosas interesantes:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport registerServiceWorker from './registerServiceWorker';\n\n\nReactDOM.render(\n To get started, edit src/App.js and save to reload.\n
Bien antes de ponernos serios desarrollando algo más complejo con React, necesitamos configurar nuestro entorno ya que una app de React necesita de varias dependencias para funcionar correctamente en producción(además que nos facilitan un poco el ir desarrollando).
\nHasta hace poco, con React debíamos hacer toda la configuración y preparación del entorno a mano, pero nuestros amigos de Facebook, se han creado una especie de atajo al estilo AngularCLI(más info Create React APP), para usarlo lo primero es instalar NodeJS, es suficiente con instalar la versión LTS desde la página principal, para el que no lo sepa NodeJS es la opción servidor de JS, es orientado a eventos lo que le permite manejar un gran número de peticiones, por el momento no voy a entrar mucho en esto, tengo intención de crear una linea de post solo de Node por lo que si os interesa estar atentos ;).
\nUna vez instalado podemos comprobar que se ha instalado correctamente con las siguientes instrucciones en nuestra consola de comandos preferida:
\n#Para ver la versión de NodeJS\nnode -v\n#La versión de Node Package Manager\nnpm -v \n![\"Node](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-04-at-08.54.25.png\")
\nYo simplemente he encadenado los comandos pero os debería salir algo similar a eso.
Bien lo primero de todo es hacer que NPM instale los paquetes que necesitamos:
\nnpm -g install create-react-app\nEs tan sencillo como indicarlo con el nombre, y el -g es para que nos lo instale globalmente y podamos usarlo en cualquier sitio, si no lo pusieramos solo nos lo instalaría en el directorio donde estuviéramos trabajando en la linea de comandos. Una vez ejecutado se descargará y configurará algunas cosas el solito, veréis unas cuantas líneas como estas:
\n![\"Npm](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-04-at-09.03.41.png\")
\nBien una vez instalado ya podemos crear nuestro entorno para la app que vamos a desarrollar, para ello solo necesitamos llamar a nuestro nuevo comando he indicarle al nombre de la app que deseamos crear:
create-react-app nuclear_superhero_app\nUna vez terminado el proceso nos saldrá algo similar a esto
\n![\"Create-react-app](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-04-at-09.08.17.png\")
\nPor último para empezar a ver la utilidad de esto tenemos que hacer lo que nos sugieren al final, entrar en el directorio y ejecutar start:
cd nuclear_superhero_app\nnpm start\nSi todo ha ido bien se os habrá abierto otra pestaña en el navegador con esto:
\n![\"React](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-04-at-09.11.31.png\")
Básicamente nos ha levantado un "servidor" en local en el puerto 3000 donde podremos ir viendo los cambios en nuestra aplicación casi en tiempo real. Si queremos para el servidor es suficiente con irnos a la consola desde donde lo hemos lanzado y detener el proceso con ctrl+c o como soláis hacerlo.
\nCon esto ya tendríamos lo que necesitamos para empezar a trabajar realmente con React, que es lo que haremos desde el próximo post, si alguien ha tenido problemas o quiere saber algo de Node que lo ponga en comentarios y lo vamos viendo.Nos vemoooossssss.
\n","url":"https://jlgarcia.fulldev.ninja/react-js-iii-entorno-de-desarrollo/","canonical_url":null,"uuid":"84b25ae1-1dbe-4e10-b5de-e9c0dec2d671","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"42","reading_time":3,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"Bien antes de ponernos serios desarrollando algo más complejo con React, necesitamos configurar nuestro entorno ya que una app de React necesita de varias dependencias para funcionar correctamente en producción(además que nos facilitan un poco el ir desarrollando).
\nHasta hace poco, con React debíamos hacer toda la configuración y preparación del entorno a mano, pero nuestros amigos de Facebook, se han creado una especie de atajo al estilo AngularCLI(más info Create React APP), para usarlo lo primero es instalar NodeJS, es suficiente con instalar la versión LTS desde la página principal, para el que no lo sepa NodeJS es la opción servidor de JS, es orientado a eventos lo que le permite manejar un gran número de peticiones, por el momento no voy a entrar mucho en esto, tengo intención de crear una linea de post solo de Node por lo que si os interesa estar atentos ;).
\nUna vez instalado podemos comprobar que se ha instalado correctamente con las siguientes instrucciones en nuestra consola de comandos preferida:
\n#Para ver la versión de NodeJS\nnode -v\n#La versión de Node Package Manager\nnpm -v \n
\nYo simplemente he encadenado los comandos pero os debería salir algo similar a eso.
Bien lo primero de todo es hacer que NPM instale los paquetes que necesitamos:
\nnpm -g install create-react-app\nEs tan sencillo como indicarlo con el nombre, y el -g es para que nos lo instale globalmente y podamos usarlo en cualquier sitio, si no lo pusieramos solo nos lo instalaría en el directorio donde estuviéramos trabajando en la linea de comandos. Una vez ejecutado se descargará y configurará algunas cosas el solito, veréis unas cuantas líneas como estas:
\n
\nBien una vez instalado ya podemos crear nuestro entorno para la app que vamos a desarrollar, para ello solo necesitamos llamar a nuestro nuevo comando he indicarle al nombre de la app que deseamos crear:
create-react-app nuclear_superhero_app\nUna vez terminado el proceso nos saldrá algo similar a esto
\n
\nPor último para empezar a ver la utilidad de esto tenemos que hacer lo que nos sugieren al final, entrar en el directorio y ejecutar start:
cd nuclear_superhero_app\nnpm start\nSi todo ha ido bien se os habrá abierto otra pestaña en el navegador con esto:
\n
Básicamente nos ha levantado un \"servidor\" en local en el puerto 3000 donde podremos ir viendo los cambios en nuestra aplicación casi en tiempo real. Si queremos para el servidor es suficiente con irnos a la consola desde donde lo hemos lanzado y detener el proceso con ctrl+c o como soláis hacerlo.
\nCon esto ya tendríamos lo que necesitamos para empezar a trabajar realmente con React, que es lo que haremos desde el próximo post, si alguien ha tenido problemas o quiere saber algo de Node que lo ponga en comentarios y lo vamos viendo.Nos vemoooossssss.
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien antes de ponernos serios desarrollando algo más complejo con React, necesitamos configurar nuestro entorno ya que una app de React necesita de varias dependencias para funcionar correctamente en producción(además que nos facilitan un poco el ir desarrollando)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hasta hace poco, con React debíamos hacer toda la configuración y preparación del entorno a mano, pero nuestros amigos de Facebook, se han creado una especie de atajo al estilo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"AngularCLI"}]},{"type":"text","value":"(más info "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/facebookincubator/create-react-app"},"children":[{"type":"text","value":"Create React APP"}]},{"type":"text","value":"), para usarlo lo primero es instalar "},{"type":"element","tagName":"a","properties":{"href":"https://nodejs.org/es/"},"children":[{"type":"text","value":"NodeJS"}]},{"type":"text","value":", es suficiente con instalar la versión "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"LTS"}]},{"type":"text","value":" desde la página principal, para el que no lo sepa NodeJS es la opción servidor de JS, es orientado a eventos lo que le permite manejar un gran número de peticiones, por el momento no voy a entrar mucho en esto, tengo intención de crear una linea de post solo de Node por lo que si os interesa estar atentos ;)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Una vez instalado podemos comprobar que se ha instalado correctamente con las siguientes instrucciones en nuestra consola de comandos preferida:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#Para ver la versión de NodeJS\nnode -v\n#La versión de Node Package Manager\nnpm -v \n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-04-at-08.54.25.png","alt":"Node Check Install"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nYo simplemente he encadenado los comandos pero os debería salir algo similar a eso."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien lo primero de todo es hacer que "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"NPM"}]},{"type":"text","value":" instale los paquetes que necesitamos:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm -g install create-react-app\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Es tan sencillo como indicarlo con el nombre, y el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"-g"}]},{"type":"text","value":" es para que nos lo instale globalmente y podamos usarlo en cualquier sitio, si no lo pusieramos solo nos lo instalaría en el directorio donde estuviéramos trabajando en la linea de comandos. Una vez ejecutado se descargará y configurará algunas cosas el solito, veréis unas cuantas líneas como estas:"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-04-at-09.03.41.png","alt":"Npm list install React"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nBien una vez instalado ya podemos crear nuestro entorno para la app que vamos a desarrollar, para ello solo necesitamos llamar a nuestro nuevo comando he indicarle al nombre de la app que deseamos crear:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"create-react-app nuclear_superhero_app\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Una vez terminado el proceso nos saldrá algo similar a esto"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-04-at-09.08.17.png","alt":"Create-react-app command"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPor último para empezar a ver la utilidad de esto tenemos que hacer lo que nos sugieren al final, entrar en el directorio y ejecutar "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"cd nuclear_superhero_app\nnpm start\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si todo ha ido bien se os habrá abierto otra pestaña en el navegador con esto:"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-04-at-09.11.31.png","alt":"React Start"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Básicamente nos ha levantado un \"servidor\" en local en el puerto 3000 donde podremos ir viendo los cambios en nuestra aplicación casi en tiempo real. Si queremos para el servidor es suficiente con irnos a la consola desde donde lo hemos lanzado y detener el proceso con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ctrl+c"}]},{"type":"text","value":" o como soláis hacerlo."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Con esto ya tendríamos lo que necesitamos para empezar a trabajar realmente con React, que es lo que haremos desde el próximo post, si alguien ha tenido problemas o quiere saber algo de Node que lo ponga en comentarios y lo vamos viendo.Nos vemoooossssss."}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[]},"featureImageSharp":{"base":"Captain-Atom.jpg","publicURL":"/static/ea41313c22f611d45d277d453c4273d1/Captain-Atom.jpg","imageMeta":{"width":864,"height":648},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQCBv/EABYBAQEBAAAAAAAAAAAAAAAAAAMBAv/aAAwDAQACEAMQAAABojay1bnBz//EABkQAQACAwAAAAAAAAAAAAAAAAECAwARE//aAAgBAQABBQKoAmdchqqPFMlZGuC7f//EABcRAQEBAQAAAAAAAAAAAAAAAAEAEiH/2gAIAQMBAT8BONov/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERE0H/2gAIAQIBAT8BbK50/8QAHhAAAwAABwEAAAAAAAAAAAAAAAERAhIiMTJRUmH/2gAIAQEABj8C0x9lWxlq+j9ImHkVn//EABkQAQADAQEAAAAAAAAAAAAAAAEAESExQf/aAAgBAQABPyHlOmjsuNqMAiJQe2TspkuwMcZ4otX5GdLXWf/aAAwDAQACAAMAAAAQy/8A/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQBB/9oACAEDAQE/ECLJZf/EABYRAQEBAAAAAAAAAAAAAAAAAAERAP/aAAgBAgEBPxBJcpVz/8QAHBABAAIDAAMAAAAAAAAAAAAAAQARITFBUWHR/9oACAEBAAE/ECGZHOFc9RXVMNQfYPyzYFbcsWTgugFwsFDeqNnrnxyXBPYm2f/Z","aspectRatio":1.3358778625954197,"src":"/static/ea41313c22f611d45d277d453c4273d1/ea4ab/Captain-Atom.jpg","srcSet":"/static/ea41313c22f611d45d277d453c4273d1/477ba/Captain-Atom.jpg 175w,\n/static/ea41313c22f611d45d277d453c4273d1/06776/Captain-Atom.jpg 350w,\n/static/ea41313c22f611d45d277d453c4273d1/ea4ab/Captain-Atom.jpg 700w,\n/static/ea41313c22f611d45d277d453c4273d1/fc1a6/Captain-Atom.jpg 864w","srcWebp":"/static/ea41313c22f611d45d277d453c4273d1/89afa/Captain-Atom.webp","srcSetWebp":"/static/ea41313c22f611d45d277d453c4273d1/9fca7/Captain-Atom.webp 175w,\n/static/ea41313c22f611d45d277d453c4273d1/37a4e/Captain-Atom.webp 350w,\n/static/ea41313c22f611d45d277d453c4273d1/89afa/Captain-Atom.webp 700w,\n/static/ea41313c22f611d45d277d453c4273d1/65e54/Captain-Atom.webp 864w","sizes":"(max-width: 700px) 100vw, 700px"}}}}}]}},"pageContext":{"slug":"react-superhero-introduccion","prev":"react-js-i-cambios-en-un-mismo-componente","next":"go-go-power-ra-ah-que-no-go-parte-5-maps","tag":"reactjs","limit":3,"skip":0,"primaryTagCount":6,"collectionPaths":{}}}, "staticQueryHashes": ["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}