1、創建react項目
npx create-react-app 項目名稱

2、安裝electron
cnpm i electron --save

3、在package.json 中添加
“main”: “main.js”,
“homepage”: “.”,

4、在package.json的script中添加腳本命令
“electron-dev”: “electron . dev”,
“electron”: “electron .”,

這里一個是使用electron運行開發時候的腳本加了 dev的參數，后面會根據傳入的這個參數，在主進程中做一層判斷
如果是開發環境的話，那么主進程loadURL就會加載 http://localhost:3000/地址
如果是打包之后的環境就會加載打包文件夾的地址（這里打包是放在build文件夾下，所以會加載’./build/index.html’地址）

5、與package.json同級添加main.js文件

// Modules to control application life and create native browser window const {app,Menu, BrowserWindow,BrowserView,globalShortcut,ipcMain} = require('electron') const path = require('path') const url = require('url');// 獲取在 package.json 中的命令腳本傳入的參數，來判斷是開發還是生產環境 const mode = process.argv[2];function createWindow () {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,//彈出的窗口有無邊框,默認為有// frame:false,show:false,backgroundColor:'#586148',webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration:true,webviewTag:true},})// and load the index.html of the app.//mainWindow.loadFile('index.html')//判斷是否是開發模式 if(mode === 'dev') { mainWindow.loadURL("http://localhost:3000/")} else { mainWindow.loadURL(url.format({pathname:path.join(__dirname, './build/index.html'), protocol:'file:', slashes:true }))}mainWindow.webContents.on("did-finish-load",()=>{})mainWindow.webContents.on('dom-ready',()=>{})mainWindow.once('ready-to-show',function(){mainWindow.show();})}// This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. // app.whenReady().then(createWindow) app.on('ready',()=>{createWindow();});// Quit when all windows are closed. app.on('window-all-closed', function () {// On macOS it is common for applications and their menu bar// to stay active until the user quits explicitly with Cmd + Qif (process.platform !== 'darwin') app.quit() })app.on('activate', function () {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow() })// In this file you can include the rest of your app's specific main process // code. You can also put them in separate files and require them here.

6、和main.js同級添加preload.js

// All of the Node.js APIs are available in the preload process. // It has the same sandbox as a Chrome extension. window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const type of ['chrome', 'node', 'electron']) {replaceText(`${type}-version`, process.versions[type])} })

7、啟動electron項目
(1)npm start 啟動react項目
(2)npm run electron-dev 啟動electron應用
修改代碼react代碼會熱更新
(3)如果react打包后，運行 npm run electron 這個時候electron 加載的就是 build/index.html文件

8、打包react
npm run-script build
此時npm run electron運行的就是打包后的react項目

9、打包electron
(1)安裝electron-packager
npm install electron-packager --save-dev
npm install electron-packager -g

(2)在package.json的"scripts"中添加
“pack”: “electron-packager . 此項目名稱 --win --out ./打包后名稱 --electron-version=8.2.4(版本號)”

(3)復制main.js和package.json文件到打包react后的build文件下

(4)npm run pack打包最后的應用程序

總結

以上是生活随笔為你收集整理的electron 集成react的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。