\n 
\n
\n Welcome to React
\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 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":{"pageNumber":0,"limit":3,"skip":0,"totalPosts":6,"numberOfPages":2,"humanPageNumber":1,"prevPageNumber":null,"nextPageNumber":2,"previousPagePath":null,"nextPagePath":"/tag/reactjs/page/2/","slug":"reactjs","collectionPaths":{},"iScrollEnabled":true,"postIds":["Ghost__Post__5a338158333e0f134c248f2a","Ghost__Post__5a338158333e0f134c248f29","Ghost__Post__5a338158333e0f134c248f1d","Ghost__Post__5a338158333e0f134c248f1c","Ghost__Post__5a338158333e0f134c248f1b","Ghost__Post__5a338158333e0f134c248f1a"],"cursor":0}}, "staticQueryHashes": ["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}