0

Desarrollando una aplicación básica con vistas en ReactJS

1953Puntos

hace 5 años

Cuando empezamos a desarrollar aplicaciones con ReactJS, debemos tener en cuenta que este es un framework diseñado para definir Vistas. Es decir, la estructura de nuestro documento. Pero en lugar de definir explícitamente el HTML, la idea es definirlo programáticamente usando JSX. El fin es tener la posibilidad de definir Vistas que se renderizan rápidamente en respuesta de cambios en nuestro Modelo. ReactJS nos ofrece un sistema modular que facilita hacer nuestro código extremadamente reciclable y ordenado. Yo siempre recomiendo dividir nuestras aplicaciones en componentes, procurando usar el mínimo de elementos posibles. Para este tutorial vamos a crear una aplicación capaz de descargar un JSON del servidor y mostrar sus elementos en una lista. Para hacer más fácil el desarrollo, lo más recomendable es iniciar armando el HTML estático para después transformarlo a JSX. Esto hace el desarrollo muy lineal y facilita la documentación de nuestra aplicación. Empecemos con esto en nuestro código:

index.html

[html]<article> <p><strong> Pasos para dominar un nuevo lenguaje de programación </strong></p> <ol> <li>Leer la documentación</li> <li>Completar Tutoriales</li> <li>Crear un Demo</li> <li>Escribir sobre lo que aprendiste</li> </ol>; </article>[/html] Ahora vamos a dividirlo en el mínimo de componentes básicos. En este caso, sólo necesitamos un contenedor estático y los elementos de la lista. La cantidad y contenido de elementos puede variar, pero son semánticamente iguales; por lo que sólo necesitamos definirlos una vez en nuestro código. Llamemos al componente SimpleList y los elementos de nuestra lista SimpleListRow. Necesitamos los datos en formato JSON para poder usarlos en nuestro template dinámico. Para que se respete el orden usaremos un array de datos ordenado, que guardaremos en un archivo como este:

simpleList_data.json

[javascript][ { "row":"Leer la documentación" }, { "row":"Completar Tutoriales" }, { "row":"Crear un Demo" }, { "row":"Escribir sobre lo que aprendiste" }, ][/javascript] Es momento de armar nuestros templates en JSX. Empecemos por definir las variables en las que vamos a colocar nuestros componentes. La sintaxis es muy sencilla:

reactApp.jsx

[javascript]var SimpleList = React.createClass( render: function() { return (); } }); var SimpleListRow = React.createClass({ render: function() { return (); } });[/javascript] Empecemos por definir el componente más sencillo. En nuestro caso SimpleListRow:

reactApp.jsx

[javascript]var SimpleListRow = React.createClass({ render: function() { return ( <ol> <li>Leer la documentación</li> <li>Completar Tutoriales</li> <li>Crear un Demo</li> <li>Escribir sobre lo que aprendiste</li> </ol> ); } });[/javascript] Esto nos generaría una vista estática. Simplifiquemos nuestro código tomando en cuenta que usaremos datos que vamos a heredar de SimpleList con el contenido de la lista. Los datos que recibimos del padre de nuestro componente son considerados estáticos y son conocidos como props en ReactJS. Vamos a poner los datos guardados en props en una variable llamada rows y usemos una función de ReactJS llamada .map. Esta nos permite iterar directamente los elementos de un array en JSX. Usaremos la variable element para guardar los datos de cada objeto y representarlos en el VDOM de ReactJS.

reactApp.jsx

[javascript]var SimpleListRow = React.createClass({ render: function() { var rows = this.props.simpleList; return ( <ol> <span data-reactid=".0.0.2.0:$1041379039210134_1084967684851269.$right.0.$left.0.1.0.0.3.0.$end:0:$text20:0">{ rows.map(function(element) {</span><br data-reactid=".0.0.2.0:$1041379039210134_1084967684851269.$right.0.$left.0.1.0.0.3.0.$end:0:$text21:0" /><span data-reactid=".0.0.2.0:$1041379039210134_1084967684851269.$right.0.$left.0.1.0.0.3.0.$end:0:$text22:0"> return (</span><br data-reactid=".0.0.2.0:$1041379039210134_1084967684851269.$right.0.$left.0.1.0.0.3.0.$end:0:$text23:0" /><span data-reactid=".0.0.2.0:$1041379039210134_1084967684851269.$right.0.$left.0.1.0.0.3.0.$end:0:$text24:0"> <li>{element.row}</li></span><br data-reactid=".0.0.2.0:$1041379039210134_1084967684851269.$right.0.$left.0.1.0.0.3.0.$end:0:$text25:0" /><span data-reactid=".0.0.2.0:$1041379039210134_1084967684851269.$right.0.$left.0.1.0.0.3.0.$end:0:$text26:0"> );</span><br data-reactid=".0.0.2.0:$1041379039210134_1084967684851269.$right.0.$left.0.1.0.0.3.0.$end:0:$text27:0" /><span data-reactid=".0.0.2.0:$1041379039210134_1084967684851269.$right.0.$left.0.1.0.0.3.0.$end:0:$text28:0"> }) }</span> </ol> ); } });[/javascript] Ahora vamos a definir SimpleList, el elemento raíz de nuestro componente y responsable de obtener los datos de nuestro servidor y pasarlos a SimpleListRow. Estos datos que pueden variar por cambios en el modelo en ReactJS se les conoce como state. Empecemos por definir el template de SimpleList. Una de las ventajas de usar JSX es que podemos definir elementos en una variable como si fueran HTML5 custom elements y al definirlos, generalmente se les pasan datos los cuales definirán las props de ese elemento. reactApp.jsx [javascript]var SimpleList = React.createClass( render: function() { return ( <span> <p><strong> Pasos para dominar un nuevo lenguaje de programación </strong></p> </span> ); } });[/javascript] Cuando un elemento usa state es importante definir un estado inicial o default para el mismo. Esto se hace muy fácilmente usando getInitialState:

