Using React and .jsx with Electron

Question

Trying to get an Electron project going using React and its .jsx files. I've gone through various tutorials, github issues, SO answers, and the like, but I have not found a clear guide to setting up an Electron project for use with React and it's .jsx files.

What steps, dependencies, and configurations are needed to get this working?

Answer 1

We found that there are 2 processes that need to be bootstrapped.

First, install babel-register et al and set up .babelrc to handle react, es6, etc. I won't go into those details here...

Let's assume your main script is called main.js and your render script (containing jsx,es6,react, etc) is called render.js

main.boot.js

// install babel hooks in the main process
require('babel-register');
require('./main.js');

For the render process, you add the babel-register script to the html file before your render script.

<script>
        // install babel hooks in the renderer process
        require('babel-register');
</script>
<script src='render.js'></script>

Then simply call the bootstrap script instead of the main one from your project. For example, change Package.json to something like

"main": "./main.boot.js"

And make sure you get your source paths correct :)