\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
\nTras nuestro repaso de algunas características que nos serían útiles de JavaScript, vamos a ver algunas propiedades, métodos o lógicas de NodeJS que nos ayudarán con el desarrollo de servicios en este lenguaje.
\nNode usa un solo hilo, o más bien como concepto de ciclo de vida para nosotros es así, es posible que internamente se ejecute de otra forma pero insisto no para nosotros.
\nEste hilo funciona como un bucle, es decir, lo que hace en cada vuelta es ejecutar el código que le toca en ese momento(todo síncrono), y si se encuentra algún callback lo ejecuta pero, repito pero los va dejando pendientes y comprueba si han terminado en vueltas posteriores y si han terminado entonces ejecúta sus el código pertinente a ese callback.
\nPor este motivo todo el nuestro código en NodeJS tenemos que procurar que sea no bloqueante, si puede bloquear de algúna forma el hilo eso significa que tenemos que hacerlo asíncrono para que el event loop(nuestro único hilo) no se detenga. Todas las llamadas a funciones de entrada/salida lectura/escritura del disco, red, base de datos deberia ser asíncrono.
Process es un objeto global que está disponible en nuestras aplicaciones, el cual nos va a permitir por ejemplo:
\nsaber en que sistema operativo está funcionando,
process.platform;\nparar la ejecución con un código de salida,
\nprocess.exit(int); //0 para salida correcta\nresponder a eventos como este de 'exit' con un callback para hacer algo antes de parar la ejecución
\nprocess.on('exit',callback);\no hacer algo en la siguiente vuelta del event loop
\nprocess.nextTick(function(){\n console.log('Siguiente vueltaaaaaaaaaa')\n}\nEjemplo de información de sistema
\n'use strict';\n\nvar systemInfo = {\n pid: process.pid,\n version: process.version,\n platform: process.platform,\n title: process.title,\n arg: process.argv,\n execPath: process.execPath,\n folder: process.cwd()\n};\n\nconsole.log('Id de proceso ' + systemInfo.pid)\nconsole.log('Versión de Node' + systemInfo.version)\nconsole.log('Plataforma ' + systemInfo.platform)\nconsole.log('Nombre de proceso ' + systemInfo.title)\nconsole.log('Argumentos que recibe ' + systemInfo.arg)\nconsole.log('Path de ejecución de proceso '+ systemInfo.execPath)\nconsole.log('Path de ejecución de aplicación de node '+ systemInfo.folder)\nCon este código vereis varios ejemplos de información que podemos sacar gracias a process.
\nVeamos ahora un ejemplo de exit, para ello vamos poner antes de todos los logs lo siguiente
\nprocess.exit(2);\nSi ahora ejecutais vereis como se finaliza el programa antes de mostrar nada y podéis comprobar el código de salida con
\nEn linux/Mac:
echo $?\nEn Windows:
\necho %errorlevel%\n![\"Error](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-13-at-09.46.31.png\")
Por último vamos a probar a realizar algo justo antes de salir para ello, vamos a dejar nuestro código asi:
\n'use strict';\n\nvar systemInfo = {\n pid: process.pid,\n version: process.version,\n platform: process.platform,\n title: process.title,\n arg: process.argv,\n execPath: process.execPath,\n folder: process.cwd()\n};\n\nprocess.on('exit', () => { console.log('Antes de salir digo BYEEEEEe')})\n\nconsole.log('Id de proceso ' + systemInfo.pid)\nconsole.log('Versión de Node' + systemInfo.version)\nconsole.log('Plataforma ' + systemInfo.platform)\n\nprocess.exit(0);\n\nconsole.log('Nombre de proceso ' + systemInfo.title)\nconsole.log('Argumentos que recibe ' + systemInfo.arg)\nconsole.log('Path de ejecución de proceso '+ systemInfo.execPath)\nconsole.log('Path de ejecución de aplicación de node '+ systemInfo.folder)\n\nSi ahora ejecutamos esto veréis algo similar a esto
\n![\"Log](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-13-at-09.51.57.png\")
\nComo veis nos muestra los tres primeros logs y en cuanto llega al exit se despide y ya no nos muestra más, sencillo verdad?
Este método puede ser una herramienta muy útil para según que cosa, lo que nos permite es asignar una o varias funciones a un evento, es decir, cada vez que llamemos a ese evento se ejecutará su función asignada.
\nVeamoslo con un ejemplo, antes de nada vamos a importar lo que necesitamos para usarlo:
'use strict';\n\nvar events = require('events');\nvar eventEmitter = new events.EventEmitter();\nYa estamos listos, ahora pensemos en cualquier juego de Mario Bros.. Cada vez que nuestro Mario hacia algún tipo de evento distinto a moverse izquierda o derecha emitía un sonido, ya fuera saltar, coger alguna moneda o saltar sobre alguna inocente tortuga, es decir, a nivel de código tiene que tener un método similar a playSound no? Pues vamos a crearlo
\nfunction playSound(){\n console.log("Mario hace algo");\n}\nYa tenemos nuestro método, ahora como hemos comentado esto tiene que responder a algún evento, por lo que vamos a asignarle un nombre de evento a ese método
\neventEmitter.on('play music',playSound);\nPara llamar a ese evento que hemos creado es tan simple como emitirlo
\neventEmitter.emit('play music');\nAsi de simple jejejejeje pero esto realmente si lo pensamos es poco eficiente, con este tendriamos que crear realmente un evento por cada tipo desonido, no?......Pues no realmente, también nos permite pasarle parámetros, vamos a cambiar nuestro método para que reciba un parámetro donde indicariamos el tipo de sonido
\nfunction playSound(action){\n console.log("Mario ",action);\n}\nY hagamos que nuestro emit le pase algún parámetro
\neventEmitter.emit('play music','coge moneda');\nY voilá si ejecutámos veremos que Mario ha cogido una moneda
\n![\"EventEmitter](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-15-at-09.04.01.png\")
\nComentar que podemos suscribir varias funciones al mismo evento, simplemente tendriamos que hacer otro eventEmitter.on con el mismo nombre de evento y otro nombre de función, esto lo que haría seria ejecutar ambos.
\nY es en este punto donde por ejemplo podemos ver mejor su utilidad, si seguimos usando nuestro ejemplo de Mario, supongamos el momento en el que Mario salta sobre una tortuga, esto tendría que gestionar entre otras cosas el sonido al pisar la tortuga, el efecto visual de la tortuga y si esto nos da puntos tendríamos que efectuar la gestión de estos. Son bastantes cosas no?....pero si tenemos todas estas necesidades subscritas al mismo evento, por ejemplo turtleDeath solo tendriamos que hacer
eventEmitter.emit('turtleDeath') \nY listo se ejecutarian todos los eventos y el código quedaría bastante limpio.
\nCreo que más o menos queda todo claro, en el próximo post hablaremos de los módulos de Node y de como crearlos.
\nUn abrazooorrrrr
\n","url":"https://jlgarcia.fulldev.ninja/dont-stop-the-party-node-js-v/","canonical_url":null,"uuid":"1fe4938b-6348-4f8e-b92a-029ec8a1d8ae","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"59b8da9c6c31a60001f69f26","reading_time":4,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"Tras nuestro repaso de algunas características que nos serían útiles de JavaScript, vamos a ver algunas propiedades, métodos o lógicas de NodeJS que nos ayudarán con el desarrollo de servicios en este lenguaje.
\nNode usa un solo hilo, o más bien como concepto de ciclo de vida para nosotros es así, es posible que internamente se ejecute de otra forma pero insisto no para nosotros.
\nEste hilo funciona como un bucle, es decir, lo que hace en cada vuelta es ejecutar el código que le toca en ese momento(todo síncrono), y si se encuentra algún callback lo ejecuta pero, repito pero los va dejando pendientes y comprueba si han terminado en vueltas posteriores y si han terminado entonces ejecúta sus el código pertinente a ese callback.
\nPor este motivo todo el nuestro código en NodeJS tenemos que procurar que sea no bloqueante, si puede bloquear de algúna forma el hilo eso significa que tenemos que hacerlo asíncrono para que el event loop(nuestro único hilo) no se detenga. Todas las llamadas a funciones de entrada/salida lectura/escritura del disco, red, base de datos deberia ser asíncrono.
Process es un objeto global que está disponible en nuestras aplicaciones, el cual nos va a permitir por ejemplo:
\nsaber en que sistema operativo está funcionando,
process.platform;\nparar la ejecución con un código de salida,
\nprocess.exit(int); //0 para salida correcta\nresponder a eventos como este de 'exit' con un callback para hacer algo antes de parar la ejecución
\nprocess.on('exit',callback);\no hacer algo en la siguiente vuelta del event loop
\nprocess.nextTick(function(){\n console.log('Siguiente vueltaaaaaaaaaa')\n}\nEjemplo de información de sistema
\n'use strict';\n\nvar systemInfo = {\n pid: process.pid,\n version: process.version,\n platform: process.platform,\n title: process.title,\n arg: process.argv,\n execPath: process.execPath,\n folder: process.cwd()\n};\n\nconsole.log('Id de proceso ' + systemInfo.pid)\nconsole.log('Versión de Node' + systemInfo.version)\nconsole.log('Plataforma ' + systemInfo.platform)\nconsole.log('Nombre de proceso ' + systemInfo.title)\nconsole.log('Argumentos que recibe ' + systemInfo.arg)\nconsole.log('Path de ejecución de proceso '+ systemInfo.execPath)\nconsole.log('Path de ejecución de aplicación de node '+ systemInfo.folder)\nCon este código vereis varios ejemplos de información que podemos sacar gracias a process.
\nVeamos ahora un ejemplo de exit, para ello vamos poner antes de todos los logs lo siguiente
\nprocess.exit(2);\nSi ahora ejecutais vereis como se finaliza el programa antes de mostrar nada y podéis comprobar el código de salida con
\nEn linux/Mac:
echo $?\nEn Windows:
\necho %errorlevel%\n
Por último vamos a probar a realizar algo justo antes de salir para ello, vamos a dejar nuestro código asi:
\n'use strict';\n\nvar systemInfo = {\n pid: process.pid,\n version: process.version,\n platform: process.platform,\n title: process.title,\n arg: process.argv,\n execPath: process.execPath,\n folder: process.cwd()\n};\n\nprocess.on('exit', () => { console.log('Antes de salir digo BYEEEEEe')})\n\nconsole.log('Id de proceso ' + systemInfo.pid)\nconsole.log('Versión de Node' + systemInfo.version)\nconsole.log('Plataforma ' + systemInfo.platform)\n\nprocess.exit(0);\n\nconsole.log('Nombre de proceso ' + systemInfo.title)\nconsole.log('Argumentos que recibe ' + systemInfo.arg)\nconsole.log('Path de ejecución de proceso '+ systemInfo.execPath)\nconsole.log('Path de ejecución de aplicación de node '+ systemInfo.folder)\n\nSi ahora ejecutamos esto veréis algo similar a esto
\n
\nComo veis nos muestra los tres primeros logs y en cuanto llega al exit se despide y ya no nos muestra más, sencillo verdad?
Este método puede ser una herramienta muy útil para según que cosa, lo que nos permite es asignar una o varias funciones a un evento, es decir, cada vez que llamemos a ese evento se ejecutará su función asignada.
\nVeamoslo con un ejemplo, antes de nada vamos a importar lo que necesitamos para usarlo:
'use strict';\n\nvar events = require('events');\nvar eventEmitter = new events.EventEmitter();\nYa estamos listos, ahora pensemos en cualquier juego de Mario Bros.. Cada vez que nuestro Mario hacia algún tipo de evento distinto a moverse izquierda o derecha emitía un sonido, ya fuera saltar, coger alguna moneda o saltar sobre alguna inocente tortuga, es decir, a nivel de código tiene que tener un método similar a playSound no? Pues vamos a crearlo
\nfunction playSound(){\n console.log(\"Mario hace algo\");\n}\nYa tenemos nuestro método, ahora como hemos comentado esto tiene que responder a algún evento, por lo que vamos a asignarle un nombre de evento a ese método
\neventEmitter.on('play music',playSound);\nPara llamar a ese evento que hemos creado es tan simple como emitirlo
\neventEmitter.emit('play music');\nAsi de simple jejejejeje pero esto realmente si lo pensamos es poco eficiente, con este tendriamos que crear realmente un evento por cada tipo desonido, no?......Pues no realmente, también nos permite pasarle parámetros, vamos a cambiar nuestro método para que reciba un parámetro donde indicariamos el tipo de sonido
\nfunction playSound(action){\n console.log(\"Mario \",action);\n}\nY hagamos que nuestro emit le pase algún parámetro
\neventEmitter.emit('play music','coge moneda');\nY voilá si ejecutámos veremos que Mario ha cogido una moneda
\n
\nComentar que podemos suscribir varias funciones al mismo evento, simplemente tendriamos que hacer otro eventEmitter.on con el mismo nombre de evento y otro nombre de función, esto lo que haría seria ejecutar ambos.
\nY es en este punto donde por ejemplo podemos ver mejor su utilidad, si seguimos usando nuestro ejemplo de Mario, supongamos el momento en el que Mario salta sobre una tortuga, esto tendría que gestionar entre otras cosas el sonido al pisar la tortuga, el efecto visual de la tortuga y si esto nos da puntos tendríamos que efectuar la gestión de estos. Son bastantes cosas no?....pero si tenemos todas estas necesidades subscritas al mismo evento, por ejemplo turtleDeath solo tendriamos que hacer
eventEmitter.emit('turtleDeath') \nY listo se ejecutarian todos los eventos y el código quedaría bastante limpio.
\nCreo que más o menos queda todo claro, en el próximo post hablaremos de los módulos de Node y de como crearlos.
\nUn abrazooorrrrr
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Tras nuestro repaso de algunas características que nos serían útiles de JavaScript, vamos a ver algunas propiedades, métodos o lógicas de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"NodeJS"}]},{"type":"text","value":" que nos ayudarán con el desarrollo de servicios en este lenguaje."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"eventloop"},"children":[{"type":"text","value":"Event Loop"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Node usa un solo hilo, o más bien como concepto de ciclo de vida para nosotros es así, es posible que internamente se ejecute de otra forma pero insisto no para nosotros."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEste hilo funciona como un bucle, es decir, lo que hace en cada vuelta es ejecutar el código que le toca en ese momento(todo síncrono), y si se encuentra algún callback lo ejecuta "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"pero"}]},{"type":"text","value":", repito "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"pero"}]},{"type":"text","value":" los va dejando pendientes y comprueba si han terminado en vueltas posteriores y si han terminado entonces ejecúta sus el código pertinente a ese callback."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPor este motivo todo el nuestro código en "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"NodeJS"}]},{"type":"text","value":" tenemos que procurar que sea no bloqueante, si puede bloquear de algúna forma el hilo eso significa que tenemos que hacerlo asíncrono para que el event loop(nuestro único hilo) no se detenga. Todas las llamadas a funciones de entrada/salida lectura/escritura del disco, red, base de datos deberia ser asíncrono."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"process"},"children":[{"type":"text","value":"Process"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Process es un objeto global que está disponible en nuestras aplicaciones, el cual nos va a permitir por ejemplo:"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nsaber en que sistema operativo está funcionando,"}]},{"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":"process.platform;\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"parar la ejecución con un código de salida,"}]},{"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":"process.exit(int); //0 para salida correcta\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"responder a eventos como este de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"'exit'"}]},{"type":"text","value":" con un callback para hacer algo antes de parar la ejecución"}]},{"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":"process.on('exit',callback);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"o hacer algo en la siguiente vuelta del "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"event loop"}]}]},{"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":"process.nextTick(function(){\n console.log('Siguiente vueltaaaaaaaaaa')\n}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ejemplo de información de sistema"}]},{"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":"'use strict';\n\nvar systemInfo = {\n pid: process.pid,\n version: process.version,\n platform: process.platform,\n title: process.title,\n arg: process.argv,\n execPath: process.execPath,\n folder: process.cwd()\n};\n\nconsole.log('Id de proceso ' + systemInfo.pid)\nconsole.log('Versión de Node' + systemInfo.version)\nconsole.log('Plataforma ' + systemInfo.platform)\nconsole.log('Nombre de proceso ' + systemInfo.title)\nconsole.log('Argumentos que recibe ' + systemInfo.arg)\nconsole.log('Path de ejecución de proceso '+ systemInfo.execPath)\nconsole.log('Path de ejecución de aplicación de node '+ systemInfo.folder)\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Con este código vereis varios ejemplos de información que podemos sacar gracias a process."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos ahora un ejemplo de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"exit"}]},{"type":"text","value":", para ello vamos poner antes de todos los logs lo siguiente"}]},{"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":"process.exit(2);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si ahora ejecutais vereis como se finaliza el programa antes de mostrar nada y podéis comprobar el código de salida con"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEn linux/Mac:"}]},{"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":"echo $?\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En Windows:"}]},{"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":"echo %errorlevel%\n"}]}]}]},{"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-13-at-09.46.31.png","alt":"Error Code"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Por último vamos a probar a realizar algo justo antes de salir para ello, vamos a dejar nuestro código asi:"}]},{"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":"'use strict';\n\nvar systemInfo = {\n pid: process.pid,\n version: process.version,\n platform: process.platform,\n title: process.title,\n arg: process.argv,\n execPath: process.execPath,\n folder: process.cwd()\n};\n\nprocess.on('exit', () => { console.log('Antes de salir digo BYEEEEEe')})\n\nconsole.log('Id de proceso ' + systemInfo.pid)\nconsole.log('Versión de Node' + systemInfo.version)\nconsole.log('Plataforma ' + systemInfo.platform)\n\nprocess.exit(0);\n\nconsole.log('Nombre de proceso ' + systemInfo.title)\nconsole.log('Argumentos que recibe ' + systemInfo.arg)\nconsole.log('Path de ejecución de proceso '+ systemInfo.execPath)\nconsole.log('Path de ejecución de aplicación de node '+ systemInfo.folder)\n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si ahora ejecutamos esto veréis 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/09/Screen-Shot-2017-09-13-at-09.51.57.png","alt":"Log exit event"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComo veis nos muestra los tres primeros logs y en cuanto llega al exit se despide y ya no nos muestra más, sencillo verdad?"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"eventemitter"},"children":[{"type":"text","value":"EventEmitter"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Este método puede ser una herramienta muy útil para según que cosa, lo que nos permite es asignar una o varias funciones a un evento, es decir, cada vez que llamemos a ese evento se ejecutará su función asignada."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVeamoslo con un ejemplo, antes de nada vamos a importar lo que necesitamos para usarlo:"}]},{"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":"'use strict';\n\nvar events = require('events');\nvar eventEmitter = new events.EventEmitter();\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ya estamos listos, ahora pensemos en cualquier juego de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Mario Bros."}]},{"type":"text","value":". Cada vez que nuestro Mario hacia algún tipo de evento distinto a moverse izquierda o derecha emitía un sonido, ya fuera saltar, coger alguna moneda o saltar sobre alguna inocente tortuga, es decir, a nivel de código tiene que tener un método similar a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"playSound"}]},{"type":"text","value":" no? Pues vamos a crearlo"}]},{"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":"function playSound(){\n console.log(\"Mario hace algo\");\n}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ya tenemos nuestro método, ahora como hemos comentado esto tiene que responder a algún evento, por lo que vamos a asignarle un nombre de evento a ese método"}]},{"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":"eventEmitter.on('play music',playSound);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para llamar a ese evento que hemos creado es tan simple como "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"emitirlo"}]}]},{"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":"eventEmitter.emit('play music');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Asi de simple jejejejeje pero esto realmente si lo pensamos es poco eficiente, con este tendriamos que crear realmente un evento por cada tipo desonido, no?......Pues no realmente, también nos permite pasarle parámetros, vamos a cambiar nuestro método para que reciba un parámetro donde indicariamos el tipo de sonido"}]},{"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":"function playSound(action){\n console.log(\"Mario \",action);\n}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y hagamos que nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"emit"}]},{"type":"text","value":" le pase algún parámetro"}]},{"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":"eventEmitter.emit('play music','coge moneda');\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y voilá si ejecutámos veremos que "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Mario ha cogido una moneda"}]},{"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-15-at-09.04.01.png","alt":"EventEmitter example"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComentar que podemos suscribir varias funciones al mismo evento, simplemente tendriamos que hacer otro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"eventEmitter.on"}]},{"type":"text","value":" con el mismo nombre de evento y otro nombre de función, esto lo que haría seria ejecutar ambos."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nY es en este punto donde por ejemplo podemos ver mejor su utilidad, si seguimos usando nuestro ejemplo de Mario, supongamos el momento en el que Mario salta sobre una tortuga, esto tendría que gestionar entre otras cosas el sonido al pisar la tortuga, el efecto visual de la tortuga y si esto nos da puntos tendríamos que efectuar la gestión de estos. Son bastantes cosas no?....pero si tenemos todas estas necesidades subscritas al mismo evento, por ejemplo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"turtleDeath"}]},{"type":"text","value":" solo tendriamos que hacer"}]},{"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":"eventEmitter.emit('turtleDeath') \n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y listo se ejecutarian todos los eventos y el código quedaría bastante limpio."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Creo que más o menos queda todo claro, en el próximo post hablaremos de los "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"módulos"}]},{"type":"text","value":" de Node y de como crearlos."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Un abrazooorrrrr"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"eventloop","heading":"Event Loop"},{"id":"process","heading":"Process"},{"id":"eventemitter","heading":"EventEmitter"}]},"featureImageSharp":{"base":"nodebaner-1.jpg","publicURL":"/static/ebae59fce798d71ce68bf2a304f1491f/nodebaner-1.jpg","imageMeta":{"width":1680,"height":420},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAME/9oADAMBAAIQAxAAAAGrMokzQT//xAAXEAEBAQEAAAAAAAAAAAAAAAACASIh/9oACAEBAAEFAgMKdU1//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAEDAQE/AamP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAECAQE/AV1//8QAFRABAQAAAAAAAAAAAAAAAAAAEHH/2gAIAQEABj8Cr//EABgQAQADAQAAAAAAAAAAAAAAAAEAETEh/9oACAEBAAE/Ido1iddq0QhE/9oADAMBAAIAAwAAABDz/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QbrNxf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxAgav/EABgQAQADAQAAAAAAAAAAAAAAAAEAETFx/9oACAEBAAE/ECLXUGFQ03NnlQ0Zc//Z","aspectRatio":3.977272727272727,"src":"/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner-1.jpg","srcSet":"/static/ebae59fce798d71ce68bf2a304f1491f/477ba/nodebaner-1.jpg 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/06776/nodebaner-1.jpg 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner-1.jpg 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/3055e/nodebaner-1.jpg 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/eff08/nodebaner-1.jpg 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/34c3a/nodebaner-1.jpg 1680w","srcWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner-1.webp","srcSetWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/9fca7/nodebaner-1.webp 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/37a4e/nodebaner-1.webp 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner-1.webp 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/78e7a/nodebaner-1.webp 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/03d34/nodebaner-1.webp 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/41aa5/nodebaner-1.webp 1680w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"next":{"id":"Ghost__Post__5a338158333e0f134c248f2d","title":"Don't stop the party: Node JS(IV) Hablemos un poco de JS (III)","slug":"dont-stop-the-party-node-js-iv-hablemos-un-poco-de-js-iii","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/nodebaner.jpg","excerpt":"Herencia\nEn JavaScript también existe este concepto, con la ayuda de lo que hemos visto\nen el post anterior, los prototypes, para resumir un poco lo que hacemos es\nllamar al \"padre\" del cual queramos heredar(como si llamaramos a super en otros\nlenguajes) y le decimos que cambie su this(su contexto o instancia) por el\nnuestro junto con los parámetros que necesitemos.\nCreo que en este caso es mejor verlo con un ejemplo, para ello vamos a crearnos\nun constructor y luego extenderemos de él.\n\nfunctio","custom_excerpt":null,"visibility":"public","created_at_pretty":"12 Sep 2017","published_at_pretty":"12 Sep 2017","updated_at_pretty":"22 Jan 2018","created_at":"2017-09-12T21:09:36.000+02:00","published_at":"2017-09-12T09:06:00.000+02:00","updated_at":"2018-01-22T09:51:52.000+01:00","meta_title":null,"meta_description":"Continuemos con nuestro repaso a algunos conceptos de JavaScript para poder entender y usar correctamente NodeJS","og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Perfil.jpg","publicURL":"/static/b0de6281fb28a266510b3b09b9243e5a/Perfil.jpg","imageMeta":{"width":307,"height":307},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUDBAb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGzw6zC6zHn+cLYP//EAB0QAAICAQUAAAAAAAAAAAAAAAEDAAIEEyEiIzL/2gAIAQEAAQUCifca8KgcKWVfUpkHsG5pxX//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAdEAACAgEFAAAAAAAAAAAAAAAAARARcQISIUFR/9oACAEBAAY/AhU88xkb7N06a8P/xAAcEAEAAwEAAwEAAAAAAAAAAAABABEhMUFRYXH/2gAIAQEAAT8hR2pq40aqb+xIAeXibhW9JXr8joF4TBcSNe0//9oADAMBAAIAAwAAABDzDwD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhUTFhcfD/2gAIAQEAAT8QyItrELaTlatLwU63MvEW6vUNdy4LZQDn7iVApV9VLtANdWwKkuYq4Er1VZ//2Q==","aspectRatio":1,"src":"/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg","srcSet":"/static/b0de6281fb28a266510b3b09b9243e5a/f340b/Perfil.jpg 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/22d64/Perfil.jpg 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/aa249/Perfil.jpg 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/0dc33/Perfil.jpg 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/60667/Perfil.jpg 307w","srcWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp","srcSetWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/59cda/Perfil.webp 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/7da75/Perfil.webp 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f282e/Perfil.webp 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/a7b21/Perfil.webp 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f59af/Perfil.webp 307w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"nodejs","url":"https://jlgarcia.fulldev.ninja/tag/nodejs/","name":"nodejs","visibility":"public","feature_image":null,"description":null,"meta_title":"NodeJS Ninjas","meta_description":"Aprenderemos desde lo básico este framework de JS para backend, muy bueno en concurrencia y en API Rest y que forma parte del stack MEAN o MERN.","featureImageSharp":null},"tags":[{"slug":"nodejs","url":"https://jlgarcia.fulldev.ninja/tag/nodejs/","name":"nodejs","visibility":"public","feature_image":null,"description":null,"meta_title":"NodeJS Ninjas","meta_description":"Aprenderemos desde lo básico este framework de JS para backend, muy bueno en concurrencia y en API Rest y que forma parte del stack MEAN o MERN.","featureImageSharp":null}],"plaintext":"Herencia\nEn JavaScript también existe este concepto, con la ayuda de lo que hemos visto\nen el post anterior, los prototypes, para resumir un poco lo que hacemos es\nllamar al \"padre\" del cual queramos heredar(como si llamaramos a super en otros\nlenguajes) y le decimos que cambie su this(su contexto o instancia) por el\nnuestro junto con los parámetros que necesitemos.\nCreo que en este caso es mejor verlo con un ejemplo, para ello vamos a crearnos\nun constructor y luego extenderemos de él.\n\nfunction Superhero(alias) {\n this.alias = alias;\n this.getInfo = function () {\n console.log('Nuestro héroe se llama ' + this.alias);\n }\n }\n\n\nEste sería nuestro constructor, vamos a crear un elemento para ver que funciona\n\nvar mr_manhattan = new Superhero('Dr. Manhattan');\n \nmr_manhattan.getInfo();\n\n\nSi ejecutamos esto(recordar con node nombreFicheroJS), veríamos que funciona\n\n\nAhora vamos a crear otra función que herede de la primera, para ello nos valemos\ndel método que tienen todas las funciones call\n\nfunction Hero(alias){\n Superhero.call(this, alias);\n }\n\n\nComo véis le pasamos el this de nuestro método y le pasamos el parámetro de la\nfunción superhero.\nPor último añadimos a los prototipos de la función Hero, un nuevo Superhero para\nque realmente lo herede, y tras esto ya podriamos usar Hero con las propiedades\nde Superhero\n\nHero.prototype = new Superhero('Walter Joseph Kovacs');\n \nvar rorschach = new Hero('Rorschach');\n \nrorschach.getInfo();\n\nconsole.log(Object.getPrototypeOf(rorschach))\nconsole.log('Es una instancia de Hero? ' + (rorschach instanceof Hero))\nconsole.log('Es una instancia de SuperHero? ' + (rorschach instanceof Superhero))\n\n\nNuestro rorschach puede usar los mismos métodos que Superhero, y para\ncomprobarlo he vuesto unos cuantos logs que nos mostrarían cuales son los\nprototypes que tiene, y si es una instancia de cada uno de nuestros\nconstructores\n\n\nHerencia Múltiple\nPodemos simular herencia múltiple aprovechando lo que acabamos de hacer y usando\nel método assign, este método lo que hace es copiar las propiedades de un objeto\nen otro, con lo que el objeto destino puede usarlas como si fueran suyas.\nVeámoslo con un ejemplo continuando con lo anterior.\n\nLo primero vamos a crear otro constructor, en este caso SuperPowers()\n\nfunction SuperPowers(){\n this.superStrength = function(){\n console.log( this.alias + ' tiene super fuerza')\n }\n this.superSpeed = function(){\n console.log( this.alias + ' tiene super velocidad')\n }\n}\n\n\nY a continuación lo que haremos será \"asignarle\" estas propiedades a nuestro \nrorschach\n\nObject.assign(rorschach, new SuperPowers());\n\n\nSimplemente tenemos que usar el método assign de Object y como parámetros le\npasamos la instancia del objeto destino y una instancia del objeto origen, en\neste caso con new SuperPowers()\n\nAhora simplemente podemos comprobar que realmente nuestro rorschach tiene las\npropiedades de SuperPowers\n\nrorschach.superStrength();\nrorschach.superSpeed();\n\n\nAdemás le añadiremos lo mismo que antes para comprobar si es una instancia de \nSuperPowers, quedando así todo el código\n\n//Herencia\n\nfunction Superhero(alias) {\n this.alias = alias;\n this.getInfo = function () {\n console.log('Nuestro héroe se llama ' + this.alias);\n }\n}\n \nvar mr_manhattan = new Superhero('Dr. Manhattan');\n \nmr_manhattan.getInfo();\n \n //Herencia de superhero\nfunction Hero(alias){\n Superhero.call(this, alias);\n}\n \nHero.prototype = new Superhero('Walter Joseph Kovacs');\n \nvar rorschach = new Hero('Rorschach');\n \nrorschach.getInfo();\n\nconsole.log(Object.getPrototypeOf(rorschach))\nconsole.log('Es una instancia de Hero? ' + (rorschach instanceof Hero))\nconsole.log('Es una instancia de SuperHero? ' + (rorschach instanceof Superhero))\n\n//Herencia Múltiple\nfunction SuperPowers(){\n this.superStrength = function(){\n console.log( this.alias + ' tiene super fuerza')\n }\n this.superSpeed = function(){\n console.log( this.alias + ' tiene super velocidad')\n }\n}\n\nObject.assign(rorschach, new SuperPowers());\n\n\nrorschach.superStrength();\nrorschach.superSpeed();\n\nconsole.log('Es una instancia de SuperPowers? ' + (rorschach instanceof SuperPowers));\n\n\nLo que nos daría este resultado\n\n\nAnda!!! Hay algo distinto verdad?? Nos dice que no es una instancia de \nSuperPowers...pero ¿por qué?.. Bueno en este caso es bastante simple, realmente\nlo que hacemos es una copia de propiedades de un elemento a otro, es decir,\nsería como si el constructor de nuestro rorschach hubiera tenido las mismas\npropiedades que SuperPowers.\n\nY hasta aquí el repaso de algunos elementos de JavasScript, a partir del próximo\npost ya empezaremos a ver NodeJS (Por fiiiiiin!!!! ;) )\n\nNos vemoooossssss, un abrazooooooorrrr","html":"En JavaScript también existe este concepto, con la ayuda de lo que hemos visto en el post anterior, los prototypes, para resumir un poco lo que hacemos es llamar al "padre" del cual queramos heredar(como si llamaramos a super en otros lenguajes) y le decimos que cambie su this(su contexto o instancia) por el nuestro junto con los parámetros que necesitemos.
\nCreo que en este caso es mejor verlo con un ejemplo, para ello vamos a crearnos un constructor y luego extenderemos de él.
function Superhero(alias) {\n this.alias = alias;\n this.getInfo = function () {\n console.log('Nuestro héroe se llama ' + this.alias);\n }\n }\nEste sería nuestro constructor, vamos a crear un elemento para ver que funciona
\nvar mr_manhattan = new Superhero('Dr. Manhattan');\n \nmr_manhattan.getInfo();\nSi ejecutamos esto(recordar con node nombreFicheroJS), veríamos que funciona
\n![\"Constructor](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-12-at-21.43.50.png\")
Ahora vamos a crear otra función que herede de la primera, para ello nos valemos del método que tienen todas las funciones call
\nfunction Hero(alias){\n Superhero.call(this, alias);\n }\nComo véis le pasamos el this de nuestro método y le pasamos el parámetro de la función superhero.
\nPor último añadimos a los prototipos de la función Hero, un nuevo Superhero para que realmente lo herede, y tras esto ya podriamos usar Hero con las propiedades de Superhero
Hero.prototype = new Superhero('Walter Joseph Kovacs');\n \nvar rorschach = new Hero('Rorschach');\n \nrorschach.getInfo();\n\nconsole.log(Object.getPrototypeOf(rorschach))\nconsole.log('Es una instancia de Hero? ' + (rorschach instanceof Hero))\nconsole.log('Es una instancia de SuperHero? ' + (rorschach instanceof Superhero))\nNuestro rorschach puede usar los mismos métodos que Superhero, y para comprobarlo he vuesto unos cuantos logs que nos mostrarían cuales son los prototypes que tiene, y si es una instancia de cada uno de nuestros constructores
\n![\"Herence](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-13-at-08.42.43.png\")
Podemos simular herencia múltiple aprovechando lo que acabamos de hacer y usando el método assign, este método lo que hace es copiar las propiedades de un objeto en otro, con lo que el objeto destino puede usarlas como si fueran suyas. Veámoslo con un ejemplo continuando con lo anterior.
\nLo primero vamos a crear otro constructor, en este caso SuperPowers()
\nfunction SuperPowers(){\n this.superStrength = function(){\n console.log( this.alias + ' tiene super fuerza')\n }\n this.superSpeed = function(){\n console.log( this.alias + ' tiene super velocidad')\n }\n}\nY a continuación lo que haremos será "asignarle" estas propiedades a nuestro rorschach
\nObject.assign(rorschach, new SuperPowers());\nSimplemente tenemos que usar el método assign de Object y como parámetros le pasamos la instancia del objeto destino y una instancia del objeto origen, en este caso con new SuperPowers()
\nAhora simplemente podemos comprobar que realmente nuestro rorschach tiene las propiedades de SuperPowers
\nrorschach.superStrength();\nrorschach.superSpeed();\nAdemás le añadiremos lo mismo que antes para comprobar si es una instancia de SuperPowers, quedando así todo el código
\n//Herencia\n\nfunction Superhero(alias) {\n this.alias = alias;\n this.getInfo = function () {\n console.log('Nuestro héroe se llama ' + this.alias);\n }\n}\n \nvar mr_manhattan = new Superhero('Dr. Manhattan');\n \nmr_manhattan.getInfo();\n \n //Herencia de superhero\nfunction Hero(alias){\n Superhero.call(this, alias);\n}\n \nHero.prototype = new Superhero('Walter Joseph Kovacs');\n \nvar rorschach = new Hero('Rorschach');\n \nrorschach.getInfo();\n\nconsole.log(Object.getPrototypeOf(rorschach))\nconsole.log('Es una instancia de Hero? ' + (rorschach instanceof Hero))\nconsole.log('Es una instancia de SuperHero? ' + (rorschach instanceof Superhero))\n\n//Herencia Múltiple\nfunction SuperPowers(){\n this.superStrength = function(){\n console.log( this.alias + ' tiene super fuerza')\n }\n this.superSpeed = function(){\n console.log( this.alias + ' tiene super velocidad')\n }\n}\n\nObject.assign(rorschach, new SuperPowers());\n\n\nrorschach.superStrength();\nrorschach.superSpeed();\n\nconsole.log('Es una instancia de SuperPowers? ' + (rorschach instanceof SuperPowers));\nLo que nos daría este resultado
\n![\"Multiple](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-13-at-09.00.25.png\")
Anda!!! Hay algo distinto verdad?? Nos dice que no es una instancia de SuperPowers...pero ¿por qué?.. Bueno en este caso es bastante simple, realmente lo que hacemos es una copia de propiedades de un elemento a otro, es decir, sería como si el constructor de nuestro rorschach hubiera tenido las mismas propiedades que SuperPowers.
\nY hasta aquí el repaso de algunos elementos de JavasScript, a partir del próximo post ya empezaremos a ver NodeJS (Por fiiiiiin!!!! ;) )
\nNos vemoooossssss, un abrazooooooorrrr
\n","url":"https://jlgarcia.fulldev.ninja/dont-stop-the-party-node-js-iv-hablemos-un-poco-de-js-iii/","canonical_url":null,"uuid":"2605201f-0e02-4e51-bcd4-4a798ba06ba2","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"59b830f06c31a60001f69f23","reading_time":3,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"En JavaScript también existe este concepto, con la ayuda de lo que hemos visto en el post anterior, los prototypes, para resumir un poco lo que hacemos es llamar al \"padre\" del cual queramos heredar(como si llamaramos a super en otros lenguajes) y le decimos que cambie su this(su contexto o instancia) por el nuestro junto con los parámetros que necesitemos.
\nCreo que en este caso es mejor verlo con un ejemplo, para ello vamos a crearnos un constructor y luego extenderemos de él.
function Superhero(alias) {\n this.alias = alias;\n this.getInfo = function () {\n console.log('Nuestro héroe se llama ' + this.alias);\n }\n }\nEste sería nuestro constructor, vamos a crear un elemento para ver que funciona
\nvar mr_manhattan = new Superhero('Dr. Manhattan');\n \nmr_manhattan.getInfo();\nSi ejecutamos esto(recordar con node nombreFicheroJS), veríamos que funciona
\n
Ahora vamos a crear otra función que herede de la primera, para ello nos valemos del método que tienen todas las funciones call
\nfunction Hero(alias){\n Superhero.call(this, alias);\n }\nComo véis le pasamos el this de nuestro método y le pasamos el parámetro de la función superhero.
\nPor último añadimos a los prototipos de la función Hero, un nuevo Superhero para que realmente lo herede, y tras esto ya podriamos usar Hero con las propiedades de Superhero
Hero.prototype = new Superhero('Walter Joseph Kovacs');\n \nvar rorschach = new Hero('Rorschach');\n \nrorschach.getInfo();\n\nconsole.log(Object.getPrototypeOf(rorschach))\nconsole.log('Es una instancia de Hero? ' + (rorschach instanceof Hero))\nconsole.log('Es una instancia de SuperHero? ' + (rorschach instanceof Superhero))\nNuestro rorschach puede usar los mismos métodos que Superhero, y para comprobarlo he vuesto unos cuantos logs que nos mostrarían cuales son los prototypes que tiene, y si es una instancia de cada uno de nuestros constructores
\n
Podemos simular herencia múltiple aprovechando lo que acabamos de hacer y usando el método assign, este método lo que hace es copiar las propiedades de un objeto en otro, con lo que el objeto destino puede usarlas como si fueran suyas. Veámoslo con un ejemplo continuando con lo anterior.
\nLo primero vamos a crear otro constructor, en este caso SuperPowers()
\nfunction SuperPowers(){\n this.superStrength = function(){\n console.log( this.alias + ' tiene super fuerza')\n }\n this.superSpeed = function(){\n console.log( this.alias + ' tiene super velocidad')\n }\n}\nY a continuación lo que haremos será \"asignarle\" estas propiedades a nuestro rorschach
\nObject.assign(rorschach, new SuperPowers());\nSimplemente tenemos que usar el método assign de Object y como parámetros le pasamos la instancia del objeto destino y una instancia del objeto origen, en este caso con new SuperPowers()
\nAhora simplemente podemos comprobar que realmente nuestro rorschach tiene las propiedades de SuperPowers
\nrorschach.superStrength();\nrorschach.superSpeed();\nAdemás le añadiremos lo mismo que antes para comprobar si es una instancia de SuperPowers, quedando así todo el código
\n//Herencia\n\nfunction Superhero(alias) {\n this.alias = alias;\n this.getInfo = function () {\n console.log('Nuestro héroe se llama ' + this.alias);\n }\n}\n \nvar mr_manhattan = new Superhero('Dr. Manhattan');\n \nmr_manhattan.getInfo();\n \n //Herencia de superhero\nfunction Hero(alias){\n Superhero.call(this, alias);\n}\n \nHero.prototype = new Superhero('Walter Joseph Kovacs');\n \nvar rorschach = new Hero('Rorschach');\n \nrorschach.getInfo();\n\nconsole.log(Object.getPrototypeOf(rorschach))\nconsole.log('Es una instancia de Hero? ' + (rorschach instanceof Hero))\nconsole.log('Es una instancia de SuperHero? ' + (rorschach instanceof Superhero))\n\n//Herencia Múltiple\nfunction SuperPowers(){\n this.superStrength = function(){\n console.log( this.alias + ' tiene super fuerza')\n }\n this.superSpeed = function(){\n console.log( this.alias + ' tiene super velocidad')\n }\n}\n\nObject.assign(rorschach, new SuperPowers());\n\n\nrorschach.superStrength();\nrorschach.superSpeed();\n\nconsole.log('Es una instancia de SuperPowers? ' + (rorschach instanceof SuperPowers));\nLo que nos daría este resultado
\n
Anda!!! Hay algo distinto verdad?? Nos dice que no es una instancia de SuperPowers...pero ¿por qué?.. Bueno en este caso es bastante simple, realmente lo que hacemos es una copia de propiedades de un elemento a otro, es decir, sería como si el constructor de nuestro rorschach hubiera tenido las mismas propiedades que SuperPowers.
\nY hasta aquí el repaso de algunos elementos de JavasScript, a partir del próximo post ya empezaremos a ver NodeJS (Por fiiiiiin!!!! ;) )
\nNos vemoooossssss, un abrazooooooorrrr
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"h2","properties":{"id":"herencia"},"children":[{"type":"text","value":"Herencia"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En JavaScript también existe este concepto, con la ayuda de lo que hemos visto en el post anterior, "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"los prototypes"}]},{"type":"text","value":", para resumir un poco lo que hacemos es llamar al "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"\"padre\""}]},{"type":"text","value":" del cual queramos heredar(como si llamaramos a super en otros lenguajes) y le decimos que cambie su "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"this"}]},{"type":"text","value":"(su contexto o instancia) por el nuestro junto con los parámetros que necesitemos."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nCreo que en este caso es mejor verlo con un ejemplo, para ello vamos a crearnos un constructor y luego extenderemos de él."}]},{"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":"function Superhero(alias) {\n this.alias = alias;\n this.getInfo = function () {\n console.log('Nuestro héroe se llama ' + this.alias);\n }\n }\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Este sería nuestro constructor, vamos a crear un elemento para ver que funciona"}]},{"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":"var mr_manhattan = new Superhero('Dr. Manhattan');\n \nmr_manhattan.getInfo();\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si ejecutamos esto(recordar con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"node nombreFicheroJS"}]},{"type":"text","value":"), veríamos que funciona"},{"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-12-at-21.43.50.png","alt":"Constructor example"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora vamos a crear otra función que herede de la primera, para ello nos valemos del método que tienen todas las funciones "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"call"}]}]},{"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":"function Hero(alias){\n Superhero.call(this, alias);\n }\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como véis le pasamos el this de nuestro método y le pasamos el parámetro de la función superhero."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPor último añadimos a los prototipos de la función Hero, un nuevo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Superhero"}]},{"type":"text","value":" para que realmente lo herede, y tras esto ya podriamos usar "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Hero"}]},{"type":"text","value":" con las propiedades de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Superhero"}]}]},{"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":"Hero.prototype = new Superhero('Walter Joseph Kovacs');\n \nvar rorschach = new Hero('Rorschach');\n \nrorschach.getInfo();\n\nconsole.log(Object.getPrototypeOf(rorschach))\nconsole.log('Es una instancia de Hero? ' + (rorschach instanceof Hero))\nconsole.log('Es una instancia de SuperHero? ' + (rorschach instanceof Superhero))\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"rorschach"}]},{"type":"text","value":" puede usar los mismos métodos que "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Superhero"}]},{"type":"text","value":", y para comprobarlo he vuesto unos cuantos logs que nos mostrarían cuales son los prototypes que tiene, y si es una instancia de cada uno de nuestros constructores"},{"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-13-at-08.42.43.png","alt":"Herence check logs"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"herenciamltiple"},"children":[{"type":"text","value":"Herencia Múltiple"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Podemos simular herencia múltiple aprovechando lo que acabamos de hacer y usando el método "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"assign"}]},{"type":"text","value":", este método lo que hace es copiar las propiedades de un objeto en otro, con lo que el objeto destino puede usarlas como si fueran suyas. Veámoslo con un ejemplo continuando con lo anterior."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo primero vamos a crear otro constructor, en este caso "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"SuperPowers()"}]}]},{"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":"function SuperPowers(){\n this.superStrength = function(){\n console.log( this.alias + ' tiene super fuerza')\n }\n this.superSpeed = function(){\n console.log( this.alias + ' tiene super velocidad')\n }\n}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y a continuación lo que haremos será "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"\"asignarle\""}]},{"type":"text","value":" estas propiedades a nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"rorschach"}]}]},{"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":"Object.assign(rorschach, new SuperPowers());\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Simplemente tenemos que usar el método "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"assign"}]},{"type":"text","value":" de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Object"}]},{"type":"text","value":" y como parámetros le pasamos la instancia del objeto destino y una instancia del objeto origen, en este caso con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"new SuperPowers()"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora simplemente podemos comprobar que realmente nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"rorschach"}]},{"type":"text","value":" tiene las propiedades de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"SuperPowers"}]}]},{"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":"rorschach.superStrength();\nrorschach.superSpeed();\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Además le añadiremos lo mismo que antes para comprobar si es una instancia de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"SuperPowers"}]},{"type":"text","value":", quedando así todo el código"}]},{"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":"//Herencia\n\nfunction Superhero(alias) {\n this.alias = alias;\n this.getInfo = function () {\n console.log('Nuestro héroe se llama ' + this.alias);\n }\n}\n \nvar mr_manhattan = new Superhero('Dr. Manhattan');\n \nmr_manhattan.getInfo();\n \n //Herencia de superhero\nfunction Hero(alias){\n Superhero.call(this, alias);\n}\n \nHero.prototype = new Superhero('Walter Joseph Kovacs');\n \nvar rorschach = new Hero('Rorschach');\n \nrorschach.getInfo();\n\nconsole.log(Object.getPrototypeOf(rorschach))\nconsole.log('Es una instancia de Hero? ' + (rorschach instanceof Hero))\nconsole.log('Es una instancia de SuperHero? ' + (rorschach instanceof Superhero))\n\n//Herencia Múltiple\nfunction SuperPowers(){\n this.superStrength = function(){\n console.log( this.alias + ' tiene super fuerza')\n }\n this.superSpeed = function(){\n console.log( this.alias + ' tiene super velocidad')\n }\n}\n\nObject.assign(rorschach, new SuperPowers());\n\n\nrorschach.superStrength();\nrorschach.superSpeed();\n\nconsole.log('Es una instancia de SuperPowers? ' + (rorschach instanceof SuperPowers));\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo que nos daría este resultado"},{"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-13-at-09.00.25.png","alt":"Multiple Herence"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Anda!!! Hay algo distinto verdad?? Nos dice que no es una instancia de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"SuperPowers"}]},{"type":"text","value":"...pero ¿por qué?.. Bueno en este caso es bastante simple, realmente lo que hacemos es una copia de propiedades de un elemento a otro, es decir, sería como si el constructor de nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"rorschach"}]},{"type":"text","value":" hubiera tenido las mismas propiedades que "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"SuperPowers"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y hasta aquí el repaso de algunos elementos de JavasScript, a partir del próximo post ya empezaremos a ver "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"NodeJS"}]},{"type":"text","value":" (Por fiiiiiin!!!! ;) )"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Nos vemoooossssss, un abrazooooooorrrr"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"herencia","heading":"Herencia"},{"id":"herenciamltiple","heading":"Herencia Múltiple"}]},"featureImageSharp":{"base":"nodebaner.jpg","publicURL":"/static/ebae59fce798d71ce68bf2a304f1491f/nodebaner.jpg","imageMeta":{"width":1680,"height":420},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAME/9oADAMBAAIQAxAAAAGrMokzQT//xAAXEAEBAQEAAAAAAAAAAAAAAAACASIh/9oACAEBAAEFAgMKdU1//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAEDAQE/AamP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEx/9oACAECAQE/AV1//8QAFRABAQAAAAAAAAAAAAAAAAAAEHH/2gAIAQEABj8Cr//EABgQAQADAQAAAAAAAAAAAAAAAAEAETEh/9oACAEBAAE/Ido1iddq0QhE/9oADAMBAAIAAwAAABDz/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QbrNxf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxAgav/EABgQAQADAQAAAAAAAAAAAAAAAAEAETFx/9oACAEBAAE/ECLXUGFQ03NnlQ0Zc//Z","aspectRatio":3.977272727272727,"src":"/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner.jpg","srcSet":"/static/ebae59fce798d71ce68bf2a304f1491f/477ba/nodebaner.jpg 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/06776/nodebaner.jpg 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/ea4ab/nodebaner.jpg 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/3055e/nodebaner.jpg 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/eff08/nodebaner.jpg 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/34c3a/nodebaner.jpg 1680w","srcWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner.webp","srcSetWebp":"/static/ebae59fce798d71ce68bf2a304f1491f/9fca7/nodebaner.webp 175w,\n/static/ebae59fce798d71ce68bf2a304f1491f/37a4e/nodebaner.webp 350w,\n/static/ebae59fce798d71ce68bf2a304f1491f/89afa/nodebaner.webp 700w,\n/static/ebae59fce798d71ce68bf2a304f1491f/78e7a/nodebaner.webp 1050w,\n/static/ebae59fce798d71ce68bf2a304f1491f/03d34/nodebaner.webp 1400w,\n/static/ebae59fce798d71ce68bf2a304f1491f/41aa5/nodebaner.webp 1680w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"allGhostPost":{"edges":[{"node":{"id":"Ghost__Post__5a338158333e0f134c248f29","title":"React Superhero (IV): Estructura de proyecto base","slug":"react-superhero-iv","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Captain-Atom.jpg","excerpt":"En el post anterior creamos un proyecto de React usando el CLI que nos\nproporcionan los creadores del mismo. Esta herramienta de linea de comandos nos\ncrea un proyecto base desde el que partir y como vimos cuando usamos npm start \npara arrancar nuestro servidor de desarrollo, la herramienta nos muestra una\npágina similar a esta:\n\n\n\nVeamos un poco la estructura del proyecto y desde donde podemos empezar a\ntrabajar.\nLo primero veamos lo que tenemos:\n\n\nEn lo primero que nos tenemos que fijar es en ","custom_excerpt":null,"visibility":"public","created_at_pretty":"4 Sep 2017","published_at_pretty":"7 Sep 2017","updated_at_pretty":"22 Jan 2018","created_at":"2017-09-04T09:21:09.000+02:00","published_at":"2017-09-07T10:26:00.000+02:00","updated_at":"2018-01-22T09:54:03.000+01:00","meta_title":null,"meta_description":"Veamos la estructura básica de proyecto que se nos crea cuando utilizamos el CLI para crear proyectos de ReactJS","og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Perfil.jpg","publicURL":"/static/b0de6281fb28a266510b3b09b9243e5a/Perfil.jpg","imageMeta":{"width":307,"height":307},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUDBAb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGzw6zC6zHn+cLYP//EAB0QAAICAQUAAAAAAAAAAAAAAAEDAAIEEyEiIzL/2gAIAQEAAQUCifca8KgcKWVfUpkHsG5pxX//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAdEAACAgEFAAAAAAAAAAAAAAAAARARcQISIUFR/9oACAEBAAY/AhU88xkb7N06a8P/xAAcEAEAAwEAAwEAAAAAAAAAAAABABEhMUFRYXH/2gAIAQEAAT8hR2pq40aqb+xIAeXibhW9JXr8joF4TBcSNe0//9oADAMBAAIAAwAAABDzDwD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhUTFhcfD/2gAIAQEAAT8QyItrELaTlatLwU63MvEW6vUNdy4LZQDn7iVApV9VLtANdWwKkuYq4Er1VZ//2Q==","aspectRatio":1,"src":"/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg","srcSet":"/static/b0de6281fb28a266510b3b09b9243e5a/f340b/Perfil.jpg 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/22d64/Perfil.jpg 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/aa249/Perfil.jpg 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/0dc33/Perfil.jpg 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/60667/Perfil.jpg 307w","srcWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp","srcSetWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/59cda/Perfil.webp 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/7da75/Perfil.webp 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f282e/Perfil.webp 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/a7b21/Perfil.webp 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f59af/Perfil.webp 307w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"reactjs","url":"https://jlgarcia.fulldev.ninja/tag/reactjs/","name":"reactjs","visibility":"public","feature_image":null,"description":null,"meta_title":"ReactJS Ninjas","meta_description":"Aprenderemos a usar esta estupenda librería que nos permite desarrollar con un estilo basado en componentes y centrándonse en tener los datos sincronizados","featureImageSharp":null},"tags":[{"slug":"reactjs","url":"https://jlgarcia.fulldev.ninja/tag/reactjs/","name":"reactjs","visibility":"public","feature_image":null,"description":null,"meta_title":"ReactJS Ninjas","meta_description":"Aprenderemos a usar esta estupenda librería que nos permite desarrollar con un estilo basado en componentes y centrándonse en tener los datos sincronizados","featureImageSharp":null}],"plaintext":"En el post anterior creamos un proyecto de React usando el CLI que nos\nproporcionan los creadores del mismo. Esta herramienta de linea de comandos nos\ncrea un proyecto base desde el que partir y como vimos cuando usamos npm start \npara arrancar nuestro servidor de desarrollo, la herramienta nos muestra una\npágina similar a esta:\n\n\n\nVeamos un poco la estructura del proyecto y desde donde podemos empezar a\ntrabajar.\nLo primero veamos lo que tenemos:\n\n\nEn lo primero que nos tenemos que fijar es en los index tanto el js, como el \nhtml, ya que son desde donde se empieza a llamar al resto. Si miramos el \nindex.html tenemos una pagina html con varios tags pero lo que nos importa\nrealmente es algo que ya hemos visto:\n\n \n\n\nRecordemos que es en ese punto donde se empieza a componer nuestra aplicación.\n\nLo siguiente miremos dentro de la carpeta src y veamos el index.js que aqui\ntenemos varias cosas interesantes:\n\nimport 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
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"}}}}},{"node":{"id":"Ghost__Post__5a338158333e0f134c248f1c","title":"React Superhero (II): Cambios entre componentes","slug":"react-js-ii-cambios-entre-componentes","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Captain-Atom.jpg","excerpt":"En este post veremos como pasar datos o más bien como comunicarnos entre\ncomponentes. Para ello partiendo de lo que tenemos del post anterior:\n\n\n\n \n \n0
\n \n{this.props.number}
\n \n{this.props.number}
\n\n\n\nY ya lo tenemos si ahora recargamos nuestra página tendremos lo siguiente, con\nun número que crece cada vez que lo pulsamos:\n\nY como podréis comprobar el componente del post anterior también funciona.\nPara asentar un poco y confirmar que un componente realmente se comunica con\notro, vamos a añadir lo siguiente en el componente principal:\n\nEn este post veremos como pasar datos o más bien como comunicarnos entre componentes. Para ello partiendo de lo que tenemos del post anterior:
\n<!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 constructor(){\n super();\n }\n\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 constructor(){\n super();\n this.state = {\n nombre: "Your Super Name"\n }\n }\n getName(input){\n this.setState({nombre: input.target.value});\n }\n\n\n render(){\n return (\n <div>\n <h2>REACT is in the HOUSE...YEAH!!!!</h2>\n <input onChange={this.getName.bind(this)}></input>\n <h4> { this.state.nombre } </h4>\n </div>\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>\nVamos a crear otro componente que usaremos para hacer que un numero aumente, es decir vamos a sumarle uno, es un ejemplo muy simple pero suficiente para ver los conceptos que queremos, por el momento lo primero sera crear el componente con un botón y un elemento para mostrar el nùmero
\nclass PlusOneNumber extends React.Component {\n render(){\n return (\n <div>\n <p>0</p>\n <button>AumentarNumero</button>\n </div>\n )\n }\n}\nBien y lo ponemos en nuestro componente principal para que lo muestre, a continuación del que era MiSegundoComponente:
\nrender(){\n return (\n <div>\n <h2>Hello with React</h2>\n <MiSegundoComponente/>\n <PlusOneNumber/>\n </div>\n );\n }\nBien ahora mismo ya se tendría que mostrar, pero esto como tal no hace nada ni el botón ni el 0, vamos a empezar a darle "vida" a nuestro componente en conjunto con el componente principal.
\nLo primero que hacemos es crear un constructor con una propiedad en el componente principal, algo así:
class SuperComponente extends React.Component{\n constructor(){\n super();\n this.state = {\n number: 0\n }\n }\n\n render(){\n return (\n <div>\n <h2>Hello with React</h2>\n <MiSegundoComponente/>\n <PlusOneNumber/>\n </div>\n );\n }\n}\nLo que tenemos dentro de this.state será lo que iremos cambiando cada vez que pulsemos el botón, es decir la idea es que el componente PlusOneNumber tome el valor de número desde el componente principal y le sume uno. ¿Pero como empezamos con esto?
\nLo primero es pasar el valor desde el componente principal a nuestro componente que realiza la suma, para ello es tan simple como "pasarselo como una propiedad al componente":
\n<h2>Hello with React</h2>\n<MiSegundoComponente/>\n<PlusOneNumber number={this.state.number}/>\nCon esto lo mandamos al componente, y para acceder a este número desde nuestro componente auxiliar:
\nclass PlusOneNumber extends React.Component {\n render(){\n return (\n <div>\n <p>{this.props.number}</p>\n <button>AumentarNumero</button>\n </div>\n )\n }\n}\nComo veis es suficiente con acceder a las propiedades de this en lugar de a su estado. Si ahora cargáis de nuevo la página veréis que todo sigue "igual", o casi, la diferencia es que ya está cogiendo el número desde el componente principal.
\nSiguiente paso, Aumentar el número, para ello lanzo una pregunta, ¿creéis que ahora que tenemos acceso podemos modificar esa propiedad en nuestro componente? Y hablo directamente la propiedad no de hacer un +1 en conjunto del this.props.number, ni tampoco de asignarla a una propiedad de este componente y trabajar desde aquí, me refiero a directamente modificar esa propiedad.....Pues No, y ¿por qué?, pues porque realmente el dueño o propietario de ese objeto es el componente principal no nuestro componente que realiza la suma. Es como si en POO tuviéramos una variable de clase que para cambiarla necesitamos usar un método setter(más o menos) y con esta pista veamos que tenemos que hacer para crear nuestro "setter".
\nPrimero creamos una función en nuestro componente principal que realizará la suma:
\nplusOne(){\n this.setState({number: this.state.number + 1 })\n}\nComo hemos comentado anteriormente usamos setState para cambiar valores y simplemente le sumamos uno.
\nA continuación queremos que el button haga algo, por lo que tendríamos que indicarle un onClick en algún sitio como suele ser en asuntos relacionados con JS y queremos que ese onClick de alguna manera use el método plusOne(), pero ¿como hacemos que nuestro componente auxiliar pueda usar ese método? Pues de la misma manera que hemos conseguido que reciba la propiedad número, lo único que en lugar de pasarle una propiedad o un estado le pasamos una función:
<MiSegundoComponente/>\n<PlusOneNumber number={this.state.number} funAumentar={this.plusOne.bind(this)}/>\nAhora la propiedad funAumentar contiene la función o método plusOne y recordemos que es necesario "enlazar"(bind) el contexto en el que trabajamos(el this vamos) para que todos tengan la información que necesitan, y por ultimo solo necesitamos decirle al button lo que tiene que hacer cuando lo pulsen en su propiedad onClick:
\n<p>{this.props.number}</p>\n<button onClick={this.props.funAumentar}>AumentarNumero</button>\nY ya lo tenemos si ahora recargamos nuestra página tendremos lo siguiente, con un número que crece cada vez que lo pulsamos:
\n![\"PlusOne](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-02-at-22.03.14.png\")
\nY como podréis comprobar el componente del post anterior también funciona.
\nPara asentar un poco y confirmar que un componente realmente se comunica con otro, vamos a añadir lo siguiente en el componente principal:
<h2>Hello with React</h2>\n <MiSegundoComponente/>\n <PlusOneNumber number={this.state.number} funAumentar={this.plusOne.bind(this)}/>\n <h4>{this.state.number}</h4>\nComo veis he puesto directamente la propiedad number que tiene nuestro SuperCompomente, para que veaís que realmente si se esta modificando el número de este componente:
\n![\"Components](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-02-at-22.16.33.png\")
\nBueno como veis es relativamente sencillo compartir información entre componentes, en los próximos post ya empezaremos a ponernos más serios.
\nNos vemooosssss
En este post veremos como pasar datos o más bien como comunicarnos entre componentes. Para ello partiendo de lo que tenemos del post anterior:
\n<!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 constructor(){\n super();\n }\n\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 constructor(){\n super();\n this.state = {\n nombre: \"Your Super Name\"\n }\n }\n getName(input){\n this.setState({nombre: input.target.value});\n }\n\n\n render(){\n return (\n <div>\n <h2>REACT is in the HOUSE...YEAH!!!!</h2>\n <input onChange={this.getName.bind(this)}></input>\n <h4> { this.state.nombre } </h4>\n </div>\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>\nVamos a crear otro componente que usaremos para hacer que un numero aumente, es decir vamos a sumarle uno, es un ejemplo muy simple pero suficiente para ver los conceptos que queremos, por el momento lo primero sera crear el componente con un botón y un elemento para mostrar el nùmero
\nclass PlusOneNumber extends React.Component {\n render(){\n return (\n <div>\n <p>0</p>\n <button>AumentarNumero</button>\n </div>\n )\n }\n}\nBien y lo ponemos en nuestro componente principal para que lo muestre, a continuación del que era MiSegundoComponente:
\nrender(){\n return (\n <div>\n <h2>Hello with React</h2>\n <MiSegundoComponente/>\n <PlusOneNumber/>\n </div>\n );\n }\nBien ahora mismo ya se tendría que mostrar, pero esto como tal no hace nada ni el botón ni el 0, vamos a empezar a darle \"vida\" a nuestro componente en conjunto con el componente principal.
\nLo primero que hacemos es crear un constructor con una propiedad en el componente principal, algo así:
class SuperComponente extends React.Component{\n constructor(){\n super();\n this.state = {\n number: 0\n }\n }\n\n render(){\n return (\n <div>\n <h2>Hello with React</h2>\n <MiSegundoComponente/>\n <PlusOneNumber/>\n </div>\n );\n }\n}\nLo que tenemos dentro de this.state será lo que iremos cambiando cada vez que pulsemos el botón, es decir la idea es que el componente PlusOneNumber tome el valor de número desde el componente principal y le sume uno. ¿Pero como empezamos con esto?
\nLo primero es pasar el valor desde el componente principal a nuestro componente que realiza la suma, para ello es tan simple como \"pasarselo como una propiedad al componente\":
\n<h2>Hello with React</h2>\n<MiSegundoComponente/>\n<PlusOneNumber number={this.state.number}/>\nCon esto lo mandamos al componente, y para acceder a este número desde nuestro componente auxiliar:
\nclass PlusOneNumber extends React.Component {\n render(){\n return (\n <div>\n <p>{this.props.number}</p>\n <button>AumentarNumero</button>\n </div>\n )\n }\n}\nComo veis es suficiente con acceder a las propiedades de this en lugar de a su estado. Si ahora cargáis de nuevo la página veréis que todo sigue \"igual\", o casi, la diferencia es que ya está cogiendo el número desde el componente principal.
\nSiguiente paso, Aumentar el número, para ello lanzo una pregunta, ¿creéis que ahora que tenemos acceso podemos modificar esa propiedad en nuestro componente? Y hablo directamente la propiedad no de hacer un +1 en conjunto del this.props.number, ni tampoco de asignarla a una propiedad de este componente y trabajar desde aquí, me refiero a directamente modificar esa propiedad.....Pues No, y ¿por qué?, pues porque realmente el dueño o propietario de ese objeto es el componente principal no nuestro componente que realiza la suma. Es como si en POO tuviéramos una variable de clase que para cambiarla necesitamos usar un método setter(más o menos) y con esta pista veamos que tenemos que hacer para crear nuestro \"setter\".
\nPrimero creamos una función en nuestro componente principal que realizará la suma:
\nplusOne(){\n this.setState({number: this.state.number + 1 })\n}\nComo hemos comentado anteriormente usamos setState para cambiar valores y simplemente le sumamos uno.
\nA continuación queremos que el button haga algo, por lo que tendríamos que indicarle un onClick en algún sitio como suele ser en asuntos relacionados con JS y queremos que ese onClick de alguna manera use el método plusOne(), pero ¿como hacemos que nuestro componente auxiliar pueda usar ese método? Pues de la misma manera que hemos conseguido que reciba la propiedad número, lo único que en lugar de pasarle una propiedad o un estado le pasamos una función:
<MiSegundoComponente/>\n<PlusOneNumber number={this.state.number} funAumentar={this.plusOne.bind(this)}/>\nAhora la propiedad funAumentar contiene la función o método plusOne y recordemos que es necesario \"enlazar\"(bind) el contexto en el que trabajamos(el this vamos) para que todos tengan la información que necesitan, y por ultimo solo necesitamos decirle al button lo que tiene que hacer cuando lo pulsen en su propiedad onClick:
\n<p>{this.props.number}</p>\n<button onClick={this.props.funAumentar}>AumentarNumero</button>\nY ya lo tenemos si ahora recargamos nuestra página tendremos lo siguiente, con un número que crece cada vez que lo pulsamos:
\n
\nY como podréis comprobar el componente del post anterior también funciona.
\nPara asentar un poco y confirmar que un componente realmente se comunica con otro, vamos a añadir lo siguiente en el componente principal:
<h2>Hello with React</h2>\n <MiSegundoComponente/>\n <PlusOneNumber number={this.state.number} funAumentar={this.plusOne.bind(this)}/>\n <h4>{this.state.number}</h4>\nComo veis he puesto directamente la propiedad number que tiene nuestro SuperCompomente, para que veaís que realmente si se esta modificando el número de este componente:
\n
\nBueno como veis es relativamente sencillo compartir información entre componentes, en los próximos post ya empezaremos a ponernos más serios.
\nNos vemooosssss
0
\n \n{this.props.number}
\n \n{this.props.number}
\n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y ya lo tenemos si ahora recargamos nuestra página tendremos lo siguiente, con un número que crece cada vez que lo pulsamos:"},{"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-02-at-22.03.14.png","alt":"PlusOne Works!!"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nY como podréis comprobar el componente del post anterior también funciona."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPara asentar un poco y confirmar que un componente realmente se comunica con otro, vamos a añadir lo siguiente en el componente principal:"}]},{"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":"