React

Adding React support to the Webpack template doesn't require a complicated boilerplate to get started.
The following guide has been tested with React 17, Babel 7, and Webpack 5.
Create the app and setup the Webpack config
Create the app with the Webpack template. Add the following packages to your devDependencies so that JSX and other React features can be used properly:
Yarn
NPM
1
yarn add --dev @babel/core @babel/preset-react babel-loader
Copied!
1
npm install --save-dev @babel/core @babel/preset-react babel-loader
Copied!
Set up the babel-loadermodule with the React preset in webpack.rules.js:
webpack.rules.js
1
module.exports = [
2
  // ... existing loader config ...
3
  {
4
    test: /\.jsx?$/,
5
    use: {
6
      loader: 'babel-loader',
7
      options: {
8
        exclude: /node_modules/,
9
        presets: ['@babel/preset-react']
10
      }
11
    }
12
  },
13
  // ... existing loader config ...
14
]
Copied!
Add the React dependencies
Add the basic React packages to your dependencies:
Yarn
NPM
1
yarn add react react-dom
Copied!
1
npm install --save react react-dom
Copied!
Integrate React code
You should now be able to start writing and using React components in your Electron app. The following is a very minimal example of how to start to add React code:
src/app.jsx
src/renderer.js
1
import * as React from 'react';
2
import * as ReactDOM from 'react-dom';
3
​
4
function render() {
5
  ReactDOM.render(<h2>Hello from React!</h2>, document.body);
6
}
7
​
8
render();
Copied!
1
// Add this to the end of the existing file
2
import './app.jsx';
Copied!
For more about React, see their documentation.

Parcel

React with TypeScript

Last modified 7mo ago

Copy link

Edit on GitHub

Contents

Create the app and setup the Webpack config

Add the React dependencies

Integrate React code