fcbk
Conéctate con TwitterConéctate con Facebook
0

Creando una Isomorphic app con React, Express y ES6 – Parte 3

153Puntos

hace 2 años

Las aplicaciones isomórficas son aquellas que nos permiten ejecutar el código JavaScript, que normalmente ejecutamos en el cliente, en el servidor. En la última entrega de este artículo, empezamos a crear un desarrollo híbrido utilizando código JavaScript isomórfico para crear un Pokedex. En esta parte veremos cómo React hace el manejo de rutas. Para ello utilizaremos el módulo llamado react-router. Además, construiremos la vista detalle con toda la información de cada Pokémon. Si te perdiste la primera parte, te recomiendo empezar por ahí. Iniciamos diciéndole a git que nos lleve al paso 3, con la siguiente línea de código: [js] $ git checkout paso3 “Lógica del cliente : Rutas de la aplicación” [/js] Después, definiremos como punto de entrada el archivo app.js, que será tomado por Babelify para realizar el build. Además, pasaremos el código ES6 a ES5 compatible en los navegadores. [js] import React from 'react' import { default as Router, Route, NotFoundRoute } from 'react-router' import PokeContainer from './components/pokeContainer' import PokeDetail from './components/pokeDetail' class NotFound extends React.Component{ render(){ return <h1>Lo sentimos... el recurso {this.props.params.splat} no fue encontrado:(</h1> } } let routes = <Route> <Route path="/" handler={PokeContainer} /> <Route path="/pokemon/:name" handler={PokeDetail} /> <NotFoundRoute handler={NotFound} /> </Route> Router.run(routes, Router.HashLocation, (Root) => { React.render(<Root />, document.getElementById('container')) }) [/js] Como mencioné al inicio de este artículo, utilizamos el módulo react-router haciendo uso de Destructuring; una característica de ECMAScript 6 que extrae partes de estructuras de datos. Por ejemplo, de objetos. Para este ejemplo, extraeremos del módulo react-router: Router, Route y NotFoundRoute. También importaremos PokeContainer que tendrá todos los componentes de la vista principal, que ya habíamos construído en entregas anteriores. Y PokeDetail que se encargará de la vista detalle de cada Pokémon. Además, tenemos el componente NotFound, que retornará al usuario un mensaje “404” personalizado en caso de que no encuentre una ruta. Esto es posible gracias a NotFoundRoute. App Isomórfica React.js Después, podremos observar cómo se construye el ruteo con React. Utilizamos Route para conformar las distintas rutas de la aplicación. Y le pasaremos como atributo el path (La ruta) y el handler (El componente). Por ejemplo, podemos indicar que en la ruta ‘/pokemon/:name’ se muestre todo lo que retorne el componente PokeDetail. Finalmente, correremos el router pasándole las routes y el tipo de location (hash o history). Para este ejemplo, utilizaremos HashLocation. Y dejamos que React se encargue de renderizar el componente en el elemento html que deseemos indicándole el id. De esta manera, en el archivo pokeDetail.js, encontraremos el siguiente código: [js] import React from 'react' import PokeImage from './pokeImage' import PokeRow from './pokeRow' import PokeEvolutions from './pokeEvolutions' import pokemons from '../../public/pokemons.json' export default class PokeDetail extends React.Component{ constructor(props){ super(props) this.pkmName = this.props.params.name this.pokemon = pokemons.filter(pkmn => pkmn.name == this.pkmName)[0] } render(){ if(!this.pokemon){ return <h1> {this.pkmName} no es un Pokémon :(</h1> } else{ return <section className="PokeDetail"> <div className="PokeDetail-images"> <PokeImage pkmName={this.pkmName}/> <PokeEvolutions pokemon={this.pokemon}/> </div> <div className="PokeDetail-info"> <h4>{this.pokemon.name}</h4> <PokeRow property={this.pokemon.type}>Type</PokeRow> <PokeRow property={this.pokemon.species}>Species</PokeRow> <PokeRow property={this.pokemon.stats.attack}>Attack</PokeRow> <PokeRow property={this.pokemon.stats.defense}>Defense</PokeRow> <PokeRow property={this.pokemon.stats.hp}>Hp</PokeRow> <PokeRow property={this.pokemon.stats.speed}>Speed</PokeRow> </div> </section> } } } [/js] De los parámetros que nos llegan en las props de PokeDetail, tomamos el nombre de cada Pokémon y lo guardamos en pkmName. Gracias al desarrollo por componentes, podemos observar que es posible reutilizar nuestro código utilizando varias veces el componente PokeRow para conformar la información del Pokémon. React también nos permite flexibilidad en nuestro código. Tenemos la ventaja de condicionar lo que retorna el método render(). Si al filtrar por pkmName no recibimos nada en this.pokemon, podemos decirle a React qué mostrar. App Isomórfica React.js Y siguiendo con nuestra buena filosofía de componetizar nuestra aplicación. App Isomórfica React.js Arrancamos con el archivo pokeImage.js, que tendrá el siguiente código: [js] import React from 'react' export default class PokeImage extends React.Component{ render(){ return <figure className="PokeDetail-image"> <img src={`images/pokemons/${this.props.pkmName}.jpg`}/> </figure> } } [/js] Aquí utilizamos de nuevo Template Strings de ES6, que junto con la prop pkmName conformarán la imagen principal del Pokémon. Seguimos revisando, y en el archivo PokeRow.js encontramos el siguiente código: [js] import React from 'react' export default class PokeRow extends React.Component{ render(){ return <ul> <li>{this.props.children}</li> <li>{this.props.property}</li> </ul> } } [/js] PokeRow es el componente que usamos en PokeDetail para listar la información de cada Pokémon. Utilizamos también, la prop children que toma el valor de texto que se encuentra dentro del componente. Y la prop property que mostrará la descripción del Pokémon. Finalmente, inspeccionamos nuestro último componente PokeEvolutions: [js] import React from 'react' import uid from 'uid' export default class PokeEvolutions extends React.Component{ render(){ return <div className="PokeDetail-evolutions"> <h4>Evoluciones:</h4> { this.props.pokemon.evolution.map( pkm => <figure key={ uid() }> <img src={`images/pokemons/${pkm}.jpg`} width="80"/> </figure> ) } </div> } } [/js] Sobre el array que nos llega en las props, realizamos un map para retornar cada una de las evoluciones del Pokémon. Debido a que hemos recorrido una lista de elementos, se utiliza el módulo de npm llamado uid. Este nos permite generar un id único para asignarlo al atributo key de cada elemento de la lista. Y así llegamos al final de la guía. Descubrimos el potencial de React. para el desarrollo de aplicaciones isomórficas. Pero si quieres saber más de esta gran librería, te invito a registrarte al curso de React.js en Platzi, seguro descubrirás cosas muy interesantes.
David
David
@deivijt

153Puntos

hace 2 años

Todas sus entradas