使用express和es6來渲染反應和jsx服務器端

Question

我想連接一個最小概念證明來渲染單個React組件服務器端。

當我運行我的應用程序，我得到一個錯誤：

SyntaxError: express.js: Unexpected token (10:41)

而且違規行爲：

> 10 | res.send(ReactDOMServer.renderToString(<Component msg={msg} />)); 
    |          ^

這是我package.json：

{ 
    "name": "ssrReact", 
    "version": "1.0.0", 
    "main": "index.js", 
    "license": "MIT", 
    "scripts": { 
    "start": "nodemon express.js --exec babel-node --presets es2015,stage-2" 
    }, 
    "dependencies": { 
    "express": "^4.14.1", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2" 
    }, 
    "devDependencies": { 
    "babel-cli": "^6.22.2", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-stage-2": "^6.22.0", 
    "nodemon": "^1.11.0" 
    } 
} 

這是我的Component.js：

import React from 'react'; 

class Component extends React.Component { 
    render() { 
    return <h1>Hello, {this.props.msg}</h1>; 
    } 
} 

export default Component; 

這是我express.js：

import express from 'express'; 
import React from 'react'; 
import ReactDOMServer from 'react-dom/server'; 
import Component from './Component'; 

const app = express(); 

function home (req, res) { 
    const msg = req.params.msg || 'Hello'; 
    res.send(ReactDOMServer.renderToString(<Component msg={msg} />)); 
} 

app.get('/', home); 
app.get('/:msg', home); 

app.listen(3333); 

我需要什麼，爲了讓快遞以服務部分作出反應來改變？

感謝您的幫助。

Answer 1

我的兩分錢，這樣做：

npm i -D babel-preset-react 

，改變你的運行腳本：

"scripts": { 
    "start": "nodemon express.js --exec babel-node --presets es2015,stage-2,react" 
    }, 

爲了解析JSX您需要安裝babel-preset-react