{"id":57,"date":"2017-05-30T16:53:39","date_gmt":"2017-05-30T21:53:39","guid":{"rendered":"http:\/\/www.sientifica.com\/blog\/?p=57"},"modified":"2020-01-31T18:11:06","modified_gmt":"2020-01-31T23:11:06","slug":"notas-sobre-react-js","status":"publish","type":"post","link":"https:\/\/www.sientifica.com\/blog\/2017\/05\/30\/notas-sobre-react-js\/","title":{"rendered":"Notas sobre React JS"},"content":{"rendered":"\n<p>En este post registro todas las notas cortas pero que considero importantes sobre la librer\u00eda <a href=\"https:\/\/facebook.github.io\/react\/\" target=\"_blank\" rel=\"noopener noreferrer\">React JS<\/a> y su ecosistema de librerias complementarias, la idea es poder registrar en un solo parrafo, la idea general que intento mantener fresca en mi memoria.<\/p>\n\n\n\n<p>[Nota 1] Todo comienza con la renderizaci\u00f3n de un elemento (<a href=\"https:\/\/facebook.github.io\/react\/docs\/rendering-elements.html\" target=\"_blank\" rel=\"noopener noreferrer\">React Element<\/a>), iniciar una aplicaci\u00f3n con React es tan sencillo como utilizar estas dos l\u00edneas de c\u00f3digo:<code lang=\"ecmascript[lines-notools]\">let&nbsp;element&nbsp;=&nbsp;React.createElement({div,&nbsp;{className:'main'},''});<br>\nReactDOM.render(element,document.getElementById('app'));<\/code><\/p>\n\n\n\n<p>[Nota 2] Existen tres conceptos que se relacionan que hay que entender correctamente, los elementos, los componentes y las instancias de componentes.<\/p>\n\n\n\n<p>Los elementos son objetos javascript planos que describen lo que se quiere renderizar en pantalla, no tienen estado y son inmutables. Un elemento pueden referenciar a otros elementos, de esta manera se construye un arbol (de elementos) que en \u00faltimas es una representaci\u00f3n en memoria de lo que es el DOM de una aplicaci\u00f3n, en la realidad, este arbol de elementos react es lo que define como el <a href=\"https:\/\/medium.com\/@rajikaimal\/react-js-internals-virtual-dom-d054347b7f00\" target=\"_blank\" rel=\"noopener noreferrer\">virtual dom<\/a>.<\/p>\n\n\n\n<p>Un componente es una pieza de c\u00f3digo ejecutable, que recibe propiedades como par\u00e1metros y retorna (a trav\u00e9s de un m\u00e9todo que por convenci\u00f3n se denomina render()) un elemento de react, se define como &#8220;una pieza de c\u00f3digo ejecutable&#8221; por que un componente puede ser definido como un clase (que extiende de <a href=\"https:\/\/facebook.github.io\/react\/docs\/react-component.html\" target=\"_blank\" rel=\"noopener noreferrer\">React.Component<\/a>) o como una funci\u00f3n que recibe un objeto con propiedades y retorna un elemento react.<\/p>\n\n\n\n<p>Las siguientes dos definiciones son equivalentes para definir un componente React<\/p>\n\n\n\n<p><code lang=\"ecmascript[lines]\">class&nbsp;App&nbsp;extends&nbsp;React.Component{<\/code><\/p>\n\n\n\n<p>construct(props){<\/p>\n\n\n\n<p>super(props)<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>render(){<\/p>\n\n\n\n<p>return&nbsp;&lt;div&nbsp;className=&#8221;{this.props.class}&#8221;&gt;Hola&nbsp;Mundo<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><code lang=\"ecmascript\">function&nbsp;app(props){<\/code><\/p>\n\n\n\n<p>return&nbsp;&lt;div&nbsp;class=&#8217;props.class&#8217;&gt;Hola&nbsp;Mundo<\/p>\n\n\n\n<p>}<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este post registro todas las notas cortas pero que considero importantes sobre la librer\u00eda React JS y su ecosistema de librerias complementarias, la idea es poder registrar en un &#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/www.sientifica.com\/blog\/wp-json\/wp\/v2\/posts\/57"}],"collection":[{"href":"https:\/\/www.sientifica.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sientifica.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sientifica.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sientifica.com\/blog\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":7,"href":"https:\/\/www.sientifica.com\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/www.sientifica.com\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/www.sientifica.com\/blog\/wp-json\/wp\/v2\/media?parent=57"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sientifica.com\/blog\/wp-json\/wp\/v2\/categories?post=57"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sientifica.com\/blog\/wp-json\/wp\/v2\/tags?post=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}