react and express app not allowing jsx - node.js

Question

I am trying to learn how to make web apps with express, however, I am not really understanding how it sends data to the client side and what express is supposed to do. I am under the impression that express is supposed to send data to the client side then the client side is supposed to display the UI according to the data that was sent. Right now I am trying to render a react component from express using reactDOMServer but I am running into a jsx error saying:
res.send(ReactDOMServer.renderToString(<root />))
SyntaxError: Unexpected token <
I am aware of this post and have tried installing babel for the jsx, but it still gives me this error.
Here is my app.js:
const express = require("express")
const React = require("react")
const ReactDOMServer = require("react-dom/server");
const root = require("./public/root.js");
const app = express();
app.get("/", (req, res) => {
res.send(ReactDOMServer.renderToString(<root />))
})
app.listen(3000, () => {
console.log("running on port 3000")
})
root.js
const React = require("react");
module.export = class root extends React.Component{
render(){
return(
<div>Hello world from react</div>
)
}
}
package.json:
{
"name": "myproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon app.js --exec babel-node --presets es2015,stage-2,react"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.2",
"koa": "^2.3.0",
"koa-router": "^7.2.1",
"koa-static": "^4.0.1",
"koa-static-server": "^1.3.2",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-dom-server": "0.0.5"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1"
}
}
Note: This is an experimental project, so there is a lot of unnecessary packages (koa)
And to make things simple my questions are:
What does express do?(send static html files to the client which then interact on its own? routing?) and how do you send a react component to the client?
my jsx problem above
New Problem (Ryan):
res.send(renderToString(<Root />))
^
SyntaxError: Unexpected token <
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:588:28)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
at Function.Module.runMain (module.js:665:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3

Answer 1

I updated your code with latest syntax, please give it a try
root.js
const React = require("react");
export default class Root extends React.Component {
render(){
return (
<div>
Hello world from react
</div>
)
}
}
app.js
const express = require("express")
const React = require("react")
const renderToString = require("react-dom/server").renderToString
const Root = require("./public/root").default
const app = express();
app.get("/", (req, res) => {
res.send(renderToString(<Root />))
})
app.listen(3000, () => {
console.log("running on port 3000")
})
package.json
{
"name": "myproject",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon app.js --exec babel-node"
},
"author": "",
"license": "ISC",
"dependencies": {
"ejs": "^2.5.7",
"express": "^4.16.2",
"nodemon": "^1.12.1",
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1"
}
}
.babelrc - ADD this file to your project, it's cleaner and easier
{
"presets": [
"react",
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}]
]
}
This setting uses the babel-present-env to prevent the confusion of babel preset settings (like stage-*)
Tested on Node 8