![\"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 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![\"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.3333333333333333,"src":"/static/ea41313c22f611d45d277d453c4273d1/fc1a6/Captain-Atom.jpg","srcSet":"/static/ea41313c22f611d45d277d453c4273d1/65d8c/Captain-Atom.jpg 260w,\n/static/ea41313c22f611d45d277d453c4273d1/c5f21/Captain-Atom.jpg 520w,\n/static/ea41313c22f611d45d277d453c4273d1/fc1a6/Captain-Atom.jpg 864w","srcWebp":"/static/ea41313c22f611d45d277d453c4273d1/65e54/Captain-Atom.webp","srcSetWebp":"/static/ea41313c22f611d45d277d453c4273d1/dc8f3/Captain-Atom.webp 260w,\n/static/ea41313c22f611d45d277d453c4273d1/2db4b/Captain-Atom.webp 520w,\n/static/ea41313c22f611d45d277d453c4273d1/65e54/Captain-Atom.webp 864w","sizes":"(max-width: 864px) 100vw, 864px"}}}},"prev":{"id":"Ghost__Post__5a338158333e0f134c248f21","title":"Don't stop the party: Node JS(III) Hablemos un poco de JS (II)","slug":"node-js-iii-hablemos-un-poco-de-js-ii","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/08/nodebaner.jpg","excerpt":"Closures\nUn closure es una función que devuelve otra función, teniendo la segunda acceso\na los datos de la primera, es decir comparten contexto.\nVeamos un ejemplo sencillo\n\nfunction heroName(surname){\n return function(name){\n console.log(name + ' ' + surname);\n }\n}\nvar dr_Manhattan = heroName('Osterman');\n\nconsole.log(dr_Manhattan('Jon'));\n\n\nComo veis el concepto es bastante sencillo, lo primero instanciamos heroName con\nsu parámetro surname como Osterman, eso lo que hace es asignar la func","custom_excerpt":null,"visibility":"public","created_at_pretty":"11 Aug 2017","published_at_pretty":"4 Sep 2017","updated_at_pretty":"22 Jan 2018","created_at":"2017-08-11T08:44:03.000+02:00","published_at":"2017-09-04T10:06:00.000+02:00","updated_at":"2018-01-22T09:55:21.000+01:00","meta_title":null,"meta_description":"Hablaremos de las Closures o clausuras en JavaScript y de lo que se conoce como herencia prototípica","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":"Closures\nUn closure es una función que devuelve otra función, teniendo la segunda acceso\na los datos de la primera, es decir comparten contexto.\nVeamos un ejemplo sencillo\n\nfunction heroName(surname){\n return function(name){\n console.log(name + ' ' + surname);\n }\n}\nvar dr_Manhattan = heroName('Osterman');\n\nconsole.log(dr_Manhattan('Jon'));\n\n\nComo veis el concepto es bastante sencillo, lo primero instanciamos heroName con\nsu parámetro surname como Osterman, eso lo que hace es asignar la función que\nretorna a la variable dr_Manhattan, por lo que ahora mismo dr_Manhattan se ha\nconvertido en un método que espera recibir un nombre por parámetro y que en su\ncontexto tiene acceso al parámetro surname.\nTambien podemos devolver varias funciones no solo una, vamos a cambiar un poco\nnuestra función de retorno:\n\nfunction heroName(surname){\n return { \n getHeroData: function(name){\n console.log(name + ' ' + surname);\n },\n setHeroNewName: function(newName){\n name = newName;\n },\n setHewNewSurname: function(newSurname){\n surname = newSurname;\n }\n }\n}\n\n\nAhora ya no podemos usarla igual que antes, estamos devolviendo objetos, por lo\nque tenemos que llamarlos. Lo primero vamos a usar la que seria homónima a la de\nantes, se decir después de la nueva función ponemos\n\nvar dr_Manhattan = heroName('Osterman');\ndr_Manhattan.setHeroNewName('Jon');\ndr_Manhattan.getHeroData();\n\n\nEsta nos devuelve lo mismo de antes. Como vemos ahora la variable dr_Manhattan \nfunciona como una clase con varios métodos(en este caso lo hemos planteado como\nmétodos GETTER y SETTER). Ahora vamos a ver que pasa si usamos el resto,\nañadimos a continuación:\n\ndr_Manhattan.setHeroNewName('Doctor');\ndr_Manhattan.setHewNewSurname('Manhattan');\ndr_Manhattan.getHeroData();\n\n\nCon obtendríamos estos resultados:\n\nComo vemos hemos creado una especie de constructor Héroes de una manera\nrelativamente sencilla.\n\nPrototypes\nBien lo siguiente que veremos serán los prototypes. ¿Que es un prototype? Un\nprototype es una propiedad que tienen todos los objetos de JavaScript(y como\ncasi todo es considerado un objeto son muchas cosas jejejej) y que comparten los\nque son del mismo del mismo tipo aunque ya hayan sido creados. Dentro de un\nprototype podemos tener casi de todo. Veamos un ejemplo:\n\n//Tenemos un constructor en este caso de clones\n//del Dr.Manhattan\nfunction dr_Manhattan_Clone(cloneNumber){\n this.cloneName = 'clon' + cloneNumber;\n}\n\n\nPara que veamos que este constructor (que es un objeto) ya tiene la propiedad \nprototype hagamos un console.log para ver que tiene\n\nconsole.log(dr_Manhattan_Clone.prototype)\n\n\nEsto nos mostrará\n\nNo tiene nada pero hemos comprobado que por lo menos no da error, es decir, que \nes una propiedad válida de nuestro objeto\nAhora creemos un par de clones y mostremos su nombre o número de clon\n\nvar cloneOne = new dr_Manhattan_Clone(1);\nvar cloneTwo = new dr_Manhattan_Clone(2);\n\nconsole.log(cloneOne.cloneName);\nconsole.log(cloneTwo.cloneName);\n\n\nTodo normal\n\nPor cierto antes de seguir en este caso iremos acumulando código e iremos viendo\ntodo el log desde el principio.\nBueno en la última imagen hemos visto que teniamos el nombre de nuestros clones\ncomo era de esperar. Veamos ahora que tienen nuestros clones\n\nconsole.log(cloneOne);\nconsole.log(cloneTwo);\n\n\n\nBien como vemos son objetos de tipo dr_Manhattan_Clone que tienen una propiedad \ncloneName con su nombre o número.\nTodo normal hasta aquí no?\nAhora creemos nuestro primer prototipo, decimos que clon tiene conocimiento\nsobre la materia y cual no(haremos uno un poco menos listo :P )\n\ndr_Manhattan_Clone.prototype.matterCrontol = function(matter){\n this.matterKnowledge = matter;\n}\n\n\nHe creado un prototipo llamado matterCrontol que básicamente espera que le\ndigamos si el clon tiene conocimiento de la materia o no. Vamos a ver que tiene\nahora la propiedad prototype de nuestro constructor\n\nconsole.log(dr_Manhattan_Clone.prototype)\n\n\n\nVaya si nos fijamos en la primera y la última línea vemos como ahora sí tenemos\nalgo dentro de la propiedad prototype de nuestro constructor.\nBien pues si la teoría es correcta nuestros clones ya creados deberían poder\nusar esta propiedad, pues comprobemoslo\n\ncloneOne.matterCrontol(true);\ncloneTwo.matterCrontol(false);\n\nconsole.log(cloneOne);\nconsole.log(cloneTwo);\n\n\nSi ejecutamos vemos como no se queja, si no que ademas ahora nuestros clones\ntienen otra propiedad más que ha sido asignada al ejecutar el método \nmatterControl en cada clon.\nComo tal podríamos seguir asignando prototypes a nuestro constructor y lo\ntendríamos disponible en todas nuestras instancias de clones. Todo esto se\nparece un poco a la herencia de otros lenguajes no??\n\nBueno puede que a lo mejor no le veáis muchísima utilidad, pero y si os digo que \npodemos asignar prototypes a objetos propios de JavaScript como al objeto Array\npor ejemplo??\nMiremos primero el objeto Array\n[https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array]\n, si nos fijamos en la parte izquierda podemos ver que realmente todos los\nmétodos que usamos en los objetos ¡¡son prototypes!!, por lo que solo tendríamos\nque añadir otro prototype al objeto array para que lo tengan todos.\n\nArray.prototype.sum = function(){\n return this.map(function(x){\n return x + 5;\n }) \n}\n\n\nBien he creado un protoype sum, que recorre todos los números de un array y le\nsuma 5.\nSi la teoría es cierta, ahora cualquier array que creemos podrá usar esa\npropiedad\n\nvar numbers = [1,2,3,4,5];\nvar result = numbers.sum();\nconsole.log(result);\n\n\nY si ejecutamos vemos como si que funciona\n\nProbemos con otro array\n\nvar numbers = [1,2,3,4,5];\nvar result = numbers.sum();\nconsole.log(result);\n\nvar numbers2 = [5,10,15,20,25];\nconsole.log(numbers2.sum());\n\n\nY el resultado es\n\nPues como veis ahora podemos usar ese método en todos nuestros arrays, por lo\nque realmente puede llegar a ser muy útil para ciertos entornos donde\nnecesitamos que muchos objetos de repente tengan que hacer algo que antes no\nhacian, incluso nos puede servir para generalizar métodos y que varios objetos\npuedan usar el mismo método (pero esto lo dejaremos para otra ocasión)\nYa va quedando poco para empezar a trabajar con Node no os preocupéis.\nNos vemooossssssss.","html":"Un closure es una función que devuelve otra función, teniendo la segunda acceso a los datos de la primera, es decir comparten contexto.
\nVeamos un ejemplo sencillo
function heroName(surname){\n return function(name){\n console.log(name + ' ' + surname);\n }\n}\nvar dr_Manhattan = heroName('Osterman');\n\nconsole.log(dr_Manhattan('Jon'));\nComo veis el concepto es bastante sencillo, lo primero instanciamos heroName con su parámetro surname como Osterman, eso lo que hace es asignar la función que retorna a la variable dr_Manhattan, por lo que ahora mismo dr_Manhattan se ha convertido en un método que espera recibir un nombre por parámetro y que en su contexto tiene acceso al parámetro surname.
\nTambien podemos devolver varias funciones no solo una, vamos a cambiar un poco nuestra función de retorno:
function heroName(surname){\n return { \n getHeroData: function(name){\n console.log(name + ' ' + surname);\n },\n setHeroNewName: function(newName){\n name = newName;\n },\n setHewNewSurname: function(newSurname){\n surname = newSurname;\n }\n }\n}\nAhora ya no podemos usarla igual que antes, estamos devolviendo objetos, por lo que tenemos que llamarlos. Lo primero vamos a usar la que seria homónima a la de antes, se decir después de la nueva función ponemos
\nvar dr_Manhattan = heroName('Osterman');\ndr_Manhattan.setHeroNewName('Jon');\ndr_Manhattan.getHeroData();\nEsta nos devuelve lo mismo de antes. Como vemos ahora la variable dr_Manhattan funciona como una clase con varios métodos(en este caso lo hemos planteado como métodos GETTER y SETTER). Ahora vamos a ver que pasa si usamos el resto, añadimos a continuación:
\ndr_Manhattan.setHeroNewName('Doctor');\ndr_Manhattan.setHewNewSurname('Manhattan');\ndr_Manhattan.getHeroData();\nCon obtendríamos estos resultados:
\n![\"Setter](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-12-at-12.35.09.png\")
\nComo vemos hemos creado una especie de constructor Héroes de una manera relativamente sencilla.
Bien lo siguiente que veremos serán los prototypes. ¿Que es un prototype? Un prototype es una propiedad que tienen todos los objetos de JavaScript(y como casi todo es considerado un objeto son muchas cosas jejejej) y que comparten los que son del mismo del mismo tipo aunque ya hayan sido creados. Dentro de un prototype podemos tener casi de todo. Veamos un ejemplo:
\n//Tenemos un constructor en este caso de clones\n//del Dr.Manhattan\nfunction dr_Manhattan_Clone(cloneNumber){\n this.cloneName = 'clon' + cloneNumber;\n}\nPara que veamos que este constructor (que es un objeto) ya tiene la propiedad prototype hagamos un console.log para ver que tiene
\nconsole.log(dr_Manhattan_Clone.prototype)\nEsto nos mostrará
\n![\"Prototype](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-12-at-13.49.27.png\")
\nNo tiene nada pero hemos comprobado que por lo menos no da error, es decir, que es una propiedad válida de nuestro objeto
\nAhora creemos un par de clones y mostremos su nombre o número de clon
var cloneOne = new dr_Manhattan_Clone(1);\nvar cloneTwo = new dr_Manhattan_Clone(2);\n\nconsole.log(cloneOne.cloneName);\nconsole.log(cloneTwo.cloneName);\nTodo normal
\n![\"Clone](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-12-at-13.52.38.png\")
\nPor cierto antes de seguir en este caso iremos acumulando código e iremos viendo todo el log desde el principio.
\nBueno en la última imagen hemos visto que teniamos el nombre de nuestros clones como era de esperar. Veamos ahora que tienen nuestros clones
console.log(cloneOne);\nconsole.log(cloneTwo);\n![\"Clone](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-12-at-13.54.38.png\")
\nBien como vemos son objetos de tipo dr_Manhattan_Clone que tienen una propiedad cloneName con su nombre o número.
\nTodo normal hasta aquí no?
\nAhora creemos nuestro primer prototipo, decimos que clon tiene conocimiento sobre la materia y cual no(haremos uno un poco menos listo :P )
dr_Manhattan_Clone.prototype.matterCrontol = function(matter){\n this.matterKnowledge = matter;\n}\nHe creado un prototipo llamado matterCrontol que básicamente espera que le digamos si el clon tiene conocimiento de la materia o no. Vamos a ver que tiene ahora la propiedad prototype de nuestro constructor
\nconsole.log(dr_Manhattan_Clone.prototype)\n![\"First](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-12-at-14.08.44.png\")
\nVaya si nos fijamos en la primera y la última línea vemos como ahora sí tenemos algo dentro de la propiedad prototype de nuestro constructor.
\nBien pues si la teoría es correcta nuestros clones ya creados deberían poder usar esta propiedad, pues comprobemoslo
cloneOne.matterCrontol(true);\ncloneTwo.matterCrontol(false);\n\nconsole.log(cloneOne);\nconsole.log(cloneTwo);\nSi ejecutamos vemos como no se queja, si no que ademas ahora nuestros clones tienen otra propiedad más que ha sido asignada al ejecutar el método matterControl en cada clon.
\nComo tal podríamos seguir asignando prototypes a nuestro constructor y lo tendríamos disponible en todas nuestras instancias de clones. Todo esto se parece un poco a la herencia de otros lenguajes no??
Bueno puede que a lo mejor no le veáis muchísima utilidad, pero y si os digo que podemos asignar prototypes a objetos propios de JavaScript como al objeto Array por ejemplo??
\nMiremos primero el objeto Array, si nos fijamos en la parte izquierda podemos ver que realmente todos los métodos que usamos en los objetos ¡¡son prototypes!!, por lo que solo tendríamos que añadir otro prototype al objeto array para que lo tengan todos.
Array.prototype.sum = function(){\n return this.map(function(x){\n return x + 5;\n }) \n}\nBien he creado un protoype sum, que recorre todos los números de un array y le suma 5.
\nSi la teoría es cierta, ahora cualquier array que creemos podrá usar esa propiedad
var numbers = [1,2,3,4,5];\nvar result = numbers.sum();\nconsole.log(result);\nY si ejecutamos vemos como si que funciona
\n![\"Array](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-12-at-14.36.31.png\")
\nProbemos con otro array
var numbers = [1,2,3,4,5];\nvar result = numbers.sum();\nconsole.log(result);\n\nvar numbers2 = [5,10,15,20,25];\nconsole.log(numbers2.sum());\nY el resultado es
\n![\"Array](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-12-at-14.38.15.png\")
\nPues como veis ahora podemos usar ese método en todos nuestros arrays, por lo que realmente puede llegar a ser muy útil para ciertos entornos donde necesitamos que muchos objetos de repente tengan que hacer algo que antes no hacian, incluso nos puede servir para generalizar métodos y que varios objetos puedan usar el mismo método (pero esto lo dejaremos para otra ocasión)
\nYa va quedando poco para empezar a trabajar con Node no os preocupéis.
\nNos vemooossssssss.
Un closure es una función que devuelve otra función, teniendo la segunda acceso a los datos de la primera, es decir comparten contexto.
\nVeamos un ejemplo sencillo
function heroName(surname){\n return function(name){\n console.log(name + ' ' + surname);\n }\n}\nvar dr_Manhattan = heroName('Osterman');\n\nconsole.log(dr_Manhattan('Jon'));\nComo veis el concepto es bastante sencillo, lo primero instanciamos heroName con su parámetro surname como Osterman, eso lo que hace es asignar la función que retorna a la variable dr_Manhattan, por lo que ahora mismo dr_Manhattan se ha convertido en un método que espera recibir un nombre por parámetro y que en su contexto tiene acceso al parámetro surname.
\nTambien podemos devolver varias funciones no solo una, vamos a cambiar un poco nuestra función de retorno:
function heroName(surname){\n return { \n getHeroData: function(name){\n console.log(name + ' ' + surname);\n },\n setHeroNewName: function(newName){\n name = newName;\n },\n setHewNewSurname: function(newSurname){\n surname = newSurname;\n }\n }\n}\nAhora ya no podemos usarla igual que antes, estamos devolviendo objetos, por lo que tenemos que llamarlos. Lo primero vamos a usar la que seria homónima a la de antes, se decir después de la nueva función ponemos
\nvar dr_Manhattan = heroName('Osterman');\ndr_Manhattan.setHeroNewName('Jon');\ndr_Manhattan.getHeroData();\nEsta nos devuelve lo mismo de antes. Como vemos ahora la variable dr_Manhattan funciona como una clase con varios métodos(en este caso lo hemos planteado como métodos GETTER y SETTER). Ahora vamos a ver que pasa si usamos el resto, añadimos a continuación:
\ndr_Manhattan.setHeroNewName('Doctor');\ndr_Manhattan.setHewNewSurname('Manhattan');\ndr_Manhattan.getHeroData();\nCon obtendríamos estos resultados:
\n
\nComo vemos hemos creado una especie de constructor Héroes de una manera relativamente sencilla.
Bien lo siguiente que veremos serán los prototypes. ¿Que es un prototype? Un prototype es una propiedad que tienen todos los objetos de JavaScript(y como casi todo es considerado un objeto son muchas cosas jejejej) y que comparten los que son del mismo del mismo tipo aunque ya hayan sido creados. Dentro de un prototype podemos tener casi de todo. Veamos un ejemplo:
\n//Tenemos un constructor en este caso de clones\n//del Dr.Manhattan\nfunction dr_Manhattan_Clone(cloneNumber){\n this.cloneName = 'clon' + cloneNumber;\n}\nPara que veamos que este constructor (que es un objeto) ya tiene la propiedad prototype hagamos un console.log para ver que tiene
\nconsole.log(dr_Manhattan_Clone.prototype)\nEsto nos mostrará
\n
\nNo tiene nada pero hemos comprobado que por lo menos no da error, es decir, que es una propiedad válida de nuestro objeto
\nAhora creemos un par de clones y mostremos su nombre o número de clon
var cloneOne = new dr_Manhattan_Clone(1);\nvar cloneTwo = new dr_Manhattan_Clone(2);\n\nconsole.log(cloneOne.cloneName);\nconsole.log(cloneTwo.cloneName);\nTodo normal
\n
\nPor cierto antes de seguir en este caso iremos acumulando código e iremos viendo todo el log desde el principio.
\nBueno en la última imagen hemos visto que teniamos el nombre de nuestros clones como era de esperar. Veamos ahora que tienen nuestros clones
console.log(cloneOne);\nconsole.log(cloneTwo);\n
\nBien como vemos son objetos de tipo dr_Manhattan_Clone que tienen una propiedad cloneName con su nombre o número.
\nTodo normal hasta aquí no?
\nAhora creemos nuestro primer prototipo, decimos que clon tiene conocimiento sobre la materia y cual no(haremos uno un poco menos listo :P )
dr_Manhattan_Clone.prototype.matterCrontol = function(matter){\n this.matterKnowledge = matter;\n}\nHe creado un prototipo llamado matterCrontol que básicamente espera que le digamos si el clon tiene conocimiento de la materia o no. Vamos a ver que tiene ahora la propiedad prototype de nuestro constructor
\nconsole.log(dr_Manhattan_Clone.prototype)\n
\nVaya si nos fijamos en la primera y la última línea vemos como ahora sí tenemos algo dentro de la propiedad prototype de nuestro constructor.
\nBien pues si la teoría es correcta nuestros clones ya creados deberían poder usar esta propiedad, pues comprobemoslo
cloneOne.matterCrontol(true);\ncloneTwo.matterCrontol(false);\n\nconsole.log(cloneOne);\nconsole.log(cloneTwo);\nSi ejecutamos vemos como no se queja, si no que ademas ahora nuestros clones tienen otra propiedad más que ha sido asignada al ejecutar el método matterControl en cada clon.
\nComo tal podríamos seguir asignando prototypes a nuestro constructor y lo tendríamos disponible en todas nuestras instancias de clones. Todo esto se parece un poco a la herencia de otros lenguajes no??
Bueno puede que a lo mejor no le veáis muchísima utilidad, pero y si os digo que podemos asignar prototypes a objetos propios de JavaScript como al objeto Array por ejemplo??
\nMiremos primero el objeto Array, si nos fijamos en la parte izquierda podemos ver que realmente todos los métodos que usamos en los objetos ¡¡son prototypes!!, por lo que solo tendríamos que añadir otro prototype al objeto array para que lo tengan todos.
Array.prototype.sum = function(){\n return this.map(function(x){\n return x + 5;\n }) \n}\nBien he creado un protoype sum, que recorre todos los números de un array y le suma 5.
\nSi la teoría es cierta, ahora cualquier array que creemos podrá usar esa propiedad
var numbers = [1,2,3,4,5];\nvar result = numbers.sum();\nconsole.log(result);\nY si ejecutamos vemos como si que funciona
\n
\nProbemos con otro array
var numbers = [1,2,3,4,5];\nvar result = numbers.sum();\nconsole.log(result);\n\nvar numbers2 = [5,10,15,20,25];\nconsole.log(numbers2.sum());\nY el resultado es
\n
\nPues como veis ahora podemos usar ese método en todos nuestros arrays, por lo que realmente puede llegar a ser muy útil para ciertos entornos donde necesitamos que muchos objetos de repente tengan que hacer algo que antes no hacian, incluso nos puede servir para generalizar métodos y que varios objetos puedan usar el mismo método (pero esto lo dejaremos para otra ocasión)
\nYa va quedando poco para empezar a trabajar con Node no os preocupéis.
\nNos vemooossssssss.
Para poder trabajar bien con Node vamos a continuar repasando varias cosas de JavaScript, pensando sobretodo en no tener problemas con funciones o métodos complejos de Node.
\nVamos a ver un poco para que usamos esta palabra reservada.
\nTenemos dos casos típicos donde nos podemos encontrar this:
var superhero = {\n name: 'Jonathan Osterman',\n alias: 'Dr. Manhattan',\n getInfo: function() {\n console.log(this.name + ' se convirtió en el ' + this.alias);\n }\n}\nsuperhero.getInfo();\nComo veis usamos this para acceder a los datos dentro de superhero cuando llamamos a la función getInfo, sin this obtendríamos este error
\n![\"This](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-09-at-09.37.11.png\")
\nSin this no tenemos acceso al contexto en el que estamos funcionando.
var superhero = {}\nthis.superhero = {\n name: 'Jonathan Osterman',\n alias: 'Dr. Manhattan',\n getInfo: function () {\n console.log(this.name + ' se convirtió en el ' + this.alias)\n }\n\n}\n\nconsole.log(this)\nEn este caso hemos introducido en el this del contexto global la propiedad superhero, que al hacerlo así tenemos que declararla primero, y si vemos el resultado vemos como ahora this tiene ese objeto
\n![\"global](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-09-at-09.48.09.png\")
\nSi lo ejecutaramos en un navegador veríamos como this en el contexto global contiene el objeto window que tiene un montón de información de la página web donde lo hayamos lanzado
\n![\"This](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-09-at-09.49.20.png\")
Bien ahora ya sabemos un poco que pasa con this en el contexto global y dentro de un método o función, pero ¿que pasaría si nuestra función getInfo fuera un callback de otra, es decir que realmente la hemos pasamos por parámetro? Hagamos la prueba con setTimeout, que como sabemos ejecuta lo que le pasemos por parámetro en el tiempo que le indiquemos, debajo de lo que ya teníamos añadimos
\nsetTimeout(this.superhero.getInfo,500);\nY ejecutamos(ya sabéis con node nombreFichero.js)
\n![\"Bind](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-09-at-21.08.39.png\")
\nVaya!! no es no lo que esperabamos, ¿verdad?....y esto ¿por qué?.....bueno pensemos lo siguiente el this dentro de una función representa al contexto que lo ha llamado, en nuestro caso this tendría la información del contexto de setTimeout, para que lo veáis un poco más claro cambiar el código dentro de la función por lo siguiente:
var superhero = {}\nthis.superhero = {\n name: 'Jonathan Osterman',\n alias: 'Dr. Manhattan',\n getInfo: function () {\n \n console.log(this)\n //console.log(this.name + ' se convirtió en el ' + this.alias)\n }\n\n}\nconsole.log(this)\n\nsetTimeout(this.superhero.getInfo, 500)\nSi os fijáis he comentado nuestra linea con this.name y this.alias y he puesto solo un log con this, el resultado que deberíais ver sería similar a este
\n![\"Set](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-09-at-21.15.23.png\")
\nComo veis nuestro this es muy distinto de lo que esperabamos, tiene información solo relativa a nuestro setTimeout. Y, ¿cómo lo solucionamos? Es relativamente sencillo, lo que tenemos que hacer es "enlazar" el this que nosotros queramos y eso lo hacemos usando la propiedad bind y le pasamos nuestro propio this.
setTimeout(this.superhero.getInfo.bind(this), 500)\nSi ejecutamos ahora lo que teníamos
\n![\"Bind](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-09-at-21.19.44.png\")
\nVemos como el this es el mismo dentro y fuera de setTimeout, ahora solo tenemos que eliminar el log del this dentro de la función, descomentar la línea y.......si nos falta otra cosa como tal hemos enlazado nuestro this, pero esto realmente es el objeto completo para que realmente nos funcione como antes debemos pasarle el objeto superhero
setTimeout(this.superhero.getInfo.bind(this.superhero), 500)\nY ahora sí tenemos nuestra función devolviendo lo que esperábamos dentro de setTimeout
\nEspero que esto quede más o menos claro, así me lo explicaron a mí los magos de KeepCoding y creo que es la mejor manera.
Lo último que veremos en este post serán las funciones constructoras(que también usan this ;) )
\nComo ya hemos visto varias cosas pongo un código un pelín más largo, con una función constructora y dos instancias de ésta, con sus dos setTimeout
function superhero() {\n this.name;\n this.alias;\n this.getInfo = function () {\n console.log(this.name + ' se convirtió en ' + this.alias);\n }\n}\n\nvar mr_manhattan = new superhero();\nmr_manhattan.name = 'Jon Osterman';\nmr_manhattan.alias = 'Dr. Manhattan';\n\nmr_manhattan.getInfo();\n\nvar loki = new superhero();\nloki.name = 'Loki Laufeyson';\nloki.alias = 'Loki'\n\nloki.getInfo();\nsetTimeout(mr_manhattan.getInfo, 500);\nsetTimeout(loki.getInfo, 500);\nBueno más o menos os imaginareis como es una función constructora no? Una función que con ayuda del this representa cada propiedad del objeto instanciado y la mantiene solo en ese objeto.
\nSi ejecutamos esto tenemos lo siguiente
\n![\"Constructor](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-09-at-21.58.31.png\")
\nComo vemos tenemos el mismo problema que antes, asi que vamos a usar nuestro conocido bind pasándole a cada uno su objeto pertinente
setTimeout(mr_manhattan.getInfo.bind(mr_manhattan), 500);\nsetTimeout(loki.getInfo.bind(loki), 500);\nY vemos como el resultado ya es el que nos interesa
\n![\"Bind](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-09-at-22.00.27.png\")
\nBien con esto aparte de repasar un poco una función constructora rápidamente quería que vierais que el concepto del bind es el mismo para la mayoría de las situaciones en la que nos encontremos. Recordad si tenéis undefinided en algún método pensar en BIND.
Sin mucho más nos vemos en el siguiente. Ciaaooooo
\n","url":"https://jlgarcia.fulldev.ninja/node-js-ii-hablemos-un-poco-de-js-i/","canonical_url":null,"uuid":"02f3444c-505f-4186-9d5f-4e294e626e58","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"45","reading_time":4,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"Para poder trabajar bien con Node vamos a continuar repasando varias cosas de JavaScript, pensando sobretodo en no tener problemas con funciones o métodos complejos de Node.
\nVamos a ver un poco para que usamos esta palabra reservada.
\nTenemos dos casos típicos donde nos podemos encontrar this:
var superhero = {\n name: 'Jonathan Osterman',\n alias: 'Dr. Manhattan',\n getInfo: function() {\n console.log(this.name + ' se convirtió en el ' + this.alias);\n }\n}\nsuperhero.getInfo();\nComo veis usamos this para acceder a los datos dentro de superhero cuando llamamos a la función getInfo, sin this obtendríamos este error
\n
\nSin this no tenemos acceso al contexto en el que estamos funcionando.
var superhero = {}\nthis.superhero = {\n name: 'Jonathan Osterman',\n alias: 'Dr. Manhattan',\n getInfo: function () {\n console.log(this.name + ' se convirtió en el ' + this.alias)\n }\n\n}\n\nconsole.log(this)\nEn este caso hemos introducido en el this del contexto global la propiedad superhero, que al hacerlo así tenemos que declararla primero, y si vemos el resultado vemos como ahora this tiene ese objeto
\n
\nSi lo ejecutaramos en un navegador veríamos como this en el contexto global contiene el objeto window que tiene un montón de información de la página web donde lo hayamos lanzado
\n
Bien ahora ya sabemos un poco que pasa con this en el contexto global y dentro de un método o función, pero ¿que pasaría si nuestra función getInfo fuera un callback de otra, es decir que realmente la hemos pasamos por parámetro? Hagamos la prueba con setTimeout, que como sabemos ejecuta lo que le pasemos por parámetro en el tiempo que le indiquemos, debajo de lo que ya teníamos añadimos
\nsetTimeout(this.superhero.getInfo,500);\nY ejecutamos(ya sabéis con node nombreFichero.js)
\n
\nVaya!! no es no lo que esperabamos, ¿verdad?....y esto ¿por qué?.....bueno pensemos lo siguiente el this dentro de una función representa al contexto que lo ha llamado, en nuestro caso this tendría la información del contexto de setTimeout, para que lo veáis un poco más claro cambiar el código dentro de la función por lo siguiente:
var superhero = {}\nthis.superhero = {\n name: 'Jonathan Osterman',\n alias: 'Dr. Manhattan',\n getInfo: function () {\n \n console.log(this)\n //console.log(this.name + ' se convirtió en el ' + this.alias)\n }\n\n}\nconsole.log(this)\n\nsetTimeout(this.superhero.getInfo, 500)\nSi os fijáis he comentado nuestra linea con this.name y this.alias y he puesto solo un log con this, el resultado que deberíais ver sería similar a este
\n
\nComo veis nuestro this es muy distinto de lo que esperabamos, tiene información solo relativa a nuestro setTimeout. Y, ¿cómo lo solucionamos? Es relativamente sencillo, lo que tenemos que hacer es \"enlazar\" el this que nosotros queramos y eso lo hacemos usando la propiedad bind y le pasamos nuestro propio this.
setTimeout(this.superhero.getInfo.bind(this), 500)\nSi ejecutamos ahora lo que teníamos
\n
\nVemos como el this es el mismo dentro y fuera de setTimeout, ahora solo tenemos que eliminar el log del this dentro de la función, descomentar la línea y.......si nos falta otra cosa como tal hemos enlazado nuestro this, pero esto realmente es el objeto completo para que realmente nos funcione como antes debemos pasarle el objeto superhero
setTimeout(this.superhero.getInfo.bind(this.superhero), 500)\nY ahora sí tenemos nuestra función devolviendo lo que esperábamos dentro de setTimeout
\nEspero que esto quede más o menos claro, así me lo explicaron a mí los magos de KeepCoding y creo que es la mejor manera.
Lo último que veremos en este post serán las funciones constructoras(que también usan this ;) )
\nComo ya hemos visto varias cosas pongo un código un pelín más largo, con una función constructora y dos instancias de ésta, con sus dos setTimeout
function superhero() {\n this.name;\n this.alias;\n this.getInfo = function () {\n console.log(this.name + ' se convirtió en ' + this.alias);\n }\n}\n\nvar mr_manhattan = new superhero();\nmr_manhattan.name = 'Jon Osterman';\nmr_manhattan.alias = 'Dr. Manhattan';\n\nmr_manhattan.getInfo();\n\nvar loki = new superhero();\nloki.name = 'Loki Laufeyson';\nloki.alias = 'Loki'\n\nloki.getInfo();\nsetTimeout(mr_manhattan.getInfo, 500);\nsetTimeout(loki.getInfo, 500);\nBueno más o menos os imaginareis como es una función constructora no? Una función que con ayuda del this representa cada propiedad del objeto instanciado y la mantiene solo en ese objeto.
\nSi ejecutamos esto tenemos lo siguiente
\n
\nComo vemos tenemos el mismo problema que antes, asi que vamos a usar nuestro conocido bind pasándole a cada uno su objeto pertinente
setTimeout(mr_manhattan.getInfo.bind(mr_manhattan), 500);\nsetTimeout(loki.getInfo.bind(loki), 500);\nY vemos como el resultado ya es el que nos interesa
\n
\nBien con esto aparte de repasar un poco una función constructora rápidamente quería que vierais que el concepto del bind es el mismo para la mayoría de las situaciones en la que nos encontremos. Recordad si tenéis undefinided en algún método pensar en BIND.
Sin mucho más nos vemos en el siguiente. Ciaaooooo
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para poder trabajar bien con Node vamos a continuar repasando varias cosas de JavaScript, pensando sobretodo en no tener problemas con funciones o métodos complejos de Node."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"empecemosconthis"},"children":[{"type":"text","value":"Empecemos con THIS"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vamos a ver un poco para que usamos esta palabra reservada."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nTenemos dos casos típicos donde nos podemos encontrar "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"this"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"El primero sería dentro de un método o función. En este caso "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"this"}]},{"type":"text","value":" haría referencia a la instanciación de ese método, veamos un ejemplo:"}]},{"type":"text","value":"\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":"var superhero = {\n name: 'Jonathan Osterman',\n alias: 'Dr. Manhattan',\n getInfo: function() {\n console.log(this.name + ' se convirtió en el ' + this.alias);\n }\n}\nsuperhero.getInfo();\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como veis usamos "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"this"}]},{"type":"text","value":" para acceder a los datos dentro de superhero cuando llamamos a la función "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"getInfo"}]},{"type":"text","value":", sin "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"this"}]},{"type":"text","value":" obtendríamos este error"},{"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-09-at-09.37.11.png","alt":"This error"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nSin this no tenemos acceso al contexto en el que estamos funcionando."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"El segundo caso es cuando lo usamos fuera de un método. En este caso "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"this"}]},{"type":"text","value":" tendria la información del contexto global o si estamos en modo estricto que seria undefined (cuando ponemos 'use strict' al inicio de nuestra clase teneis info aqui "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Modo_estricto"},"children":[{"type":"text","value":"Modo Estricto"}]},{"type":"text","value":")"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVeamos un ejemplo(sin modo estricto)"}]},{"type":"text","value":"\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":"var superhero = {}\nthis.superhero = {\n name: 'Jonathan Osterman',\n alias: 'Dr. Manhattan',\n getInfo: function () {\n console.log(this.name + ' se convirtió en el ' + this.alias)\n }\n\n}\n\nconsole.log(this)\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En este caso hemos introducido en el this del contexto global la propiedad "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"superhero"}]},{"type":"text","value":", que al hacerlo así tenemos que declararla primero, y si vemos el resultado vemos como ahora this tiene ese objeto"},{"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-09-at-09.48.09.png","alt":"global this example"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nSi lo ejecutaramos en un navegador veríamos como "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"this"}]},{"type":"text","value":" en el contexto global contiene el objeto "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":" que tiene un montón de información de la página web donde lo hayamos lanzado"},{"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-09-at-09.49.20.png","alt":"This in web example"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien ahora ya sabemos un poco que pasa con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"this"}]},{"type":"text","value":" en el contexto global y dentro de un método o función, pero ¿que pasaría si nuestra función "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"getInfo"}]},{"type":"text","value":" fuera un callback de otra, es decir que realmente la hemos pasamos por parámetro? Hagamos la prueba con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setTimeout"}]},{"type":"text","value":", que como sabemos ejecuta lo que le pasemos por parámetro en el tiempo que le indiquemos, debajo de lo que ya teníamos añadimos"}]},{"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":"setTimeout(this.superhero.getInfo,500);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y ejecutamos(ya sabéis con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"node nombreFichero.js"}]},{"type":"text","value":")"},{"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-09-at-21.08.39.png","alt":"Bind this error"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVaya!! no es no lo que esperabamos, ¿verdad?....y esto ¿por qué?.....bueno pensemos lo siguiente el this dentro de una función representa al contexto que lo ha llamado, en nuestro caso "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"this"}]},{"type":"text","value":" tendría la información del contexto de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setTimeout"}]},{"type":"text","value":", para que lo veáis un poco más claro cambiar el código dentro de la función por 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":"var superhero = {}\nthis.superhero = {\n name: 'Jonathan Osterman',\n alias: 'Dr. Manhattan',\n getInfo: function () {\n \n console.log(this)\n //console.log(this.name + ' se convirtió en el ' + this.alias)\n }\n\n}\nconsole.log(this)\n\nsetTimeout(this.superhero.getInfo, 500)\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si os fijáis he comentado nuestra linea con "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"this.name"}]},{"type":"text","value":" y "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"this.alias"}]},{"type":"text","value":" y he puesto solo un log con this, el resultado que deberíais ver sería similar a este"},{"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-09-at-21.15.23.png","alt":"Set Timeout this example"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComo veis nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"this"}]},{"type":"text","value":" es muy distinto de lo que esperabamos, tiene información solo relativa a nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setTimeout"}]},{"type":"text","value":". Y, ¿cómo lo solucionamos? Es relativamente sencillo, lo que tenemos que hacer es "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"\"enlazar\""}]}]},{"type":"text","value":" el this que nosotros queramos y eso lo hacemos usando la propiedad "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"bind"}]},{"type":"text","value":" y le pasamos nuestro propio this."}]},{"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":"setTimeout(this.superhero.getInfo.bind(this), 500)\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si ejecutamos ahora lo que teníamos"},{"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-09-at-21.19.44.png","alt":"Bind example"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVemos como el this es el mismo dentro y fuera de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setTimeout"}]},{"type":"text","value":", ahora solo tenemos que eliminar el log del this dentro de la función, descomentar la línea y.......si nos falta otra cosa como tal hemos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"enlazado"}]},{"type":"text","value":" nuestro this, pero esto realmente es el objeto completo para que realmente nos funcione como antes debemos pasarle el objeto "},{"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":"setTimeout(this.superhero.getInfo.bind(this.superhero), 500)\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ahora sí"}]},{"type":"text","value":" tenemos nuestra función devolviendo lo que esperábamos dentro de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEspero que esto quede más o menos claro, así me lo explicaron a mí los magos de "},{"type":"element","tagName":"a","properties":{"href":"https://keepcoding.io/es/"},"children":[{"type":"text","value":"KeepCoding"}]},{"type":"text","value":" y creo que es la mejor manera."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo último que veremos en este post serán las funciones constructoras(que también usan this ;) )"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComo ya hemos visto varias cosas pongo un código un pelín más largo, con una función constructora y dos instancias de ésta, con sus dos "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setTimeout"}]}]},{"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() {\n this.name;\n this.alias;\n this.getInfo = function () {\n console.log(this.name + ' se convirtió en ' + this.alias);\n }\n}\n\nvar mr_manhattan = new superhero();\nmr_manhattan.name = 'Jon Osterman';\nmr_manhattan.alias = 'Dr. Manhattan';\n\nmr_manhattan.getInfo();\n\nvar loki = new superhero();\nloki.name = 'Loki Laufeyson';\nloki.alias = 'Loki'\n\nloki.getInfo();\nsetTimeout(mr_manhattan.getInfo, 500);\nsetTimeout(loki.getInfo, 500);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bueno más o menos os imaginareis como es una función constructora no? Una función que con ayuda del this representa cada propiedad del objeto instanciado y la mantiene solo en ese objeto."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nSi ejecutamos esto tenemos lo siguiente"},{"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-09-at-21.58.31.png","alt":"Constructor example"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComo vemos tenemos el mismo problema que antes, asi que vamos a usar nuestro conocido bind pasándole a cada uno su objeto pertinente"}]},{"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":"setTimeout(mr_manhattan.getInfo.bind(mr_manhattan), 500);\nsetTimeout(loki.getInfo.bind(loki), 500);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y vemos como el resultado ya es el que nos interesa"},{"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-09-at-22.00.27.png","alt":"Bind costructor example"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nBien con esto aparte de repasar un poco una función constructora rápidamente quería que vierais que el concepto del bind es el mismo para la mayoría de las situaciones en la que nos encontremos. Recordad si tenéis "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"undefinided"}]},{"type":"text","value":" en algún método pensar en "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"BIND"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sin mucho más nos vemos en el siguiente. Ciaaooooo"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"empecemosconthis","heading":"Empecemos con THIS"}]},"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__5a338158333e0f134c248f2a","title":"React Superhero (V): Mobx","slug":"react-superhero-v-mobx","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Captain-Atom-1.jpg","excerpt":"En este post hablaremos de una librería muy útil llamada Mobx que entre otras\ncosas nos facilita un poco el desarrollo en cuanto a la comunicación entre\ncomponentes se refiere, es decir, ya hemos visto un poco como comunicarnos de un\ncomponente a otro para realizar alguna modificación en alguna propiedad, pues\nbien Mobx nos facilita este planteamiento (entre otras cosas claro ;) ). Si\nqueréis algo más de información aqui tenéis la página oficial de Mobx\n[https://mobx.js.org/]\n\nInstalación\nPara i","custom_excerpt":null,"visibility":"public","created_at_pretty":"6 Sep 2017","published_at_pretty":"12 Sep 2017","updated_at_pretty":"22 Jan 2018","created_at":"2017-09-06T21:51:25.000+02:00","published_at":"2017-09-12T10:09:00.000+02:00","updated_at":"2018-01-22T09:48:46.000+01:00","meta_title":null,"meta_description":"Veremos una librería muy útil que se usa mucho en React. Esta librería nos facilita la comunicación entre componentes.","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 este post hablaremos de una librería muy útil llamada Mobx que entre otras\ncosas nos facilita un poco el desarrollo en cuanto a la comunicación entre\ncomponentes se refiere, es decir, ya hemos visto un poco como comunicarnos de un\ncomponente a otro para realizar alguna modificación en alguna propiedad, pues\nbien Mobx nos facilita este planteamiento (entre otras cosas claro ;) ). Si\nqueréis algo más de información aqui tenéis la página oficial de Mobx\n[https://mobx.js.org/]\n\nInstalación\nPara instalar mobx usaremos nuestro magnífico npm:\n\nnpm install mobx mobx-react --save\n\n\nEsto nos instalará en el proyecto los módulos de NodeJS necesarios para poder\ntrabajar con Mobx\n\nUsando Mobx\nBien vamos a empezar a partir de la estructura de proyecto que teniamos en el\npost anterior (tras ejecutar nuestro create-app....).\nVamos a trabajar sobre el fichero App.js que es el componente que se esta\nrendeando por defecto, pero vamos a cambiarlo un poco y asi vemos que realmente\nestamos en este punto, vamos a cambiar la frase que aparece debajo de Welcome to\nReact para indicar que trabajaremos despues de esa linea:\n\nimport 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
\nEn este post hablaremos de una librería muy útil llamada Mobx que entre otras cosas nos facilita un poco el desarrollo en cuanto a la comunicación entre componentes se refiere, es decir, ya hemos visto un poco como comunicarnos de un componente a otro para realizar alguna modificación en alguna propiedad, pues bien Mobx nos facilita este planteamiento (entre otras cosas claro ;) ). Si queréis algo más de información aqui tenéis la página oficial de Mobx
\nPara instalar mobx usaremos nuestro magnífico npm:
\nnpm install mobx mobx-react --save\nEsto nos instalará en el proyecto los módulos de NodeJS necesarios para poder trabajar con Mobx
\nBien vamos a empezar a partir de la estructura de proyecto que teniamos en el post anterior (tras ejecutar nuestro create-app....).
\nVamos a trabajar sobre el fichero App.js que es el componente que se esta rendeando por defecto, pero vamos a cambiarlo un poco y asi vemos que realmente estamos en este punto, vamos a cambiar la frase que aparece debajo de Welcome to React para indicar que trabajaremos despues de esa linea:
import React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n <div className="App">\n <div className="App-header">\n <img src={logo} className="App-logo" alt="logo" />\n <h2>Welcome to React</h2>\n </div>\n <p className="App-intro">\n We started working below this line\n </p>\n </div>\n );\n }\n}\n\nexport default App;\nTras guardar, automáticamente tendriamos algo similar a
\n![\"Started](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-13.37.40.png\")
\nBien ya sabemos donde estamos, ahora haremos un ejemplo simple para ver que es lo que conseguimos con Mobx, vamos a mostrar un número y este aumentará cuando pulsemos un botón.
\nPrimero mostremos nuestro número, en un principio es algo sencillo que ya hemos visto no?, creamos un componente nuevo y lo indicamos en el componente que se esta renderizando como principal no??...... si esa es una opción pero al final estaríamos haciendo lo mismo que ya hemos visto y entonces para que queremos mobx no??. Pues bien la teoría del componente es válida a medias, vamos a crear una clase y en esta tenemos que importar extendObservable de la librería de mobx. Yo le he puesto el nombre FirstMobxClass.js y esto es lo que ponemos
import {extendObservable} from 'mobx'\n\nclass FirstMobxClass {\n constructor(){\n //Recibe el objeto a observar y las propiedades\n extendObservable(this,{\n number: 1\n })\n }\n}\n\n//Creamos una nueva instancia de nuestra clase,la almacenamos\n// y la exportamos para que se tenga acceso desde fuera\n//de esta clase\nvar numberMobxClass = new FirstMobxClass();\n\nexport default numberMobxClass;\nCon esto tendríamos una variable con una propiedad number que deberíamos poder usar. Para ello volvamos a nuestra clase App.js y ponemos lo siguiente:
\nimport React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n//Our imports\nimport numberMobxClass from './FirstMobxClass';\n\nclass App extends Component {\n render() {\n return (\n <div className="App">\n <div className="App-header">\n <img src={logo} className="App-logo" alt="logo" />\n <h2>Welcome to React</h2>\n </div>\n <p className="App-intro">\n We started working below this line\n </p>\n <h2>{ numberMobxClass.number }</h2>\n </div>\n );\n }\n}\n\nexport default App;\nPara diferenciar los imports que ya teniamos de los nuevos he indicado el comentario our imports. Como véis lo que importamos es nuestra variable del fichero con nombre FirstMobxClass y para usarlo nos valemos de las magias del lenguaje JSX y con poner
\n<h2>{ numberMobxClass.number }</h2>\nYa tendríamos nuestra linea con el número que hemos puesto
\n![\"FirstMobx\"](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-14.01.56.png\")
Lo siguiente será crear nuestro botón, en este caso seguimos la teoría inicial de los componentes que ya sabíamos, me refiero a que lo creamos como un componente normal. Creamos el fichero IncreaseNumber.js
\nimport React, { Component } from 'react';\n\nclass IncreaseNumber extends Component {\n render(){\n return(\n <button>Increase Number</button>\n )\n }\n}\n\nexport default IncreaseNumber;\nDe momento nada nuevo, para verlo lo importamos en App.js y lo ponemos a continuación, es decir ahora en App.js debajo de Our imports añadimos un import más debajo del numberMobxClass
\n//Our imports\nimport numberMobxClass from './FirstMobxClass';\nimport IncreaseNumber from './IncreaseNumber';\nY luego debajo de nuestro número le ponemos el botón
\n<h2>{ numberMobxClass.number }</h2>\n<IncreaseNumber/>\nY al guardar ya veríamos nuestro botón
\n![\"NewButton\"](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-14.12.23.png\")
\nPero aunque pulsemos de momento no hace nada no??....continuemos ahora para añadirle funcionalidad. Al igual que haciamos antes necesitamos un método que haga que aumente nuestro número, y al igual que haciamos antes lo mejor es que lo creemos en el mismo punto que donde tenemos nuestra propiedad. Esto es tan simple como sumarle 1 al número, es decir añadimos a nuestra clase FirstMobxClass el método increase
class FirstMobxClass {\n constructor(){\n //Recibe el objeto a observar y las propiedades\n extendObservable(this,{\n number: 1\n });\n }\n increase(){\n this.number = this.number + 1;\n }\n}\nYa tenemos nuestro método ahora indiquemosle a nuestro botón que tiene que usarlo, probemos a ponerlo directamente con un onClick en el componente IncreaseNumber
\nimport React, { Component } from 'react';\nimport numberMobxClass from './FirstMobxClass';\n\nclass IncreaseNumber extends Component {\n render(){\n return(\n <button onClick={numberMobxClass.increase} >Increase Number</button>\n )\n }\n}\n\nexport default IncreaseNumber;\nSi os fijáis hemos importado nuestra clase numberMobxClass y hemos usado nuestro método increase directamente en el onClick, bien si guardamos vemos que la página renderiza bien pero que pasa si pulsamos.......UPSSS!!!
\n![\"Error](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-14.33.03.png\")
\nVemos que nos sale este error, y eso es como os podéis imaginar que this no tiene nada, diréis "pues entonces podemos ponerle un bind igual que haciamos antes y ya esta", bueno pues vamos a probarlo a ver que pasa y de paso le ponemos al método increase un log para ver que tiene this.
\nEl método increase ahora quedaria así
increase(){\n console.log(this);\n this.number = this.number + 1;\n}\nY nuestro onClick
\n<button onClick={numberMobxClass.increase.bind(this)} >Increase Number</button>\nVeamos que pasa cuando pulsamos
\n![\"Log](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-14.37.48.png\")
\nNo nos da error pero si nos fijamos en lo que nos devuelve nuestro log, la propiedad number es NaN y eso ¿por qué? Pues porque realmente estamos pasando con bind el this de nuestro componente IncreaseNumber el cual no tiene esa propiedad, hagamos un pequeño ejemplo para verlo, creemos una propiedad en el componente IncreaseNumber como hemos visto en anteriores post y veamos el log ahora.
\nEl componente IncreaseNumber quedaria asi
class IncreaseNumber extends Component {\n constructor(){\n super();\n this.test = 2;\n \n }\n render(){\n return(\n <button onClick={numberMobxClass.increase.bind(this)} >Increase Number</button>\n )\n }\n}\nY al pulsar tenemos este log
\n![\"Testing](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-14.47.11.png\")
\nSi os fijáis number sigue siendo NaN pero sin embargo tenemos nuestra propiedad test con el valor que hemos puesto, entonces quiere decir que estamos pasando el contexto del componente IncreaseNumber.... y entonces como lo hacemos??...Es más fácil de lo que parece, onClick espera una función no?, pues simplemente usemos una función que cada vez que se use esta "llame" a nuestro método increase (al estilo típico de la programación habitual)
\nCon esta teoría nuestro onClick quedaría así
<button onClick={() => numberMobxClass.increase()} >Increase Number</button>\nVeamos lo que tiene this ahora
\n![\"Log](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-14.52.52.png\")
\nAnda!! Ahora nuestro number si aumenta pero..... en nuestra página no se ve.....y eso?? bueno la explicación es sencilla no estamos "observando" la propiedad para que responda los cambios y como hacemos eso?...Fácil, importamos observer de la libreria mobx-react y le indicamos que observe donde estamos renderizando, es decir en App.js, por lo que el componente quedaría asi
import React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n//Our imports\nimport numberMobxClass from './FirstMobxClass';\nimport IncreaseNumber from './IncreaseNumber';\nimport { observer } from 'mobx-react';\n\nclass App extends Component {\n render() {\n return (\n <div className="App">\n <div className="App-header">\n <img src={logo} className="App-logo" alt="logo" />\n <h2>Welcome to React</h2>\n </div>\n <p className="App-intro">\n We started working below this line\n </p>\n <h2>{ numberMobxClass.number }</h2>\n <IncreaseNumber/>\n </div>\n );\n }\n}\n\nexport default observer(App);\nY voilá ya tenemos nuestro numero aumentando en nuestra página
\n![\"The](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-09-at-15.00.31.png\")
Espero que quede más o menos claro como estamos usando la característica observable que nos proporciona Mobx, que realmente nos facilita un poco estar pendiente de los estados o cambios de nuestras propiedades.
\nEn el siguiente post seguiremos viendo que más cosas podemos hacer con Mobx, nos vemos, un abrazooorrrrrr
\n","url":"https://jlgarcia.fulldev.ninja/react-superhero-v-mobx/","canonical_url":null,"uuid":"93502e4c-0ee1-43cb-a96d-cb6751f8ee84","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"59b051bd6c31a60001f69f0d","reading_time":7,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"En este post hablaremos de una librería muy útil llamada Mobx que entre otras cosas nos facilita un poco el desarrollo en cuanto a la comunicación entre componentes se refiere, es decir, ya hemos visto un poco como comunicarnos de un componente a otro para realizar alguna modificación en alguna propiedad, pues bien Mobx nos facilita este planteamiento (entre otras cosas claro ;) ). Si queréis algo más de información aqui tenéis la página oficial de Mobx
\nPara instalar mobx usaremos nuestro magnífico npm:
\nnpm install mobx mobx-react --save\nEsto nos instalará en el proyecto los módulos de NodeJS necesarios para poder trabajar con Mobx
\nBien vamos a empezar a partir de la estructura de proyecto que teniamos en el post anterior (tras ejecutar nuestro create-app....).
\nVamos a trabajar sobre el fichero App.js que es el componente que se esta rendeando por defecto, pero vamos a cambiarlo un poco y asi vemos que realmente estamos en este punto, vamos a cambiar la frase que aparece debajo de Welcome to React para indicar que trabajaremos despues de esa linea:
import React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n <div className=\"App\">\n <div className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <h2>Welcome to React</h2>\n </div>\n <p className=\"App-intro\">\n We started working below this line\n </p>\n </div>\n );\n }\n}\n\nexport default App;\nTras guardar, automáticamente tendriamos algo similar a
\n
\nBien ya sabemos donde estamos, ahora haremos un ejemplo simple para ver que es lo que conseguimos con Mobx, vamos a mostrar un número y este aumentará cuando pulsemos un botón.
\nPrimero mostremos nuestro número, en un principio es algo sencillo que ya hemos visto no?, creamos un componente nuevo y lo indicamos en el componente que se esta renderizando como principal no??...... si esa es una opción pero al final estaríamos haciendo lo mismo que ya hemos visto y entonces para que queremos mobx no??. Pues bien la teoría del componente es válida a medias, vamos a crear una clase y en esta tenemos que importar extendObservable de la librería de mobx. Yo le he puesto el nombre FirstMobxClass.js y esto es lo que ponemos
import {extendObservable} from 'mobx'\n\nclass FirstMobxClass {\n constructor(){\n //Recibe el objeto a observar y las propiedades\n extendObservable(this,{\n number: 1\n })\n }\n}\n\n//Creamos una nueva instancia de nuestra clase,la almacenamos\n// y la exportamos para que se tenga acceso desde fuera\n//de esta clase\nvar numberMobxClass = new FirstMobxClass();\n\nexport default numberMobxClass;\nCon esto tendríamos una variable con una propiedad number que deberíamos poder usar. Para ello volvamos a nuestra clase App.js y ponemos lo siguiente:
\nimport React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n//Our imports\nimport numberMobxClass from './FirstMobxClass';\n\nclass App extends Component {\n render() {\n return (\n <div className=\"App\">\n <div className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <h2>Welcome to React</h2>\n </div>\n <p className=\"App-intro\">\n We started working below this line\n </p>\n <h2>{ numberMobxClass.number }</h2>\n </div>\n );\n }\n}\n\nexport default App;\nPara diferenciar los imports que ya teniamos de los nuevos he indicado el comentario our imports. Como véis lo que importamos es nuestra variable del fichero con nombre FirstMobxClass y para usarlo nos valemos de las magias del lenguaje JSX y con poner
\n<h2>{ numberMobxClass.number }</h2>\nYa tendríamos nuestra linea con el número que hemos puesto
\n
Lo siguiente será crear nuestro botón, en este caso seguimos la teoría inicial de los componentes que ya sabíamos, me refiero a que lo creamos como un componente normal. Creamos el fichero IncreaseNumber.js
\nimport React, { Component } from 'react';\n\nclass IncreaseNumber extends Component {\n render(){\n return(\n <button>Increase Number</button>\n )\n }\n}\n\nexport default IncreaseNumber;\nDe momento nada nuevo, para verlo lo importamos en App.js y lo ponemos a continuación, es decir ahora en App.js debajo de Our imports añadimos un import más debajo del numberMobxClass
\n//Our imports\nimport numberMobxClass from './FirstMobxClass';\nimport IncreaseNumber from './IncreaseNumber';\nY luego debajo de nuestro número le ponemos el botón
\n<h2>{ numberMobxClass.number }</h2>\n<IncreaseNumber/>\nY al guardar ya veríamos nuestro botón
\n
\nPero aunque pulsemos de momento no hace nada no??....continuemos ahora para añadirle funcionalidad. Al igual que haciamos antes necesitamos un método que haga que aumente nuestro número, y al igual que haciamos antes lo mejor es que lo creemos en el mismo punto que donde tenemos nuestra propiedad. Esto es tan simple como sumarle 1 al número, es decir añadimos a nuestra clase FirstMobxClass el método increase
class FirstMobxClass {\n constructor(){\n //Recibe el objeto a observar y las propiedades\n extendObservable(this,{\n number: 1\n });\n }\n increase(){\n this.number = this.number + 1;\n }\n}\nYa tenemos nuestro método ahora indiquemosle a nuestro botón que tiene que usarlo, probemos a ponerlo directamente con un onClick en el componente IncreaseNumber
\nimport React, { Component } from 'react';\nimport numberMobxClass from './FirstMobxClass';\n\nclass IncreaseNumber extends Component {\n render(){\n return(\n <button onClick={numberMobxClass.increase} >Increase Number</button>\n )\n }\n}\n\nexport default IncreaseNumber;\nSi os fijáis hemos importado nuestra clase numberMobxClass y hemos usado nuestro método increase directamente en el onClick, bien si guardamos vemos que la página renderiza bien pero que pasa si pulsamos.......UPSSS!!!
\n
\nVemos que nos sale este error, y eso es como os podéis imaginar que this no tiene nada, diréis \"pues entonces podemos ponerle un bind igual que haciamos antes y ya esta\", bueno pues vamos a probarlo a ver que pasa y de paso le ponemos al método increase un log para ver que tiene this.
\nEl método increase ahora quedaria así
increase(){\n console.log(this);\n this.number = this.number + 1;\n}\nY nuestro onClick
\n<button onClick={numberMobxClass.increase.bind(this)} >Increase Number</button>\nVeamos que pasa cuando pulsamos
\n
\nNo nos da error pero si nos fijamos en lo que nos devuelve nuestro log, la propiedad number es NaN y eso ¿por qué? Pues porque realmente estamos pasando con bind el this de nuestro componente IncreaseNumber el cual no tiene esa propiedad, hagamos un pequeño ejemplo para verlo, creemos una propiedad en el componente IncreaseNumber como hemos visto en anteriores post y veamos el log ahora.
\nEl componente IncreaseNumber quedaria asi
class IncreaseNumber extends Component {\n constructor(){\n super();\n this.test = 2;\n \n }\n render(){\n return(\n <button onClick={numberMobxClass.increase.bind(this)} >Increase Number</button>\n )\n }\n}\nY al pulsar tenemos este log
\n
\nSi os fijáis number sigue siendo NaN pero sin embargo tenemos nuestra propiedad test con el valor que hemos puesto, entonces quiere decir que estamos pasando el contexto del componente IncreaseNumber.... y entonces como lo hacemos??...Es más fácil de lo que parece, onClick espera una función no?, pues simplemente usemos una función que cada vez que se use esta \"llame\" a nuestro método increase (al estilo típico de la programación habitual)
\nCon esta teoría nuestro onClick quedaría así
<button onClick={() => numberMobxClass.increase()} >Increase Number</button>\nVeamos lo que tiene this ahora
\n
\nAnda!! Ahora nuestro number si aumenta pero..... en nuestra página no se ve.....y eso?? bueno la explicación es sencilla no estamos \"observando\" la propiedad para que responda los cambios y como hacemos eso?...Fácil, importamos observer de la libreria mobx-react y le indicamos que observe donde estamos renderizando, es decir en App.js, por lo que el componente quedaría asi
import React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n//Our imports\nimport numberMobxClass from './FirstMobxClass';\nimport IncreaseNumber from './IncreaseNumber';\nimport { observer } from 'mobx-react';\n\nclass App extends Component {\n render() {\n return (\n <div className=\"App\">\n <div className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <h2>Welcome to React</h2>\n </div>\n <p className=\"App-intro\">\n We started working below this line\n </p>\n <h2>{ numberMobxClass.number }</h2>\n <IncreaseNumber/>\n </div>\n );\n }\n}\n\nexport default observer(App);\nY voilá ya tenemos nuestro numero aumentando en nuestra página
\n
Espero que quede más o menos claro como estamos usando la característica observable que nos proporciona Mobx, que realmente nos facilita un poco estar pendiente de los estados o cambios de nuestras propiedades.
\nEn el siguiente post seguiremos viendo que más cosas podemos hacer con Mobx, nos vemos, un abrazooorrrrrr
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En este post hablaremos de una librería muy útil llamada "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Mobx"}]},{"type":"text","value":" que entre otras cosas nos facilita un poco el desarrollo en cuanto a la comunicación entre componentes se refiere, es decir, ya hemos visto un poco como comunicarnos de un componente a otro para realizar alguna modificación en alguna propiedad, pues bien "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Mobx"}]},{"type":"text","value":" nos facilita este planteamiento (entre otras cosas claro ;) ). Si queréis algo más de información aqui tenéis la página oficial de "},{"type":"element","tagName":"a","properties":{"href":"https://mobx.js.org/"},"children":[{"type":"text","value":"Mobx"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"instalacin"},"children":[{"type":"text","value":"Instalación"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para instalar "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"mobx"}]},{"type":"text","value":" usaremos nuestro magnífico "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm install mobx mobx-react --save\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto nos instalará en el proyecto los módulos de NodeJS necesarios para poder trabajar con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Mobx"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"usandomobx"},"children":[{"type":"text","value":"Usando Mobx"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien vamos a empezar a partir de la estructura de proyecto que teniamos en el post anterior (tras ejecutar nuestro create-app....)."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVamos a trabajar sobre el fichero "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"App.js"}]},{"type":"text","value":" que es el componente que se esta rendeando por defecto, pero vamos a cambiarlo un poco y asi vemos que realmente estamos en este punto, vamos a cambiar la frase que aparece debajo de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Welcome to React"}]},{"type":"text","value":" para indicar que trabajaremos despues de esa linea:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"import React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n\n We started working below this line\n
\n\n We started working below this line\n
\n\n We started working below this line\n
\n\n To get started, edit src/App.js and save to reload.\n
En el post anterior creamos un proyecto de React usando el CLI que nos proporcionan los creadores del mismo. Esta herramienta de linea de comandos nos crea un proyecto base desde el que partir y como vimos cuando usamos npm start para arrancar nuestro servidor de desarrollo, la herramienta nos muestra una página similar a esta:
\n![\"React](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-04-at-09.26.57.png\")
Veamos un poco la estructura del proyecto y desde donde podemos empezar a trabajar.
\nLo primero veamos lo que tenemos:
\n![\"Folders](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-04-at-09.29.33.png\")
En lo primero que nos tenemos que fijar es en los index tanto el js, como el html, ya que son desde donde se empieza a llamar al resto. Si miramos el index.html tenemos una pagina html con varios tags pero lo que nos importa realmente es algo que ya hemos visto:
\n <div id="root"></div>\nRecordemos que es en ese punto donde se empieza a componer nuestra aplicación.
\nLo siguiente miremos dentro de la carpeta src y veamos el index.js que aqui tenemos varias cosas interesantes:
\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport registerServiceWorker from './registerServiceWorker';\n\n\nReactDOM.render(<App />, document.getElementById('root'));\nregisterServiceWorker();\nTenemos varios imports, luego el típico ReactDOM.render y por último una llamada a un método registerServiceWorker(). Comencemos con los imports, los dos primeros ya los hemos visto antes, son los específicos para que React funcione, veamos los siguientes:
\nA continuación como ya hemos comentado, tenemos nuestro típico render de react que lo que hace es instanciar el componente App. Si miramos el código de App.js:
\nimport React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n <div className="App">\n <div className="App-header">\n <img src={logo} className="App-logo" alt="logo" />\n <h2>Welcome to React</h2>\n </div>\n <p className="App-intro">\n To get started, edit <code>src/App.js</code> and save to reload.\n </p>\n </div>\n );\n }\n}\n\nexport default App;\nVemos que ya hemos visto muchas cosas, comentar que los imports de logo y de App.css los necesitamos para usarlos en nuestro código JSX, si os fijáis en la línea:
\n<img src={logo} className="App-logo" alt="logo" />\nTenemos las dos cosas, usamos el logo dentro de src y ya estamos usando tambien nombres de clases del fichero css.
\nEn este punto faltaría solo comentar la última y casi la más importante del conjunto (en este punto jejeje):
\nexport default App;\nEsta línea lo que indica es que por defecto cuando se haga un import de este fichero se importe el componente App. Un detalle importante, sin export no importamos nada, si comentáramos esa línea tendríamos este resultado:
\n![\"Screen-Shot-2017-09-04-at-21.42.51\"](\"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-04-at-21.42.51.png\")
Creo que más o menos se entiende todo, solo comentar que si quisieramos cambiar el componente App por otro solo tendríamos que crear el componente como queramos ponerle la línea export y cambiar el
Como vemos prácticamente todo lo haremos dentro de la carpeta src y sigue manteniendo el nivel de sencillez que hemos estado viendo.
\nSin mucho más nos vemos en el siguiente. Un abrazoooooooo
\n","url":"https://jlgarcia.fulldev.ninja/react-superhero-iv/","canonical_url":null,"uuid":"a12fcedc-92c4-4094-a631-9144bc91e900","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"59acfee5c5286700019db1d5","reading_time":3,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"En el post anterior creamos un proyecto de React usando el CLI que nos proporcionan los creadores del mismo. Esta herramienta de linea de comandos nos crea un proyecto base desde el que partir y como vimos cuando usamos npm start para arrancar nuestro servidor de desarrollo, la herramienta nos muestra una página similar a esta:
\n
Veamos un poco la estructura del proyecto y desde donde podemos empezar a trabajar.
\nLo primero veamos lo que tenemos:
\n
En lo primero que nos tenemos que fijar es en los index tanto el js, como el html, ya que son desde donde se empieza a llamar al resto. Si miramos el index.html tenemos una pagina html con varios tags pero lo que nos importa realmente es algo que ya hemos visto:
\n <div id=\"root\"></div>\nRecordemos que es en ese punto donde se empieza a componer nuestra aplicación.
\nLo siguiente miremos dentro de la carpeta src y veamos el index.js que aqui tenemos varias cosas interesantes:
\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport registerServiceWorker from './registerServiceWorker';\n\n\nReactDOM.render(<App />, document.getElementById('root'));\nregisterServiceWorker();\nTenemos varios imports, luego el típico ReactDOM.render y por último una llamada a un método registerServiceWorker(). Comencemos con los imports, los dos primeros ya los hemos visto antes, son los específicos para que React funcione, veamos los siguientes:
\nA continuación como ya hemos comentado, tenemos nuestro típico render de react que lo que hace es instanciar el componente App. Si miramos el código de App.js:
\nimport React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n <div className=\"App\">\n <div className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <h2>Welcome to React</h2>\n </div>\n <p className=\"App-intro\">\n To get started, edit <code>src/App.js</code> and save to reload.\n </p>\n </div>\n );\n }\n}\n\nexport default App;\nVemos que ya hemos visto muchas cosas, comentar que los imports de logo y de App.css los necesitamos para usarlos en nuestro código JSX, si os fijáis en la línea:
\n<img src={logo} className=\"App-logo\" alt=\"logo\" />\nTenemos las dos cosas, usamos el logo dentro de src y ya estamos usando tambien nombres de clases del fichero css.
\nEn este punto faltaría solo comentar la última y casi la más importante del conjunto (en este punto jejeje):
\nexport default App;\nEsta línea lo que indica es que por defecto cuando se haga un import de este fichero se importe el componente App. Un detalle importante, sin export no importamos nada, si comentáramos esa línea tendríamos este resultado:
\n
Creo que más o menos se entiende todo, solo comentar que si quisieramos cambiar el componente App por otro solo tendríamos que crear el componente como queramos ponerle la línea export y cambiar el
Como vemos prácticamente todo lo haremos dentro de la carpeta src y sigue manteniendo el nivel de sencillez que hemos estado viendo.
\nSin mucho más nos vemos en el siguiente. Un abrazoooooooo
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En el post anterior creamos un proyecto de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"React"}]},{"type":"text","value":" usando el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"CLI"}]},{"type":"text","value":" que nos proporcionan los creadores del mismo. Esta herramienta de linea de comandos nos crea un proyecto base desde el que partir y como vimos cuando usamos "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"npm start"}]},{"type":"text","value":" para arrancar nuestro servidor de desarrollo, la herramienta nos muestra una página similar a esta:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-04-at-09.26.57.png","alt":"React base page"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos un poco la estructura del proyecto y desde donde podemos empezar a trabajar."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nLo primero veamos lo que tenemos:"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/09/Screen-Shot-2017-09-04-at-09.29.33.png","alt":"Folders Base Project"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En lo primero que nos tenemos que fijar es en los "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index"}]},{"type":"text","value":" tanto el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"js"}]},{"type":"text","value":", como el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"html"}]},{"type":"text","value":", ya que son desde donde se empieza a llamar al resto. Si miramos el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.html"}]},{"type":"text","value":" tenemos una pagina html con varios tags pero lo que nos importa realmente es algo que ya hemos visto:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":" \n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Recordemos que es en ese punto donde se empieza a componer nuestra aplicación."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo siguiente miremos dentro de la carpeta "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":" y veamos el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.js"}]},{"type":"text","value":" que aqui tenemos varias cosas interesantes:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport registerServiceWorker from './registerServiceWorker';\n\n\nReactDOM.render(\n To get started, edit src/App.js and save to reload.\n
0
\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":"