有没有办法在 express 服务器中渲染 .jsx 组件
Is there a way to render .jsx components inside express server
我对将快速路由与 React 和 .jsx 文件混合使用感到非常困惑。
我正在尝试使用 mongoose 数据库构建一个多页面网站,并且我一直在使用 ejs 来完成它。现在我正在尝试转换为 React,但尽管我研究了 3 天,但我完全不知道如何做到这一点。
我想要做的大致是这样的(示例是一个反应组件“example.jsx”)
app.get("/",function(req,res){ res.send(<example />)})
而不是
app.get("/",function(req,res){ res.send("another.ejs") })
如果我做不到这样的事情,你会推荐 React routs 还是坚持使用 ejs。
你需要(1.)将JSX代码转换为Javascript,然后(2.)渲染Javascript 转换为 HTML 字符串,然后您可以将其发送给客户端。
例如如果你有文件 example.js
:
console.log('jsxData:', <example />);
// app.get("/",function(req,res){ res.send(<example />)})
1。将 JSX 转译为 Javascript
如果一个Javascript文件包含JSX代码,就变成JSX文件,Javascript就看不懂了。扩展名 .js 或 .jsx 在这里无关紧要。如果愿意,您可以将其重命名为 example.jsx
,也可以不重命名。
但是您可以使用 babel 将该 JSX 文件转换(也称为“transpile”)为 Javascript 文件。您将获得一个新的单独文件,该文件是有效的 Javascript 文件。
1.a. 如果尚未安装,则需要安装 babel 和 JSX 转译器 (对于安装,我使用 yarn here, npm也是可以的):
yarn add @babel/cli @babel/core @babel/preset-react --dev
1.b. 将 JSX 文件转换为 Javascript:
yarn babel example.js --presets=@babel/preset-react --out-dir dist
现在您应该有了新文件 /dist/example.js
,这是一个有效的 Javascript 文件(但仍然不是 HTML 文件)。 (此文件的扩展名将是 .js
,无论原始源文件是 .js
还是 .jsx
。)
2。渲染 HTML
在第 1 步中,您已将原始文件中的 JSX 代码 <example />
转译为转译文件中的 Javascript 代码 React.createElement("example", null)
,但这仍然不是 HTML,这是一个 Javascript“React 元素”。
您可以使用 ReactDOMServer 将此 React 元素呈现为 HTML:
2.a. 如果尚未安装,请安装 react
and react-dom
:
yarn add react react-dom
2.b.导入react
和react-dom/server
,使用renderToString()
方法将React元素渲染成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 )})
像以前一样再次转译这个 JSX 文件。现在在 ./dist/example.js
中,htmlString
应该包含可以发送给客户端的 HTML 字符串。在此示例中,如果您 运行 例如node ./dist/example.js
你应该看到控制台输出:
htmlString: <example data-reactroot=""></example>
我对将快速路由与 React 和 .jsx 文件混合使用感到非常困惑。 我正在尝试使用 mongoose 数据库构建一个多页面网站,并且我一直在使用 ejs 来完成它。现在我正在尝试转换为 React,但尽管我研究了 3 天,但我完全不知道如何做到这一点。 我想要做的大致是这样的(示例是一个反应组件“example.jsx”)
app.get("/",function(req,res){ res.send(<example />)})
而不是
app.get("/",function(req,res){ res.send("another.ejs") })
如果我做不到这样的事情,你会推荐 React routs 还是坚持使用 ejs。
你需要(1.)将JSX代码转换为Javascript,然后(2.)渲染Javascript 转换为 HTML 字符串,然后您可以将其发送给客户端。
例如如果你有文件 example.js
:
console.log('jsxData:', <example />);
// app.get("/",function(req,res){ res.send(<example />)})
1。将 JSX 转译为 Javascript
如果一个Javascript文件包含JSX代码,就变成JSX文件,Javascript就看不懂了。扩展名 .js 或 .jsx 在这里无关紧要。如果愿意,您可以将其重命名为 example.jsx
,也可以不重命名。
但是您可以使用 babel 将该 JSX 文件转换(也称为“transpile”)为 Javascript 文件。您将获得一个新的单独文件,该文件是有效的 Javascript 文件。
1.a. 如果尚未安装,则需要安装 babel 和 JSX 转译器 (对于安装,我使用 yarn here, npm也是可以的):
yarn add @babel/cli @babel/core @babel/preset-react --dev
1.b. 将 JSX 文件转换为 Javascript:
yarn babel example.js --presets=@babel/preset-react --out-dir dist
现在您应该有了新文件 /dist/example.js
,这是一个有效的 Javascript 文件(但仍然不是 HTML 文件)。 (此文件的扩展名将是 .js
,无论原始源文件是 .js
还是 .jsx
。)
2。渲染 HTML
在第 1 步中,您已将原始文件中的 JSX 代码 <example />
转译为转译文件中的 Javascript 代码 React.createElement("example", null)
,但这仍然不是 HTML,这是一个 Javascript“React 元素”。
您可以使用 ReactDOMServer 将此 React 元素呈现为 HTML:
2.a. 如果尚未安装,请安装 react
and react-dom
:
yarn add react react-dom
2.b.导入react
和react-dom/server
,使用renderToString()
方法将React元素渲染成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 )})
像以前一样再次转译这个 JSX 文件。现在在 ./dist/example.js
中,htmlString
应该包含可以发送给客户端的 HTML 字符串。在此示例中,如果您 运行 例如node ./dist/example.js
你应该看到控制台输出:
htmlString: <example data-reactroot=""></example>