I am trying to use react in node js application. One way I found was using babel-register, which supposedly transform react jsx files.
I put code in node index.js.
require('babel-register')({
ignore:'node_modules',
presets: ["es2015",'react', "stage-0"],
extensions: [".es6", ".es", ".jsx", ".js"]
});
app.use('/static', express.static('public'));
app.get('/',(req,res)=>{
res.sendFile(__dirname+'/public/index.html');
});
const server = app.listen(9000, () => {
let port = server.address().port;
winston.info(`Server running at http://localhost:${port}`);
});
Then I put react code in public/index.js
var React = require('react');
var ReactDom = require('react-dom');
class TodoApp extends React.Component {
render() {
return(
<div>
<h1>Heslssddddlo</h1>
</div>
)}
}
ReactDom.render(
<div>
<TodoApp></TodoApp>
</div>
, document.getElementById('app')
);
Then I get this error. Uncaught SyntaxError: Unexpected token <
I believe I installed everything I need to use babel-register...
"devDependencies": {
"babel-cli": "^6.11.4",
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.11.6",
Do I have to use webpack rather than babel-register or I am doing it wrong ?
I think babel register just makes it so you can 'require' a file and have babel transpile it. You are merely telling express to serve the file "as is" with express.static.
You will want to either use static to serve a file which has already been processed by babel, or require it. You may want to look into some of the react express view libraries.