lyria-err

Módulo que te permite renderizar archivos de React usando Express de manera sencilla.

Instalación

Para instalar lyria-err, utiliza:

npm install lyria-err

Uso

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" });
});

Archivo app.jsx

const React = require("react");

function App(prop) {
  return (
    <div>
      <h1>
        Hola {prop.Nombre} / {prop.Nick}
      </h1>
    </div>
  );
}

module.exports = App;

Archivo index.js completo

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.

⚠️ ¡Atención!

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.