We know that if you need electron and vue.js development, you can directly create an electron project with vue through electron-vue , so today we will talk about how electron is combined with the react family bucket.
Source address: https://github.com/wenchangshou2/electrol-react-redux.git
install yarn
Yarn is a closer package management tool from Facebook.
Install under mac
brew install yarn
Installation under Linux
The default package repository in ubuntu has no yarn package, we need:
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
After we import the certificate and source, it can be installed directly by the following command
sudo apt-get update && sudo apt-get install yarn
Install create-react-app
create-react-app is a tool for creating react projects, through which you can quickly create an initial react project.
yarn global add create-react-app
Create a react project
create-react-app app
cd app
add electron
yarn add electron
yarn add electron-builder -D
Install foreman to help us run the application under the command line
yarn global add foreman
Install the project dependencies created by create-react-app
yarn install
configure eslint
Eslint configures the specification of your code, and with atom or vs code, you can observe whether your code style conforms to the specification in real time.
touch .eslintrc.json
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jest": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"rules": {
"no-const-assign": "warn",
"no-this-before-super": "warn",
"no-undef": "warn",
"no-continue": "off",
"no-unreachable": "warn",
"no-unused-vars": "warn",
"constructor-super": "warn",
"valid-typeof": "warn",
"space-before-function-paren":"off",
"function-paren-newline":"off",
"no-plusplus":"off",
"quotes": [
2,
"single"
]
},
"parser": "babel-eslint",
"extends": "airbnb",
"plugins": [
"react",
"jsx-a11y",
"import"
]
}
At the same time, we need to install the corresponding plug-ins of ESLint
yarn add eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-import
After the above operations, we need to modify package.json to adapt to electron
We temporarily modify the content to the following content
{
"name": "qiniu-upload",
"version": "0.1.0",
"private": true,
"homepage": "./",
"main": "src/electron-starter.js",
"dependencies": {
"electron": "^1.8.4",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.10.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"prop-types": "^15.6.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-scripts": "1.1.1",
},
"scripts": {
"start": "nf start -p 3000",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"electron": "electron .",
"electron-start": " node src/electron-wait-react",
"react-start": "react-scripts start",
"pack": "build --dir",
"dist": "npm run build && build",
"postinstall": "install-app-deps"
},
"devDependencies": {
"electron-builder": "^20.8.1"
},
"build": {
"appId": "com.electron.electron-with-create-react-app",
"win": {
"iconUrl": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
},
"directories": {
"buildResources": "public"
}
}
}
The above version may change at any time, don't mind too much, just use the latest version
Above, we changed the original start to react-start. For the others, we have not made any changes. Now we need to add the processing content of electron.
"homepage": "./",
"main": "src/electron-starter.js",
and
"build": {
"appId": "com.electron.electron-with-create-react-app",
"win": {
"iconUrl": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
},
"directories": {
"buildResources": "public"
}
}
The final file content after modification:
{
"name": "qiniu-upload",
"version": "0.1.0",
"private": true,
"homepage": "./",
"main": "src/electron-starter.js",
"dependencies": {
"electron": "^1.8.4",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.10.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"prop-types": "^15.6.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-redux": "^5.0.7",
"react-scripts": "1.1.1",
"redux": "^3.7.2"
},
"scripts": {
"start": "nf start -p 3000",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"electron": "electron .",
"electron-start": " node src/electron-wait-react",
"react-start": "react-scripts start",
"pack": "build --dir",
"dist": "npm run build && build",
"postinstall": "install-app-deps"
},
"devDependencies": {
"electron-builder": "^20.8.1"
},
"build": {
"appId": "com.electron.electron-with-create-react-app",
"win": {
"iconUrl": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
},
"directories": {
"buildResources": "public"
}
}
}
Now we also need to create a file called Procfile under the root directory of the project with the following content:
react: npm run react-start
electron: npm run electron-start
continue to improve
Now we also need to complete the src/electron-start.js and src/start-react.js files
src/electron-start.js
const electron = require('electron');
const { app, BrowserWindow } = electron;
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({ width: 800, height: 600 });
const startUrl =
process.env.ELECTRON_START_URL ||
url.format({
pathname: path.join(__dirname, '/../build/index.html'),
protocol: 'file:',
slashes: true,
});
mainWindow.loadURL(startUrl);
mainWindow.webContents.openDevTools();
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
src/start-react.js
const net = require('net');
const childProcess = require('child_process');
const port = process.env.PORT ? process.env.PORT - 100 : 3000;
process.env.ELECTRON_START_URL = `http://localhost:${port}`;
const client = new net.Socket();
let startedElectron = false;
const tryConnection = () => {
client.connect({ port }, () => {
client.end();
if (!startedElectron) {
console.log('starting electron');
startedElectron = true;
const { exec } = childProcess;
exec('npm run electron');
}
});
};
tryConnection();
client.on('error', () => {
setTimeout(tryConnection, 1000);
});
start up
Now we run
yarn start
Now you've found that react will run as a native app.
keep working hard
The above is a preliminary demo, we now need to continue to integrate react redux to achieve an official Todo function
We will implement the integration in the next section