Estoy muy confundido acerca de mezclar rutas express con archivos React y .jsx. Estoy tratando de construir un sitio web de varias páginas con una base de datos mongoose y he estado usando ejs para hacerlo. ahora estoy tratando de convertir a React pero no tengo ni idea de cómo hacerlo a pesar de mi investigación durante 3 días. Lo que estoy buscando hacer es más o menos algo como esto (el ejemplo es un componente de reacción "example.jsx")
app.get("/",function(req,res){ res.send(<example />)})
en vez de
app.get("/",function(req,res){ res.send("another.ejs") })
Si no puedo hacer tal cosa, ¿me recomendaría las rutas React o simplemente seguir con ejs?
Debe ( 1. ) convertir el código JSX a Javascript y luego ( 2. ) convertir el Javascript en una cadena HTML, que luego puede enviar al cliente.
Por ejemplo, si tiene el archivo example.js :
console.log('jsxData:', <example />); // app.get("/",function(req,res){ res.send(<example />)}) Si un archivo Javascript contiene código JSX, se convierte en un archivo JSX y Javascript ya no puede entenderlo. La extensión .js o .jsx no importa aquí. Puede o no cambiarle el nombre a example.jsx , si lo desea.
Pero puede convertir (también conocido como "transpilar") ese archivo JSX en un archivo Javascript con babel . Obtendrá un nuevo archivo separado que es un archivo Javascript válido.
1.a. Si aún no está instalado, debe instalar babel y el transpiler JSX (para la instalación, estoy usando yarn aquí, npm también es posible) :
yarn add @babel/cli @babel/core @babel/preset-react --dev1.b. Convierta el archivo JSX a Javascript:
yarn babel example.js --presets=@babel/preset-react --out-dir dist Ahora debería tener el nuevo archivo /dist/example.js , que es un archivo Javascript válido (pero aún no es un archivo HTML). (La extensión de este archivo será .js , sin importar si el archivo fuente original era .js o .jsx ).
En el paso 1, transpiló el código JSX <example /> dentro de su archivo original en el código Javascript React.createElement("example", null) dentro del archivo transpilado, pero aún no es HTML, es un Javascript "React elemento".
Puede usar ReactDOMServer para convertir este elemento React en HTML:
2.a. En caso de que aún no esté instalado, instale react y react-dom :
yarn add react react-dom 2.b. Importa react y react-dom/server , y usa el método renderToString() para representar el elemento React en una cadena HTML:
const React = require('react'); // <-- React is required, because it is used in the transpiled .js file. const ReactDOMServer = require('react-dom/server'); const jsxData = <example />; const htmlString = ReactDOMServer.renderToString( jsxData ); console.log('htmlString:', htmlString); // app.get("/",function(req,res){ res.send( htmlString )}) Transpile este archivo JSX nuevamente como antes. Ahora, dentro de ./dist/example.js , htmlString debe contener la cadena HTML que puede enviar al cliente. En este ejemplo, si ejecuta, por ejemplo, node ./dist/example.js , debería ver la salida de la consola:
htmlString: <example data-reactroot=""></example>