从Node导入React组件

时间:2016-07-20 22:46:23

标签: node.js reactjs

我想在服务器端为我的React应用程序进行初始渲染,但是在导入和使用React组件时却没有使用babel/registernot suitable for production)之类的东西。

我宁愿不必编译我的服务器端代码进行生产,但 喜欢加载一个适合节点的React组件,通过res.send(React.createElement(Html))发送给客户端。

当我跑步时,我得到......

  

意外的令牌<

我认为这是因为我的组件render方法返回<!doctype html>...</html

有没有办法让Node渲染一个React组件而不必在部署之前使用babel / compiling代码?

2 个答案:

答案 0 :(得分:0)

  

我有没有办法让Node渲染一个没有的React组件   在部署之前使用babel /编译代码?

没有。由于JSX不是真正的JavaScript,因此您需要在某个时刻(在构建脚本中)或在运行时(使用babel-register)进行转换。

我个人忽略了babel的建议,即不在生产中使用babel-register。它工作正常,我总是缓存+素数响应,因此性能不相关。我很乐意听到为什么与babel-register进行转换很糟糕。

答案 1 :(得分:0)

简短的回答,是的。

这是来自官方文档:

  

ReactDOMServer

     

react-dom / server包允许你渲染你的   服务器上的组件。

     

ReactDOMServer.renderToString

     

string renderToString(ReactElement element)

     

将ReactElement渲染为其初始HTML。这应该只   在服务器上使用。 React将返回一个HTML字符串。您可以使用   此方法在服务器上生成HTML并向下发送标记   加快页面加载和允许搜索引擎的初始请求   为搜索引擎优化目的抓取您的网页。

     

如果在已有此节点的节点上调用ReactDOM.render()   服务器呈现的标记,React将保留它并仅附加事件   处理程序,允许您具有非常高性能的首次加载   经验。

     

ReactDOMServer.renderToStaticMarkup

     

string renderToStaticMarkup(ReactElement element)

     

与renderToString类似,   除了这不会创建额外的DOM属性,如data-react-id,   React在内部使用。如果要将React用作,则此选项非常有用   一个简单的静态页面生成器,剥离额外的属性   可以节省很多字节。

但是,如果你想使用JSX,你必须使用babel,否则,你可以使用Reacts JS语法。

以下是一个示例的链接:

https://github.com/mhart/react-server-example