reactApp.jsx

[javascript]getInitialState: function() { return { simpleList: [ { row: 'cargando ...' } ] }; },[/javascript] Para obtener los datos del servidor en nuestro ejemplo vamos a usar AJAX vía jQuery. Esto debemos hacerlo después de haberse completado el rendering inicial y así tener la representación básica en el DOM. De esta manera, el elemento podrá interactuar con ella usando el VDOM. Para lograrlo, ReactJS nos ofrece una función llamada componentDidMount(). Este método nos permite integrar correctamente AJAX u otro Framework al flujo de ReactJS.

reactApp.jsx

[javascript]componentDidMount: function() { $.ajax({ url: this.props.url, dataType: 'json', success: function(data) { this.setState({simpleList: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()) }.bind(this) }); };[/javascript] Notarás que como origen de datos usamos this.props.url; esto nos indica que vamos a pasar la url al inicializar el elemento. Para hacerlo usamos React.render() y basta con inicializar el elemento, asignar el valor y asignarle un elemento en el DOM para inyectar su contenido.

reactApp.jsx

[javascript]React.render( <SimpleList url="simpleList_data.json"/>; document.getElementById('simpleList') )[/javascript] Una vez cargado el DOM de nuestro sitio, ReactJS buscará el elemento que indicamos y su contenido será reemplazado por el contenido en el VDOM generado por nuestro JSX. Podemos aprovechar esto para mostrar una pantalla inicial a nuestros usuarios dando la impresión de que carga más rápido. Un beneficio interesante es que podemos incluir el contenido importante para el SEO en el HTML inicial. De esta manera, los crawlers podrán indexar correctamente el contenido de las vistas dinámicas en tu aplicación. En este ejemplo simplemente mostraremos un letrero que diga “cargando…”, mientras carga el JSX de nuestra aplicación. Para una mejor experiencia de usuario, recuerda siempre colocar tu código justo antes del cierre con la etiqueta; esto evitará que Javascript bloquee la carga inicial de tu documento.

index.html

[html]<body> <section> <article id="simpleList"> <small>cargando...</small> </article> </section> <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script> <script src="//code.jquery.com/jquery-1.10.0.min.js"></script> <script src="js/reactApp.jsx" type="text/jsx"></script> </body>[/html] Hasta aquí ya tenemos la aplicación funcionando y cumpliendo su objetivo. Puedes ver un live demo o revisar el código completo en GitHub. Es importante notar la presencia del archivo JSXTransformer.js, esto se debe a que usamos código JSX directamente. Algo ideal para aprender y hacer prototipos de nuevos elementos JSX en grandes proyectos; pero recuerda nunca usarlo en producción, pues el cliente tendrá que compilar el JSX en JS en cada visita. En su lugar debemos usar un precompilador de JSX basado en NodeJS, que convertirá el JSX de nuestro ejemplo en JS normal listo para producción. logo-node Para instalarlo basta con correr el comando npm install ‐g react‐tools desde nuestra consola. Una vez que tengamos React Tools instalado, podemos dejar un proceso que observe los cambios en el archivo JSX y compile automáticamente a JS. Para nuestro ejemplo usaremos el comando jsx -x jsx -w jsx/ js/. Estamos usando la opción extension jsx simplemente para indicarle que el archivo a compilar tiene extensión .jsx. Puedes omitir este paso si tu archivo tiene extensión .js; pero se recomienda usar .jsx para distinguirlo. Después, usamos el comando watch para que el proceso continúe observando cambios en nuestro archivo y los compile automáticamente. El siguiente paso es declarar la ruta de la carpeta con los archivos JSX a compilar y, finalmente, debemos especificar dónde deseamos que se guarden los archivos compilados, ahora en JS. Es importante actualizar nuestro archivo HTML para que deje de usar JSXTransformer y cargue el archivo precompilado. Ahora nuestro código se vera así:

index.html

[html]<body> <section> <article id="simpleList"> <small>cargando...</small> </article> </section> <script src="bower_components/react/react.min.js"></script> <script src="//code.jquery.com/jquery-1.10.0.min.js"></script> <script src="js/reactApp.js"></script> </body>[/html] Con estos sencillos cambios, los usuarios no tendrán que cargar la librería de JSXTransformer y compilar el JSX en cada visita. Esto nos permite usar mejor el potencial de ReactJS. ReactJS es una tecnología que promete revolucionar el desarrollo de interfaces, regístrate en nuestro Curso Profesional de ReactJS y empieza a prender desde ahora para convertirte en un profesional de una de las principales tecnologías del futuro.
Cesar
Cesar
@reicek

1953Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2