Using express and es6 to render react and jsx server side

Question

I am trying to wire up a minimum proof-of-concept to render a single React component server-side.

When I run my app, I get an error:

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

And the offending line is:

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

This is my 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"
  }
}

This is my Component.js:

import React from 'react';

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

export default Component;

This is my 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);

What do I need to change in order to allow Express to serve a React component?

Thanks for the help.

Fabio Antunes · Accepted Answer · 2017-02-11 22:33:11Z

7

My two cents, do:

npm i -D babel-preset-react

And change your running script to:

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

To parse jsx you need to install the babel-preset-react

answered Feb 11, 2017 at 22:33

Fabio Antunes

22.9k17 gold badges83 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Söderlund Over a year ago

Is there another solution, since babel-node doesn't seem to be intended for production: babeljs.io/docs/en/babel-node

Fabio Antunes Over a year ago

That's just for dev, if you want to use for production just transpile it with babel and then run nodemon something like babel src --out-dir lib && nodemon lib/MyEntryFile.js

Collectives™ on Stack Overflow

Using express and es6 to render react and jsx server side

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related