In this post, we’ll learn how to create an Electron application that uses React as the JavaScript library. If you haven’t used Electron before then it would be best to go through the tutorials – Getting Started with Electron Development Tutorial and Create Your Own Electron Desktop Application Tutorial.
These tutorials will identify what needs to be installed and various tools that you will need.
Additionally, you should also refer to the online training that I mentioned in the React JavaScript Library Training Reference post. This tutorial assumes you know at least a little about React so it only touches on the parts for integrating React with Electron and the tool-chain to compile your applications.
Overview
Before we start creating our project here’s an overview of the files that we will be creating.
| File or Module | Usage |
|---|---|
| package.json | Defines the modules to include and the starting file |
| main.js | Contains the Electron and NodeJS code. |
| index.html | Plain old HTML that also uses a script tag to include the bundle.js file |
| bundle.js | JavaScript file that is generated by Webpack and Babel |
| webpack.config.js | input file for the Babel and Webpack compilation step |
| babelAndWebpack | This encompasses the Babel and Webpack modules that are downloaded using npm |
| app.js | file that contains the React code |
Create the Project Folder
As is customary in my tutorials, start by creating a folder to contain your work:
c:\_\my-electron-projects\first-electron-react-project
Create package.json file
Run the following command to create the package.json from the first-electron-react-project folder.
|
1 |
npm init -y |
Install WebPack
From the first-electron-react-project folder run the following command to install the Webpack components.
|
1 |
npm install webpack --save-dev |
Install Babel
From the first-electron-react-project folder run the following command to install the Babel components.
|
1 |
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev |
Install React
From the first-electron-react-project folder run the following command to install the React components.
|
1 |
npm install react --save-dev |
Install ReactDOM
From the first-electron-react-project folder run the following command to install the ReactDOM components.
|
1 |
npm install react-dom --save-dev |
Review Package.json File
At this point, your package.json file should look as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "name": "first-electron-react-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "Dale Moore", "license": "MIT", "devDependencies": { "babel-core": "^6.18.2", "babel-loader": "^6.2.7", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "react": "^15.3.2", "react-dom": "^15.3.2", "webpack": "^1.13.3" } } |
We need to add a couple of items to the scripts array so we can use babel and webpack more easily. Also, as I have already done in the snippet shown above, I updated the author and the license values.
|
1 2 3 4 5 |
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "babel": "babel", "webpack": "webpack" }, |
Create webpack.config.js File
This step is largely a copy/paste step. In the folder first-electron-react-project create a file called webpack.config.js with the following contents:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './app.js', output: {path: __dirname, filename: 'bundle.js' }, module: { loaders: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } } ] }, }; |
Create app.js File
You might’ve noticed that the app.js file is referenced in the webpack.config.js file. This reference tells React what file is serving as the entry point. Also, if you look in this same file, you’ll see the bundle.js is defined. This is the output file where the compiled React code will be placed.
In the folder first-electron-react-project create a file called app.js with the following contents…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from 'react' import ReactDOM from 'react-dom' var HelloBox = React.createClass({ render: function() { return ( <div className="helloTag"> Hello world from ReactJS </div> ); } }); ReactDOM.render(<HelloBox/>, document.getElementById('helloTag')); |
Create index.html File
In the folder first-electron-react-project create a file called index.html with the following contents…
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head><title>Hello World From ReactJS</title></head> <body> <div id="helloTag"></div> </body> <script src="bundle.js"></script> <html> |
What of note here is the script tag that includes bundle.js. If you refer back to our webpack.config.js file you’ll find a reference to bundle.js as the output.
Although this tutorial assumes you know React, it might be worth mentioning here that the code that you wrote in the app.js is called JSX and browsers can’t use JSX directly. The JSX code must be submitted to a compiler that outputs generic JavaScript that most browsers understand. That’s what Babel is doing for us. When Babel creates the JavaScript, the WebPack then packages up the compiled artifacts into bundle.js. We then only need to reference bundle.js in our HTML pages.
Compiling
We have everything we need so we can begin the compilation process by entering the command…
|
1 |
npm run webpack |
You will see something like the following as the output:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
C:\_\my-electron-projects\first-electron-react-project (first-electron-react-project@1.0.0) λ npm run webpack > first-electron-react-project@1.0.0 webpack C:\_\my-electron-projects\first-electron-react-project > webpack Hash: 2c8a96d120b7191adc78 Version: webpack 1.13.3 Time: 4986ms Asset Size Chunks Chunk Names bundle.js 738 kB 0 [emitted] main + 172 hidden modules C:\_\my-electron-projects\first-electron-react-project (first-electron-react-project@1.0.0) λ |
If you look in the first-electron-react-project you’ll find the bundle.js file was created.
Test the Compile
To see if the compile worked, open the file index.html via a browser and you should see:
Of course, this doesn’t accomplish the goal of this tutorial because we haven’t included Electron which we will do now.
Install Electron
From the first-electron-react-project folder run the following command to install the Electron components.
|
1 |
npm install electron --save-dev |
Create main.js File
The main.js file will contain our Electron and NodeJS statements and will load the index.html file.
The index.html in turn, will load the bundle.js file that was created by the compilation of our React code by the Babel and Webpack tools.
The main.js file has the following contents…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const electron = require('electron'); const app = electron.app; const BrowserWindow = electron.BrowserWindow; app.on('ready', () => { mainWindow = new BrowserWindow({ height: 400, width: 400 }) // load the local HTML file let url = require('url').format({ protocol: 'file', slashes: true, pathname: require('path').join(__dirname, 'index.html') }) console.log(url) mainWindow.loadURL(url) }) |
On line 15, you’ll notice the reference to our index.html.
Update package.json to use main.js
Edit your package.json and modify/add the following lines…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{ "name": "first-electron-react-project", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "babel": "babel", "webpack": "webpack", "start": "electron ." }, "keywords": [], "author": "Dale Moore", "license": "MIT", "devDependencies": { "babel-core": "^6.18.2", "babel-loader": "^6.2.7", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "react": "^15.3.2", "react-dom": "^15.3.2", "webpack": "^1.13.3" } } |
On line 5, we identify main.js as the file that Electron uses.
Compile with Electron
Actually, there’s no compilation required at this point because the bundle.js file already exists and we have’t made any changes to app.js that would require a recompilation.
Note though, that if we did make changes to app.js then we would need to run the “npm run webpack” command.
Run Electron
To start Electron enter the following command from the folder first-electron-react-project…
|
1 |
npm start |
Summary
You have a complete working starter project that uses Electron for the front end framework and ReactJS for the JavaScript library. You also know how to compile each of the modules so you can work effectively.
