\n
![\"PlaceHolder](\"https://jlgarcia.fulldev.ninja/assets/images/2017/07/Screen-Shot-2017-07-29-at-19.51.45.png\")
\nVemos como nos añade el contenido de la key nombre, "pues muy bien, y esto pa que cansino??" diréis...vale realmente Your superName es un placeholder, la idea es que ese texto cambie en algún momento.
Vamos a empezar a ver donde está realmente la gracia de esta librería, lo que vimos en el post de introducción bien lo podíamos tener con un poco de código HTML de toda la vida. Ahora vamos a darle algo de dinamismo a nuestro código.
\nTeníamos este código al final de nuestro primer post:
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="UTF-8" />\n <title>Hello World</title>\n <!-- Libreria para trabajar con React -->\n <script src="https://unpkg.com/react@latest/dist/react.js"></script>\n <!-- Libreria de react para trabajar con el Dom-->\n <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>\n <!--Preprocesador para traducir lo que escribimos a todos los navegadores ya que react funciona con ECS6 y puede que no \n funcione en todos -->\n <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>\n <script type="text/babel">\n\n class SuperComponente extends React.Component{\n render(){\n return (\n <div>\n <h2>Hello with React</h2>\n <MiSegundoComponente/>\n </div>\n );\n }\n }\n\n class MiSegundoComponente extends React.Component{\n render(){\n return (\n <h2>REACT is in the HOUSE...YEAH!!!!</h2> \n )\n }\n }\n\n ReactDOM.render(\n <SuperComponente/>,\n document.getElementById('root')\n );\n\n </script>\n \n </head>\n <body>\n <div id="root"></div>\n </body>\n</html>\nBien tenemos 2 componentes y los renderizamos dentro del body en nuestro div con id root, pues bien, vamos a añadir/modificar lo siguiente en nuestro MiSegundoComponente:
\nclass MiSegundoComponente extends React.Component{\n constructor(){\n super();\n this.name = {\n nombre: "Your Super Name"\n }\n }\n render(){\n return (\n <div>\n <h2>REACT is in the HOUSE...YEAH!!!!</h2>\n <h4> { this.name.nombre } </h4>\n </div>\n )\n }\n}\nLo que hacemos es crear un método constructor (OJO es palabra reservada no es que lo haya puesto yo), por el momento siempre llamamos a super (esencial para que se ejecute), y hacemos que nuestra instancia del componente (nuestro amigo this) tenga una propiedad name, que es un objeto de clave=valor en este caso con una key nombre con un texto. Asimismo en la parte de render entre {}, llamamos a this, es decir, a la instancia de nuestro componente, pasándole la propiedad y el key que hemos creado. ESTO SERIA PROPIO DE JSX, este superpoder nos permite añadir JS en nuestro código HTML. Si ahora ejecutamos esto:
\n
\nVemos como nos añade el contenido de la key nombre, "pues muy bien, y esto pa que cansino??" diréis...vale realmente Your superName es un placeholder, la idea es que ese texto cambie en algún momento.
Para ello necesitamos "escuchar algo en algún sitio" y hacérselo saber a nuestra propiedad nombre. Pero... ¿como hacemos esto? Muy fácil, vamos por partes, primero como "escuchamos":
\n//Añadimos un input con la propiedad onChange\n<input onChange={}/>\n<h4> { this.name.nombre } </h4>\nY esto que hace, básicamente envía los eventos de cambio de ese elemento a lo que tengamos dentro de {} y ¿que debemos poner dentro? pues como es costumbre un método que creemos a través de nuestra instancia(this):
\n//Fuera de render\ngetName(input){\n console.log(input)\n}\n\n//Dentro de render\n<input onChange={this.getName}></input>\n<h4> { this.name.nombre } </h4>\nComo véis tenemos un método getName que recibe algo por parámetro, y le pasamos dentro del onChange, nuestra instancia llamando al método getName. De momento le ponemos un console.log para que podamos ver que es lo que nos pasa cada vez que escribimos. Si guardamos y abrimos nuestro index.html, cada vez que escribamos algo en nuestro input, recibiremos algo del estilo a esto:
\n![\"Input](\"https://jlgarcia.fulldev.ninja/assets/images/2017/07/Screen-Shot-2017-07-29-at-20.18.10.png\")
\nEs un objeto con nombre Proxy y mogollón de información. Es un estilo de elemento clásico de eventos(digo estilo), pero claro no es lo que realmente buscamos, como conseguimos el contenido de nuestro input:
getName(input){\n console.log(input.target.value)\n}\nEsto lo habréis tenido que ver alguna vez ya, simplemente buscamos el value del target de nuestro elemento, y ahora nuesto console.log nos ofrece, esta información según escribimos:
\n![\"Input](\"https://jlgarcia.fulldev.ninja/assets/images/2017/07/Screen-Shot-2017-07-29-at-20.22.58.png\")
\nBien ya tenemos lo que necesitamos, ahora completemos la función para que nos modifique nuestro placeholder.
getName(input){\n this.setState(this.name = {nombre: input.target.value});\n}\nPara modificar "el estado" de un objeto o elemento del DOM tenemos el método o propiedad setState, el cual modificaría solo lo que le pasemos entre ().
\nTeóricamente sería algo como esto, pero lo habéis probado? Si lo probáis veréis que no funciona,nos indica que this es undefined
\n![\"This](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-02-at-08.33.45.png\")
\npero.....¿por qué? Básicamente porque this no está disponible como propiedad u objeto de las funciones o métodos que nosotros mismos creamos, para hacer que funcione es necesario enlazar(bind) el this con el contexto de ejecución. Para ello solo seria necesario hacer el siguiente cambio:
<div>\n <h2>REACT is in the HOUSE...YEAH!!!!</h2>\n <input onChange={this.getName.bind(this)}></input>\n <h4> { this.name.nombre } </h4>\n</div>\nComo veis dentro de nuestro método render le hemos añadido bind(this), es decir, enlazame el this de render con mi método getName et voilá:
\n![\"Its](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Screen-Shot-2017-08-02-at-08.41.36.png\")
\nRealmente es todo muy sencillo ¿verdad?
\nAntes de terminar con este post me faltaría comentar otro concepto, fijaros en esta parte del código que casi no hemos comentado:
this.setState(this.name = {nombre: input.target.value});\nHemos hablado de la propiedad setState pero no mucho de lo que hay dentro, si miráis un poco el código esto es prácticamente lo mismo que tenemos dentro de nuestro método constructor(es un poco feo no?). Pues bien realmente la propiedad tiene un motivo por el que se llama setState() y es porque el método constructor ya está preparado para gestionar los cambios de estado, si cambiamos el nombre de la propiedad y en lugar de name ponemos state:
\nconstructor(){\n super();\n this.state = {\n nombre: "Your Super Name"\n }\n}\nVeamos como tendría que quedar nuestro método getName:
\ngetName(input){\n this.setState({nombre: input.target.value});\n}\nY que no se nos olvide cambiar nuestro placeholder:
\n<input onChange={this.getName.bind(this)}></input>\n<h4> { this.state.nombre } </h4>\nSi lo probáis veréis que todo funciona correctamente y hemos quitado alguna cosa que no quedaba del todo bien, aún así puede que algún momento queramos usarlo por lo que solo tenemos que recordar que si en el constructor no lo hacemos todo dentro del this.state, a la hora de usarlo es necesario indicar la estructura completa del objeto o propiedad que queremos cambiar.
\nEn el próximo post veremos como comunicarnos entre componentes y alguna cosa más. Nos vemooooooos
Vamos a empezar a ver donde está realmente la gracia de esta librería, lo que vimos en el post de introducción bien lo podíamos tener con un poco de código HTML de toda la vida. Ahora vamos a darle algo de dinamismo a nuestro código.
\nTeníamos este código al final de nuestro primer post:
<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\" />\n <title>Hello World</title>\n <!-- Libreria para trabajar con React -->\n <script src=\"https://unpkg.com/react@latest/dist/react.js\"></script>\n <!-- Libreria de react para trabajar con el Dom-->\n <script src=\"https://unpkg.com/react-dom@latest/dist/react-dom.js\"></script>\n <!--Preprocesador para traducir lo que escribimos a todos los navegadores ya que react funciona con ECS6 y puede que no \n funcione en todos -->\n <script src=\"https://unpkg.com/babel-standalone@6.15.0/babel.min.js\"></script>\n <script type=\"text/babel\">\n\n class SuperComponente extends React.Component{\n render(){\n return (\n <div>\n <h2>Hello with React</h2>\n <MiSegundoComponente/>\n </div>\n );\n }\n }\n\n class MiSegundoComponente extends React.Component{\n render(){\n return (\n <h2>REACT is in the HOUSE...YEAH!!!!</h2> \n )\n }\n }\n\n ReactDOM.render(\n <SuperComponente/>,\n document.getElementById('root')\n );\n\n </script>\n \n </head>\n <body>\n <div id=\"root\"></div>\n </body>\n</html>\nBien tenemos 2 componentes y los renderizamos dentro del body en nuestro div con id root, pues bien, vamos a añadir/modificar lo siguiente en nuestro MiSegundoComponente:
\nclass MiSegundoComponente extends React.Component{\n constructor(){\n super();\n this.name = {\n nombre: \"Your Super Name\"\n }\n }\n render(){\n return (\n <div>\n <h2>REACT is in the HOUSE...YEAH!!!!</h2>\n <h4> { this.name.nombre } </h4>\n </div>\n )\n }\n}\nLo que hacemos es crear un método constructor (OJO es palabra reservada no es que lo haya puesto yo), por el momento siempre llamamos a super (esencial para que se ejecute), y hacemos que nuestra instancia del componente (nuestro amigo this) tenga una propiedad name, que es un objeto de clave=valor en este caso con una key nombre con un texto. Asimismo en la parte de render entre {}, llamamos a this, es decir, a la instancia de nuestro componente, pasándole la propiedad y el key que hemos creado. ESTO SERIA PROPIO DE JSX, este superpoder nos permite añadir JS en nuestro código HTML. Si ahora ejecutamos esto:
\n
\nVemos como nos añade el contenido de la key nombre, \"pues muy bien, y esto pa que cansino??\" diréis...vale realmente Your superName es un placeholder, la idea es que ese texto cambie en algún momento.
Para ello necesitamos \"escuchar algo en algún sitio\" y hacérselo saber a nuestra propiedad nombre. Pero... ¿como hacemos esto? Muy fácil, vamos por partes, primero como \"escuchamos\":
\n//Añadimos un input con la propiedad onChange\n<input onChange={}/>\n<h4> { this.name.nombre } </h4>\nY esto que hace, básicamente envía los eventos de cambio de ese elemento a lo que tengamos dentro de {} y ¿que debemos poner dentro? pues como es costumbre un método que creemos a través de nuestra instancia(this):
\n//Fuera de render\ngetName(input){\n console.log(input)\n}\n\n//Dentro de render\n<input onChange={this.getName}></input>\n<h4> { this.name.nombre } </h4>\nComo véis tenemos un método getName que recibe algo por parámetro, y le pasamos dentro del onChange, nuestra instancia llamando al método getName. De momento le ponemos un console.log para que podamos ver que es lo que nos pasa cada vez que escribimos. Si guardamos y abrimos nuestro index.html, cada vez que escribamos algo en nuestro input, recibiremos algo del estilo a esto:
\n
\nEs un objeto con nombre Proxy y mogollón de información. Es un estilo de elemento clásico de eventos(digo estilo), pero claro no es lo que realmente buscamos, como conseguimos el contenido de nuestro input:
getName(input){\n console.log(input.target.value)\n}\nEsto lo habréis tenido que ver alguna vez ya, simplemente buscamos el value del target de nuestro elemento, y ahora nuesto console.log nos ofrece, esta información según escribimos:
\n
\nBien ya tenemos lo que necesitamos, ahora completemos la función para que nos modifique nuestro placeholder.
getName(input){\n this.setState(this.name = {nombre: input.target.value});\n}\nPara modificar \"el estado\" de un objeto o elemento del DOM tenemos el método o propiedad setState, el cual modificaría solo lo que le pasemos entre ().
\nTeóricamente sería algo como esto, pero lo habéis probado? Si lo probáis veréis que no funciona,nos indica que this es undefined
\n
\npero.....¿por qué? Básicamente porque this no está disponible como propiedad u objeto de las funciones o métodos que nosotros mismos creamos, para hacer que funcione es necesario enlazar(bind) el this con el contexto de ejecución. Para ello solo seria necesario hacer el siguiente cambio:
<div>\n <h2>REACT is in the HOUSE...YEAH!!!!</h2>\n <input onChange={this.getName.bind(this)}></input>\n <h4> { this.name.nombre } </h4>\n</div>\nComo veis dentro de nuestro método render le hemos añadido bind(this), es decir, enlazame el this de render con mi método getName et voilá:
\n
\nRealmente es todo muy sencillo ¿verdad?
\nAntes de terminar con este post me faltaría comentar otro concepto, fijaros en esta parte del código que casi no hemos comentado:
this.setState(this.name = {nombre: input.target.value});\nHemos hablado de la propiedad setState pero no mucho de lo que hay dentro, si miráis un poco el código esto es prácticamente lo mismo que tenemos dentro de nuestro método constructor(es un poco feo no?). Pues bien realmente la propiedad tiene un motivo por el que se llama setState() y es porque el método constructor ya está preparado para gestionar los cambios de estado, si cambiamos el nombre de la propiedad y en lugar de name ponemos state:
\nconstructor(){\n super();\n this.state = {\n nombre: \"Your Super Name\"\n }\n}\nVeamos como tendría que quedar nuestro método getName:
\ngetName(input){\n this.setState({nombre: input.target.value});\n}\nY que no se nos olvide cambiar nuestro placeholder:
\n<input onChange={this.getName.bind(this)}></input>\n<h4> { this.state.nombre } </h4>\nSi lo probáis veréis que todo funciona correctamente y hemos quitado alguna cosa que no quedaba del todo bien, aún así puede que algún momento queramos usarlo por lo que solo tenemos que recordar que si en el constructor no lo hacemos todo dentro del this.state, a la hora de usarlo es necesario indicar la estructura completa del objeto o propiedad que queremos cambiar.
\nEn el próximo post veremos como comunicarnos entre componentes y alguna cosa más. Nos vemooooooos
Comienzo otra nueva sección también dedicada al mundo JavaScript en este caso de NodeJS pero...
\nBien en este caso la mejor explicación corta es la de la página oficial de NodeJS:
\n\n\nNode.js® es un entorno de ejecución para JavaScript construido con el motor de JavaScript V8 de Chrome. Node.js usa un modelo de operaciones E/S sin bloqueo y orientado a eventos, que lo hace liviano y eficiente. El ecosistema de paquetes de Node.js, npm, es el ecosistema mas grande de librerías de código abierto en el mundo.
\n
Para aclarar un poco NodeJS es la parte de backend de JavaScript y uno de sus puntos fuertes al ser no bloqueante (como dice arriba) es la concurrencia, es decir maneja peticiones sin detenerse o bloquear las que le llegan (tiene límites por supuesto) y esta orientado a eventos, que para el que no lo sepa este tipo de programación basa su funcionamiento en eventos o mensajes recibidos desde otros hilos, programas....desde donde sea.
\nOtro de sus puntos fuertes es npm, ¿y esto que es? bueno como hemos comentado arriba es el gestor de paquetes de código abierto más grande del mundo (orientados a JS), en el que podemos encontrar librerías de casi todo lo que se nos ocurra al ser open-source se beneficia de que cualquiera puede subir paquetes por lo que el límite es prácticamente la imaginación ;)
\nEn un principio esta sección esta centrada solo en NodeJS pero en los primeros posts comentaré algunas características de JavaScript que nos ayudarán en el entendimiento del conjunto, de todas formas ya os adelanto que posiblemente haga alguna sección con pequeños trucos o ejemplos de uso de JS.
\nHablaremos de Node no de JS pero si explicaremos lo necesario para entender lo que estamos haciendo.
Veamos un poco de que va esto de Node.
\nNo me voy a entretener en la instalación en la página oficial de Node viene muy bien explicado lo que tenemos que hacer en cada plataforma (en el caso de que sea distinto de descargar e instalar jejejeje)
\nYo recomiendo instalar la versión LTS ya que es a la que van dando soporte a lo largo del tiempo, las nuevas pueden tener bugs o dar problemas, pero podéis probar si queréis jejeje.
\nLa instalación nos provee también de npm por lo que ya lo tendríamos también disponible para usarlo. Más adelante iremos viendo como usar npm y que tenemos que tener en cuenta de su uso.
Pues sin mucho más vamos a empezar por ver algo de JavaScript.
\nEn node todos los usos de entrada o salida deberían ser asíncronos (no deben bloquear el hilo principal que es el que gestiona ), y una gran parte de la ayuda la obtenemos de los callbacks. Y que son los callbacks, para explicarlo de forma sencilla podríamos decir que son funciones que estando en el ciclo de vida de otra se ejecutan al final, es decir, son funciones que se llaman al terminar otra y no antes(aprovechándonos muchas veces de la posibilidad de pasar funciones como parámetros), veamos un ejemplo de función asíncrona con callbacks, para ello nos ayudaremos de la función setTimeout que para el que no lo sepa nos da la posibilidad de ejecutar algo tras el periodo de tiempo que le indiquemos:
\n"use strict";\n\nconsole.log('Empezamos');\n\nfunction showAfter2Seconds(text, callbackFunc){\n setTimeout(()=>{\n console.log(text);\n\n callbackFunc();\n\n },2000);\n}\n\nshowAfter2Seconds('Pasaron 2 segundos',()=>{\n console.log('Soy el callback');\n});\n\nconsole.log('Estoy fuera de la función')\nPara ejecutarlo solo tenemos que usar el comando node seguido del nombre de nuestro fichero js:
\nnode callbacks.js\nY tendriamos algo como esto:
\n![\"Callback](\"https://jlgarcia.fulldev.ninja/assets/images/2017/08/callbackDemo.gif\")
\nComo vemos primero nos muestra 'Empezamos' y luego directamente vemos 'Estoy fuera de la función' pero...¿por qué?. Bien esto de debe a como funciona la asincronía en sí, cuando trabajamos con asincronía tenemos que pensar que tenemos más de 1 trabajador jugando con nuestro código, tenemos el principal(el que manda) el que siempre curra y luego tenemos a los que este llama para que trabajen en segundo plano mientras el continua, es decir, cuando nuestro worker principal se encuentra con código asíncrono avisa a un compi para que lo haga y el continúa por donde estaba sin detenerse, por eso nos retorna el log que esta al final, porque el hilo principal ha llegado allí antes de que nuesto worker en segundo plano terminara. Pero claro esto no es tan simple como usar una función como parámetro y ya está, no nos confundamos, usar una función como parámetro y llamarla cuando nos interese es solo una ventaja del lenguaje que nos ayuda a evitar lo que se conoce como race condition, y que se ejecute nuestro código como nosotros queremos, si nosotros quitamos el setTimeout y ponemos otro tipo de función que nos detenga la ejecución lo que haría el código seria pararse en ese punto, devolver 'Soy el callback' y a continuación nos mostraría nuestro log 'Estoy fuera de la función'. En este caso lo que sucede es que setTimeout es una función asíncrona de por sí, es decir, cuando nuestro hilo principal se encuentra con esta función llama a algún compi disponible para que la ejecute y ya el compi es el responsable de lo que pase dentro de setTimeout, puede que sea un poco lioso y yo me haya extendido mucho en este punto pero es realmente IMPORTANTE entender esto para poder trabajar bien con NodeJS. Node comunmente se usa con una librería llamada async, la cual nos abstrae un poco de tener que hacer funciones como la que hemos visto arriba para usar asincronia, la documentación oficial esta muy bien explicada por lo que creo que es suficiente con que miréis un poco de que va aquí.
Bueno para empezar creo que es suficiente nos vemosss en el siguiente Ninjaaaassssssss
\n","url":"https://jlgarcia.fulldev.ninja/dont-stop-the-party-node-js-i/","canonical_url":null,"uuid":"9ebd7605-d6ad-4c5a-b3ee-d91dafb57a16","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"43","reading_time":4,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"Comienzo otra nueva sección también dedicada al mundo JavaScript en este caso de NodeJS pero...
\nBien en este caso la mejor explicación corta es la de la página oficial de NodeJS:
\n\n\nNode.js® es un entorno de ejecución para JavaScript construido con el motor de JavaScript V8 de Chrome. Node.js usa un modelo de operaciones E/S sin bloqueo y orientado a eventos, que lo hace liviano y eficiente. El ecosistema de paquetes de Node.js, npm, es el ecosistema mas grande de librerías de código abierto en el mundo.
\n
Para aclarar un poco NodeJS es la parte de backend de JavaScript y uno de sus puntos fuertes al ser no bloqueante (como dice arriba) es la concurrencia, es decir maneja peticiones sin detenerse o bloquear las que le llegan (tiene límites por supuesto) y esta orientado a eventos, que para el que no lo sepa este tipo de programación basa su funcionamiento en eventos o mensajes recibidos desde otros hilos, programas....desde donde sea.
\nOtro de sus puntos fuertes es npm, ¿y esto que es? bueno como hemos comentado arriba es el gestor de paquetes de código abierto más grande del mundo (orientados a JS), en el que podemos encontrar librerías de casi todo lo que se nos ocurra al ser open-source se beneficia de que cualquiera puede subir paquetes por lo que el límite es prácticamente la imaginación ;)
\nEn un principio esta sección esta centrada solo en NodeJS pero en los primeros posts comentaré algunas características de JavaScript que nos ayudarán en el entendimiento del conjunto, de todas formas ya os adelanto que posiblemente haga alguna sección con pequeños trucos o ejemplos de uso de JS.
\nHablaremos de Node no de JS pero si explicaremos lo necesario para entender lo que estamos haciendo.
Veamos un poco de que va esto de Node.
\nNo me voy a entretener en la instalación en la página oficial de Node viene muy bien explicado lo que tenemos que hacer en cada plataforma (en el caso de que sea distinto de descargar e instalar jejejeje)
\nYo recomiendo instalar la versión LTS ya que es a la que van dando soporte a lo largo del tiempo, las nuevas pueden tener bugs o dar problemas, pero podéis probar si queréis jejeje.
\nLa instalación nos provee también de npm por lo que ya lo tendríamos también disponible para usarlo. Más adelante iremos viendo como usar npm y que tenemos que tener en cuenta de su uso.
Pues sin mucho más vamos a empezar por ver algo de JavaScript.
\nEn node todos los usos de entrada o salida deberían ser asíncronos (no deben bloquear el hilo principal que es el que gestiona ), y una gran parte de la ayuda la obtenemos de los callbacks. Y que son los callbacks, para explicarlo de forma sencilla podríamos decir que son funciones que estando en el ciclo de vida de otra se ejecutan al final, es decir, son funciones que se llaman al terminar otra y no antes(aprovechándonos muchas veces de la posibilidad de pasar funciones como parámetros), veamos un ejemplo de función asíncrona con callbacks, para ello nos ayudaremos de la función setTimeout que para el que no lo sepa nos da la posibilidad de ejecutar algo tras el periodo de tiempo que le indiquemos:
\n\"use strict\";\n\nconsole.log('Empezamos');\n\nfunction showAfter2Seconds(text, callbackFunc){\n setTimeout(()=>{\n console.log(text);\n\n callbackFunc();\n\n },2000);\n}\n\nshowAfter2Seconds('Pasaron 2 segundos',()=>{\n console.log('Soy el callback');\n});\n\nconsole.log('Estoy fuera de la función')\nPara ejecutarlo solo tenemos que usar el comando node seguido del nombre de nuestro fichero js:
\nnode callbacks.js\nY tendriamos algo como esto:
\n
\nComo vemos primero nos muestra 'Empezamos' y luego directamente vemos 'Estoy fuera de la función' pero...¿por qué?. Bien esto de debe a como funciona la asincronía en sí, cuando trabajamos con asincronía tenemos que pensar que tenemos más de 1 trabajador jugando con nuestro código, tenemos el principal(el que manda) el que siempre curra y luego tenemos a los que este llama para que trabajen en segundo plano mientras el continua, es decir, cuando nuestro worker principal se encuentra con código asíncrono avisa a un compi para que lo haga y el continúa por donde estaba sin detenerse, por eso nos retorna el log que esta al final, porque el hilo principal ha llegado allí antes de que nuesto worker en segundo plano terminara. Pero claro esto no es tan simple como usar una función como parámetro y ya está, no nos confundamos, usar una función como parámetro y llamarla cuando nos interese es solo una ventaja del lenguaje que nos ayuda a evitar lo que se conoce como race condition, y que se ejecute nuestro código como nosotros queremos, si nosotros quitamos el setTimeout y ponemos otro tipo de función que nos detenga la ejecución lo que haría el código seria pararse en ese punto, devolver 'Soy el callback' y a continuación nos mostraría nuestro log 'Estoy fuera de la función'. En este caso lo que sucede es que setTimeout es una función asíncrona de por sí, es decir, cuando nuestro hilo principal se encuentra con esta función llama a algún compi disponible para que la ejecute y ya el compi es el responsable de lo que pase dentro de setTimeout, puede que sea un poco lioso y yo me haya extendido mucho en este punto pero es realmente IMPORTANTE entender esto para poder trabajar bien con NodeJS. Node comunmente se usa con una librería llamada async, la cual nos abstrae un poco de tener que hacer funciones como la que hemos visto arriba para usar asincronia, la documentación oficial esta muy bien explicada por lo que creo que es suficiente con que miréis un poco de que va aquí.
Bueno para empezar creo que es suficiente nos vemosss en el siguiente Ninjaaaassssssss
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Comienzo otra nueva sección también dedicada al mundo JavaScript en este caso de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"NodeJS"}]},{"type":"text","value":" pero..."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"queesnodejs"},"children":[{"type":"text","value":"¿Que es NodeJS?"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien en este caso la mejor explicación corta es la de la página oficial de "},{"type":"element","tagName":"a","properties":{"href":"https://nodejs.org/es/"},"children":[{"type":"text","value":"NodeJS"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Node.js® es un entorno de ejecución para JavaScript construido con el motor de JavaScript V8 de Chrome. Node.js usa un modelo de operaciones E/S sin bloqueo y orientado a eventos, que lo hace liviano y eficiente. El ecosistema de paquetes de Node.js, npm, es el ecosistema mas grande de librerías de código abierto en el mundo."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para aclarar un poco NodeJS es la parte de backend de JavaScript y uno de sus puntos fuertes al ser "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"no bloqueante"}]},{"type":"text","value":" (como dice arriba) es la concurrencia, es decir maneja peticiones sin detenerse o bloquear las que le llegan (tiene límites por supuesto) y esta orientado a eventos, que para el que no lo sepa este tipo de programación basa su funcionamiento en eventos o mensajes recibidos desde otros hilos, programas....desde donde sea."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Otro de sus puntos fuertes es "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":", ¿y esto que es? bueno como hemos comentado arriba es el gestor de paquetes de código abierto más grande del mundo (orientados a JS), en el que podemos encontrar librerías de casi todo lo que se nos ocurra al ser "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"open-source"}]},{"type":"text","value":" se beneficia de que cualquiera puede subir paquetes por lo que el límite es prácticamente la imaginación ;)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En un principio esta sección esta centrada solo en "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"NodeJS"}]},{"type":"text","value":" pero en los primeros posts comentaré algunas características de JavaScript que nos ayudarán en el entendimiento del conjunto, de todas formas ya os adelanto que posiblemente haga alguna sección con pequeños trucos o ejemplos de uso de JS."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nHablaremos de Node no de JS pero si explicaremos lo necesario para entender lo que estamos haciendo."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos un poco de que va esto de Node."}]},{"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":"No me voy a entretener en la instalación en la página oficial de "},{"type":"element","tagName":"a","properties":{"href":"https://nodejs.org/es/"},"children":[{"type":"text","value":"Node"}]},{"type":"text","value":" viene muy bien explicado lo que tenemos que hacer en cada plataforma (en el caso de que sea distinto de descargar e instalar jejejeje)"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nYo recomiendo instalar la versión "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"LTS"}]},{"type":"text","value":" ya que es a la que van dando soporte a lo largo del tiempo, las nuevas pueden tener bugs o dar problemas, pero podéis probar si queréis jejeje."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nLa instalación nos provee también de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" por lo que ya lo tendríamos también disponible para usarlo. Más adelante iremos viendo como usar npm y que tenemos que tener en cuenta de su uso."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pues sin mucho más vamos a empezar por ver algo de JavaScript."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"callbacks"},"children":[{"type":"text","value":"Callbacks"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En node todos los usos de entrada o salida deberían ser asíncronos (no deben bloquear el hilo principal que es el que gestiona ), y una gran parte de la ayuda la obtenemos de los callbacks. Y que son los callbacks, para explicarlo de forma sencilla podríamos decir que son funciones que estando en el ciclo de vida de otra se ejecutan al final, es decir, son funciones que se llaman al terminar otra y no antes(aprovechándonos muchas veces de la posibilidad de pasar funciones como parámetros), veamos un ejemplo de función asíncrona con callbacks, para ello nos ayudaremos de la función "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setTimeout"}]},{"type":"text","value":" que para el que no lo sepa nos da la posibilidad de ejecutar algo tras el periodo de tiempo que le indiquemos:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\"use strict\";\n\nconsole.log('Empezamos');\n\nfunction showAfter2Seconds(text, callbackFunc){\n setTimeout(()=>{\n console.log(text);\n\n callbackFunc();\n\n },2000);\n}\n\nshowAfter2Seconds('Pasaron 2 segundos',()=>{\n console.log('Soy el callback');\n});\n\nconsole.log('Estoy fuera de la función')\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para ejecutarlo solo tenemos que usar el comando "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"node"}]},{"type":"text","value":" seguido del nombre de nuestro fichero js:"}]},{"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":"node callbacks.js\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y tendriamos algo como esto:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/08/callbackDemo.gif","alt":"Callback Demo"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComo vemos primero nos muestra "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"'Empezamos'"}]},{"type":"text","value":" y luego directamente vemos "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"'Estoy fuera de la función'"}]},{"type":"text","value":" pero...¿por qué?. Bien esto de debe a como funciona la asincronía en sí, cuando trabajamos con asincronía tenemos que pensar que tenemos más de 1 trabajador jugando con nuestro código, tenemos el principal(el que manda) el que siempre curra y luego tenemos a los que este llama para que trabajen en segundo plano "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"mientras el continua"}]},{"type":"text","value":", es decir, cuando nuestro worker principal se encuentra con código asíncrono avisa a un compi para que lo haga y el continúa por donde estaba sin detenerse, por eso nos retorna el log que esta al final, porque el hilo principal ha llegado allí antes de que nuesto worker en segundo plano terminara. Pero claro esto no es tan simple como usar una función como parámetro y ya está, no nos confundamos, usar una función como parámetro y llamarla cuando nos interese es solo una ventaja del lenguaje que nos ayuda a evitar lo que se conoce como "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"race condition"}]},{"type":"text","value":", y que se ejecute nuestro código como nosotros queremos, si nosotros quitamos el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setTimeout"}]},{"type":"text","value":" y ponemos otro tipo de función que nos detenga la ejecución lo que haría el código seria pararse en ese punto, devolver "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"'Soy el callback'"}]},{"type":"text","value":" y a continuación nos mostraría nuestro log "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"'Estoy fuera de la función'"}]},{"type":"text","value":". En este caso lo que sucede es que "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setTimeout"}]},{"type":"text","value":" es una función "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"asíncrona"}]},{"type":"text","value":" de por sí, es decir, cuando nuestro hilo principal se encuentra con esta función llama a algún compi disponible para que la ejecute y ya el compi es el responsable de lo que pase dentro de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setTimeout"}]},{"type":"text","value":", puede que sea un poco lioso y yo me haya extendido mucho en este punto pero es realmente "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"IMPORTANTE"}]},{"type":"text","value":" entender esto para poder trabajar bien con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"NodeJS"}]},{"type":"text","value":". Node comunmente se usa con una librería llamada "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"async"}]},{"type":"text","value":", la cual nos abstrae un poco de tener que hacer funciones como la que hemos visto arriba para usar asincronia, la documentación oficial esta muy bien explicada por lo que creo que es suficiente con que miréis un poco de que va "},{"type":"element","tagName":"a","properties":{"href":"https://caolan.github.io/async/"},"children":[{"type":"text","value":"aquí"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bueno para empezar creo que es suficiente nos vemosss en el siguiente Ninjaaaassssssss"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"queesnodejs","heading":"¿Que es NodeJS?","items":[{"id":"instalacin","heading":"Instalación"},{"id":"callbacks","heading":"Callbacks"}]}]},"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"}}}},"next":{"id":"Ghost__Post__5a338158333e0f134c248f1a","title":"React Superhero : Introducción","slug":"react-superhero-introduccion","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/08/Captain-Atom.jpg","excerpt":"Empiezo nueva sección en el blog (tenía muchísimas ganas de empezar con React).\n\nOs cuento un poco que es esto:\n\n * Esta desarrollado por Facebook que aunque no lo parezca nos da algo de\n confianza en cuanto a su durabilidad a la larga y su estabilidad.\n * Se centra mucho en la parte de UI, es decir seria la V del MVC.\n * Es muy útil para construir grandes aplicaciones que cambian con el tiempo.\n * Gracias a su Virtual DOM el rendimiento no se ve severamente afectado cuando\n la información n","custom_excerpt":null,"visibility":"public","created_at_pretty":"29 Jul 2017","published_at_pretty":"7 Aug 2017","updated_at_pretty":"11 Oct 2017","created_at":"2017-07-29T11:24:17.000+02:00","published_at":"2017-08-07T17:33:00.000+02:00","updated_at":"2017-10-11T13:47:25.000+02:00","meta_title":null,"meta_description":null,"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":"Empiezo nueva sección en el blog (tenía muchísimas ganas de empezar con React).\n\nOs cuento un poco que es esto:\n\n * Esta desarrollado por Facebook que aunque no lo parezca nos da algo de\n confianza en cuanto a su durabilidad a la larga y su estabilidad.\n * Se centra mucho en la parte de UI, es decir seria la V del MVC.\n * Es muy útil para construir grandes aplicaciones que cambian con el tiempo.\n * Gracias a su Virtual DOM el rendimiento no se ve severamente afectado cuando\n la información necesita actualizarse.\n * Se basa en componentes, haciéndolos reutilizables fácilmente.\n * Lo podemos integrar a cualquier API.\n * Y es JavaScript :)\n * Se puede integrar con Node, Ruby o cualquier otro lenguaje de backend.\n * Tiene framework para mobile (React Native, que lo venden como 'nativo'), que\n será lo siguiente que veremos cuando terminemos con el básico ;)\n * Usa JSX que es una especie de lenguaje tipo XML para crear nuestros\n componentes. Básicamente nos permite usar código HTML en variables de JS.\n Tenéis mas información sobre esto en la pagina oficial de React\n [https://facebook.github.io/react/docs/introducing-jsx.html].\n\nSuena bien no?? A mi me encanta:\n\n\nPara trabajar con React necesitamos agregar mínimo 3 librerías a nuestro\nproyecto, es decir a nuestro index.html\n\n\n\n\n\n\n\n\n\nBien con esto ya tenemos lo básico para trabajar con React. Como extra yo me\ndescargado un plugin para Visual Studio Code para que reconozca el trabajo con\nbabel en su momento. No es en absoluto necesario.\n\nPues bien antes de continuar hagamos una prueba para comprobar que todo funciona\nbien, si alguno ha trabajado o conoce un poco Angular vera como ciertos\nconceptos con parecidos.\n\nVamos a añadir una cabecera a nuestro fichero HTML usando React, para ello\nincluimos lo siguiente:\n\n\n\n\nComo vemos usamos en lugar de nuestro text/javascript típico, hemos puesto babel \npara que reconozca que tiene que usar babel. Y a continuación le indicamos que\nrenderice en nuestro DOM el HTML que le pasamos, pero......¿donde? bien aquí es\ndonde viene un concepto similar a angular. En Angular 1.5 por ejemplo teníamos\nnuestro ng-app:\n\n\n\n\nDonde le indicabamos donde empezaba a funcionar nuestra WebAPP, pues con React\nel concepto es parecido, si veis en el código superior hemos puesto que busque\nun elemento con el ID root(que podria ser cualquier otro nombre), que sera donde\nrenderice el código, por lo que en algún sitio de nuestro código html tenemos\nque añadirlo jejejejje\n\n\n\n\nBien y si todo ha ido bien tendríamos que tener algo similar a esto:\n\nPerfecto, como prueba de concepto esta bien, pero realmente así no se trabaja\ncon React, es un lenguaje basado en componentes por lo que vamos a empezar por\ncrear nuestro primer componente.\n\nPrimer Componente\nNuestro primer componente solo para ver de una forma rápida y facil como se\nharían, lo crearemos en el mismo index.html, dentro de nuestra etiqueta script\n\n\n\n\n\n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien con esto ya tenemos lo básico para trabajar con React. Como extra yo me descargado un plugin para "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Visual Studio Code"}]},{"type":"text","value":" para que reconozca el trabajo con babel en su momento. No es en absoluto necesario."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pues bien antes de continuar hagamos una prueba para comprobar que todo funciona bien, si alguno ha trabajado o conoce un poco Angular vera como ciertos conceptos con parecidos."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vamos a añadir una cabecera a nuestro fichero HTML usando React, para ello incluimos 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":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como vemos usamos en lugar de nuestro "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"text/javascript"}]},{"type":"text","value":" típico, hemos puesto "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"babel"}]},{"type":"text","value":" para que reconozca que tiene que usar babel. Y a continuación le indicamos que renderice en nuestro DOM el HTML que le pasamos, pero......¿donde? bien aquí es donde viene un concepto similar a angular. En Angular 1.5 por ejemplo teníamos nuestro ng-app:"}]},{"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":"Donde le indicabamos donde empezaba a funcionar nuestra WebAPP, pues con React el concepto es parecido, si veis en el código superior hemos puesto que busque un elemento con el ID "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"root"}]},{"type":"text","value":"(que podria ser cualquier otro nombre), que sera donde renderice el código, por lo que en algún sitio de nuestro código html tenemos que añadirlo jejejejje"}]},{"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":"Bien y si todo ha ido bien tendríamos que tener 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/07/Screen-Shot-2017-07-29-at-14.23.56.png","alt":"React Hello"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPerfecto, como prueba de concepto esta bien, pero realmente así no se trabaja con React, es un lenguaje basado en componentes por lo que vamos a empezar por crear nuestro primer componente."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"primercomponente"},"children":[{"type":"text","value":"Primer Componente"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Nuestro primer componente solo para ver de una forma rápida y facil como se harían, lo crearemos en el mismo index.html, dentro de nuestra etiqueta "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"script"}]}]},{"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":"