Как использовать React в Node? - PullRequest
Новая
       3

Как использовать React в Node?

0 голосов
/ 05 февраля 2020

Я хочу попробовать серверную визуализацию в React, но мой код не работает.

Я должен что-то упустить. Но я не знаю, что это такое, потому что я новичок, чтобы реагировать.

SyntaxError

Вот и код:

сервер / приложение. js

import express from 'express';
import { renderToString } from 'react-dom/server';
import Home from '../src/index.js';

const app = express();
const content = renderToString(<Home />);

app.get('/', function (req, res) {
   res.send(
   `
    <html>
      <head>
        <title>ssr</title>
      </head>
      <body>
        <div id="root">${content}</div>
      </body>
    </html>
   `
   );
})

app.listen(3001, () => {
  console.log('listen:3001')
})

src / index. js

import React from 'react';
const Home = () => {
  return (
    <div>
      <div>Hello World</div>
    </div>
  )
}
export default Home

пакет. json

{
  "scripts": {
    "start": "nodemon --exec babel-node server/app.js"
  }
}

.babelr c

{
    "presets": [
      "env"
    ],
    "plugins": []
}

Ответы [ 2 ]

0 голосов
/ 09 февраля 2020 
const content = renderToString(<Home />);

вы используете здесь jsx, но не переносите jsx в js. вам нужно установить 

npm i @babel/preset-react

также вместо "babel-preset-env" используйте это 

npm i @babel/preset-env

затем 

{
  "presets": ["@babel/preset-react", ""@babel/preset-env]
}
0 голосов
/ 05 февраля 2020

Вы не можете отобразить страницу реакции из nodejs как e js, потому что реакция не похожа ни на один шаблон. это библиотека. Но если вы действительно этого хотите, то вам необходим рендеринг на стороне сервера. (SSR)

...