¿Cómo crear una aplicación universal con Reactjs?

Para crear una aplicación universal (también conocida como “Isomórfica”) con ReactJS, necesita entender que una aplicación universal es aquella aplicación que corre tanto en el servidor como en el cliente. A continuación, detallo un procedimiento para la creación de este tipo de aplicaciones.

1) Instalar las dependencias necesarias

Primero, asegúrese de tener Node.js y npm instalados. ReactJS y otras librerías requeridas como Express y Babel se instalan mediante npm. Por ejemplo:

```bash
npm init -y
npm install react react-dom express babel-cli babel-preset-env babel-preset-react
```

2) Configurar el servidor

Esto generalmente implica configurar Express para manejar las solicitudes HTTP y establecer qué se debe hacer cuando se solicita a la aplicación desde el navegador.

Por ejemplo:

```javascript
import express from ‘express’;
import React from ‘react’;
import { renderToString } from ‘react-dom/server’;
import App from ‘./App’;

const app = express();

app.get(‘/*’, (req, res) => { const appHtml = renderToString();

res.send(renderFullPage(appHtml)); });

app.listen(3000);

function renderFullPage(html) { return ` Universal React App

${html}

`;
}
```

3) Crear componentes de React

En el paso anterior, se hace referencia a un componente de React llamado “App”. Este componente se encargará de decidir qué mostrar basado en la URL actual.

```javascript
import React from ‘react’;

class App extends React.Component { render() { return

Hola, mundo!

; }
}

export default App;
```

4) Configurar Babel

Babel es necesario para transformar el código JSX y ES6 a un código que el navegador pueda entender. Para configurar Babel, es necesario crear un archivo llamado “.babelrc” con el siguiente contenido:

```json
{ “presets”: [“env”, “react”]
}
```

5) Configurar la renderización del lado del cliente

También será necesario configurar la parte del código que se ejecuta en el lado del cliente. Esto se puede hacer en un nuevo archivo con el siguiente contenido:

```javascript
import React from ‘react’;
import { hydrate } from ‘react-dom’;
import App from ‘./App’;

hydrate(, document.getElementById(‘root’));
```

Luego en el HTML inicial enviado desde el servidor, se debe vincular a este archivo resultante.

6) Configurar npm

Para poder iniciar la aplicación, es recomendable configurar los scripts “start” y “build” en el archivo de configuración “package.json”

```json
“scripts”: { “start”: “node server.js”, “build”: “babel —out-dir=dist —copy-files src”,
}
```

Finalmente, puede iniciar su aplicación con npm start, pero antes recuerde construir los archivos con npm run build.

Estos son los pasos más básicos y genéricos para crear una aplicación universal con ReactJS. Sin embargo, existen muchas otras consideraciones dependientes del caso en específico como el enrutamiento, la gestión de estado, la optimización del rendimiento, entre otras.