How to use React JSX with Babel in Electron

Issue #352

For a normal electron app created with npm init, we can use all features of ES6, but not the JSX syntax for React. We can use just Babel to transpile JSX, as used in IconGenerator

.babelrc

js
{
  "plugins": [
    "transform-react-jsx-source"    
  ],
  "presets": ["env", "react"]
}

And in package.json, call babel to transpile src to dist

js
"main": "dist/main.js",
"scripts": {
    "start": "npm run babel && electron .",
    "babel": "babel ./src --out-dir ./dist --copy-files"
},

Remember to use dist/main.js as our starting point, and in index.html, specify ./dist/renderer.js

html
<body>
    <div id="root" />
    <script type="text/javascript">
      require('./dist/renderer.js')
    </script>
</body>
Written by

I’m open source contributor, writer, speaker and product maker.

Start the conversation