Seguramente te estarás preguntando qué será eso de Isomorphic app. Dicho término no es más que un concepto que describe que el código JavaScript que normalmente ejecutamos en el cliente (Browser) también puede correr en el servidor (Node). Por ejemplo, nuestros componentes de React también pueden ser renderizados en el Backend. Esto abre un abanico de posibilidades que podrás ya estar evidenciando, y de las que muy probablemente trataremos a lo largo de este tutorial. Últimamente suele hablarse mucho acerca de cómo las Single Page Applications(SPA) contribuyen al mejoramiento de la interacción con el usuario; en comparación a como se venía haciendo con el desarrollo tradicional de una app. Pero no debemos olvidar que el mayor problema de una SPA, es su relación con el SEO. Esto es debido a que los rastreadores del buscador no indexan bien el JavaScript; que es básicamente de lo que éstas se conforman. ¿Existirá alguna alternativa para encontrar el equilibrio y brindar una excelente UX sin que nos afecte el posicionamiento? La respuesta es sí. Y se llama desarrollo híbrido.
Para seguir el tutorial paso a paso, implementaremos una metodología Git. Esto significa que los pasos van a ser git-tags. Por esta razón, es muy recomendable tener instalada dicha herramienta. Para este ejemplo crearemos un Pokedex, el cual puedes ver en funcionamiento ya mismo aquí. Es importante mencionar que la app que desarrollaremos está basada en el proyecto Pokedex-angular que se creó en el Curso de Front-end por el magnífico Julián Duque. Puedes ver su repositorio en GitHub. Lo primero que haremos será entrar en la terminal y clonar el repositorio del proyecto: [js]$ git clone https://github.com/deivijt/pokedex-react.git[/js] Estando en el directorio del proyecto que acabamos de clonar, vamos al paso 1: [js]$ git checkout paso1[/js] Esto nos moverá al git-tag paso1 Estructura y archivos del proyecto. Aquí tendremos:
Ahora arrancaremos con la lógica del server. Abrimos en nuestro editor el archivo server.js, que tendrá el siguiente código: [js]import express from ‘express’ import engine from ‘react-engine’ import path from ‘path’ const port = process.env.PORT || 8080 const app = express() app.use(express.static(path.join(__dirname, ‘public’))) // Indicamos a express que el engine sea react-engine app.engine(’.jsx’, engine.server.create()) // Indicamos la ruta de las vistas app.set(‘views’, path.join(__dirname, ‘views’)) // Indicamos para que el engine utilice archivos jsx app.set(‘view engine’, ‘jsx’) // Indicamos que react-engine sea el engine de vistas de express app.set(‘view’, engine.expressView) app.get(’/’, (req, res) => res.render(‘index’, { title : ‘Pokédex-React’ })) app.listen(port, () => console.log(Server running in localhost:${port}))[/js] No es más que un server básico en Express que escucha en el puerto 8080; nos proporciona servir los estáticos y crear la ruta principal de la aplicación. Tiene algunas particularidades que expliqué en los comentarios arriba de cada línea de código. Además, hacemos uso del módulo react-engine, desarrollado por PayPal. Este es el que nos facilita, entre otras cosas, hacer el render de React Components desde nuestro server. Ya que elegimos a react-engine como motor de vistas de Express, el servidor podrá renderizar componentes de React tal como se indica en la línea 22. Además, como segundo parámetro del método render, podemos pasarle un objeto con propiedades que tendremos en las props de nuestros components. Para ello en la carpeta views, el archivo index.jsx tendrá el siguiente código: [js] JSX(Javascript and XML): “syntactic sugar” Para escribir nuestros Components de una mejor manera. import React from ‘react’ export default class Index extends React.Component{ render(){ return ( <meta charser=“utf-8”> <title>{this.props.title}</title> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <link rel=“stylesheet” href=“styles/style.css”>
<header>
<div>
</div>
</header>
) } }[/js] Como se indicó anteriormente, lo que tenemos aquí es un componente de React. Nos devuelve el layout de nuestro index, y utiliza la prop title que le pasamos desde el método render en server.js. Para verlo en acción, sólo nos queda instalar dependencias que puedes revisar en el archivo package.json. Ahí también tendremos dos scripts: el primero nos servirá para hacer el build; lo utilizaremos posteriormente para pasar el código del cliente de ES6 a ES5, compatible en los navegadores. Y el segundo nos permitirá lanzar el server con node-babel; para que de la misma manera sea compatible en Node. [js]$ npm install $ npm run server[/js] Abrimos el navegador y vamos a localhost:8080. Y como puedes observar, ya estamos haciendo el rendering inicial de nuestra app. 
Hasta este punto, no sólo hicimos el render de nuestro index con componentes de React desde el servidor; sino que también por detrás se carga el build.js, que es el que tendrá todo el código que manejará nuestra app como una Single Page Application(SPA). ¿Recuerdas que hablamos al principio de UX y SEO? Bueno, pues lo conseguimos, hemos hecho un desarrollo híbrido realizando código JavaScript isomórfico. En la siguiente parte de este tutorial, vamos a profundizar en la lógica del cliente para listar los 151 Pokémons y realizar una búsqueda de los mismos. Verás todo el potencial de React. Será increíble.
Getting here this update for see robux generator no human verification most of players can exited to play it game.