Módulo que te permite renderizar archivos de React usando Express de manera sencilla.
Para instalar lyria-err
, utiliza:
npm install lyria-err
Antes que nada, asegúrate de tener instalado Express y haber creado un servidor HTTP (si ya tienes uno, puedes saltarte este paso):
npm install express
Crea un servidor HTTP usando Express:
const express = require("express");
const app = express();
app.listen(3000, () => {
console.log("Servidor HTTP listo");
});
Ahora que tienes tu servidor web, llama al módulo lyria-err y configúralo:
const er = require("lyria-err");
er.configureReact(app, "./src/jsx");
// Como primer argumento, pasa el objeto app de tu servidor Express.
// Como segundo argumento, pasa la ruta de tus archivos JSX.
Una vez que has configurado el paquete lyria-err, puedes usarlo en cualquier ruta de tu servidor Express de la siguiente manera:
app.get("/", (req, res) => {
res.renderReact("app"); // Nombre del archivo .jsx
});
También puedes pasarle props de la siguiente manera:
app.get("/", (req, res) => {
res.renderReact("app", { Nombre: "Isman", Nick: "Isman" });
});
const React = require("react");
function App(prop) {
return (
<div>
<h1>
Hola {prop.Nombre} / {prop.Nick}
</h1>
</div>
);
}
module.exports = App;
const express = require("express");
const app = express();
const er = require("lyria-err");
er.configureReact(app, "./src/jsx");
app.get("/", (req, res) => {
res.renderReact("app", { Nombre: "Isman", Nick: "Isman" });
});
app.listen(3000, () => {
console.log("Servidor HTTP listo");
});
¡Y así de simple puedes renderizar archivos de React usando Express como si fuera un renderizador de plantillas! Espero que les guste.
Aunque puedes renderizar componentes React, ten en cuenta que no podrás utilizar algunas de sus características, como useState, useContext y useEffect. Aunque el código se ejecutará sin problemas, no podrás utilizar funciones que hagan uso de estos estados.
Para poder aprovechar estas características correctamente, te recomendamos utilizar server-side rendering. Si deseas aprender cómo hacerlo utilizando este paquete, únete a nuestro servidor de Discord: enlace al servidor de Discord.