CODEWITHSUNDEEP
electronreactjs
Orbit
Orbit

Reputation: 2375

Using React and .jsx with Electron

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?

Upvotes: 7

Views: 4297

Answers (3)

Marcos Fuenmayor
Marcos Fuenmayor

Reputation: 1

I created a package for that purpose, maybe helps you

You just need to put this in your html:

<script>
require("electron-jsx")(__dirname, {
    reactDir: "./react-sources",
})
</script>
<script react-src="./react-sources/index.jsx">

And set in BrowserView:

webPreferences: {
            nodeIntegration: true
}

https://www.npmjs.com/package/electron-jsx

https://github.com/mdjfs/electron-jsx

Upvotes: 0

Adnan Boota
Adnan Boota

Reputation: 181

I just changed test: /\.tsx?$/, to test: /\.jsx?$/and entry to index.jsx in configs/, it started working for me.

index.jsx

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));

enter image description here

Upvotes: 0

Steven Spungin
Steven Spungin

Reputation: 29071

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 :)

Upvotes: 9

Related Questions