Usando React JS. - Educa Sistemas

Breaking

Post Top Ad

Post Top Ad

martes, 17 de julio de 2018

Usando React JS.

Vamos a comenzar con la diversion en react.js, para poder generar un componente con el pseudo lenguaje jsx debemos tener un transpilador que interprete el codigo jsx desde el cliente o realice la compilacion del javascript para que sea legible por el navegador. En la pagina oficial de reactjs podemos encontrar el react starter kit con esto es suficiente para iniciar, aqui podremos encontrar ejemplos donde se define la construccion de componentes a partir de la sintaxis legible por el navegador hasta llegar a la configuracion de una herramienta para el building que nos permita usar jsx en nuestro proyecto. Por ahora haremos un ejercicio sin jsx.


Descargamos el react starter kit de la pagina oficial






Descomprimimos nuestro archivo






Tendremos las siguientes carpetas y ejemplos que nos ofrece el react starter kit







En el ejemplo basic encontraremos un index.html, que importa dos librerias react y react-dom, con react creamos los componentes y con react-dom manipularemos el Virtual DOM.







React.createClass es el metodo del objeto que nos permite generar un nuevo componente, existen diferentes formas para crear un componente y esta es una que nos aporta la libreria para este ejemplo basico sin jsx. Es importante mensionar que la creacion de componentes por este medio nos permite trabajar con los ciclos de vida de react de los cuales hablaremos mas adelante.


La sintaxis es : React.createClass({ render: function(){return React.DOM.p(null, ‘hola mundo’)}); esto nos devolvera una etiqueta p en el componente con el texto ‘hola mundo’.
Como pueden notar la libreria react-dom nos genera elementos del virtual dom, como etiquetas p entre otras.


React.createFactory y React.createElement nos permiten generar nodos de la misma forma, los datos que se puede introducir span, p o html entero en un string indicando de que tipo es el element o factory que se generara.


ReactDOM.render es el metodo que anexara a nuestra vista el componente o conjunto de componentes anidados que coloquemos. Teniendo como resultado













Fuente: https://medium.com/@erifranckN/primer-componente-7529f95a570c

No hay comentarios:

Publicar un comentario

Post Top Ad

Responsive Ads Here