渲染器ES6做出反應，以字符串快遞

我已經在編碼器ES6風格的應用程序做出反應，我所有的組件都建立類似如下：渲染器ES6做出反應，以字符串快遞

import React, { Component } from 'react'; 

class Test extends Component { 
    render() { 
     return (
      <div className="testDiv"> 
       Hello Word 
      </div> 
     ) 
    } 
} 

export default Test;

這個網站是通過「NPM啓動」通過默認配置下運行在端口3000.

此外，我有一個nodeJS應用程序，通過端口8080上的expressJS API。現在我想創建一個單一的路由來表達我可以渲染React應用程序並將HTML字符串傳回客戶端。什麼是最好的方法來做到這一點？我是React開發新手，希望有人能幫忙。

來源

2017-04-02 hengel28

這裏是一個簡約例如如何使你的測試組件的Express服務器上：

import express from 'express'; 
import Test from './Test'; 
import React from 'react'; 
import ReactDOM from 'react-dom/server'; 

const app = express(); 

app.get('*', (req, res) => res.send(ReactDOM.renderToString(<Test />))); 

app.listen(8080);

來源

2017-04-02 11:01:07

感謝您的快速答覆。現在我得到以下錯誤：從'./Test'導入測試; ^^^^^^ SyntaxError：意外的保留字。我將導入更改爲以下語法：var Test = require（'./ Test'）;但現在我得到這個錯誤：res.send（ReactDOM.renderToString（））; ^ SyntaxError：意外令牌< – hengel28

我假設您已經設置了Babel和webpack的JSX代碼的轉譯，就像大多數React項目一樣。如果你想在服務器上渲染你的React組件，你需要傳輸你的代碼，就像你可能已經用你的客戶端代碼一樣。 –

您可能還想將本地版本的節點升級到可以處理ES6的節點。我發現包括'嚴格使用';在文件頂部也可以提供幫助。 – zxbEPREF

渲染器ES6做出反應，以字符串快遞

回答

相關問題