Electron整合React使用搭建開發(fā)環(huán)境的步驟詳解
簡介
用于構建用戶界面的 JavaScript 庫
步驟
首先創(chuàng)建React
npx create-react-app doc
進入到doc項目
cd doc
安裝electron
npm install electron --save-dev
安裝依賴
判斷是否為生產環(huán)境
cnpm install electron-is-dev --save-dev
在項目根目錄創(chuàng)建main.js
const { app ,BrowserWindow } = require('electron')
const isDev = require('electron-is-dev')
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 1024,
height: 680,
webPreferences:{
nodeIntegration: true,
}
})
const urlLocation = isDev ? 'http://localhost:3000' : 'dummyurl'
mainWindow.loadURL(urlLocation);
})
修改json配置文件
在json文件中添加下面兩行
首先運行npm start，然后再開啟一個shell運行npm run dev
遇到的問題
1、需要多次運行，十分的麻煩
2、每次會自動打開瀏覽器
3、react運行的速度慢，electron加載不到，需要手動刷新
完善
安裝依賴
同時執(zhí)行多個命令https://www.npmjs.com/package/concurrently
cnpm install concurrently --save-dev
等待資源加載完成https://www.npmjs.com/package/wait-on
cnpm install wait-on --save-dev
環(huán)境變量https://www.npmjs.com/package/cross-env
cnpm install cross-env --save-dev
完善后的json
"dev": "concurrently \" wait-on http://localhost:3000 && electron . \" \" cross-env BROWSER=none npm start \" "
配置完成之后直接在終端執(zhí)行npm run dev，之后會彈出我們的界面
總結
到此這篇關于Electron整合React使用搭建開發(fā)環(huán)境的步驟詳解的文章就介紹到這了,更多相關Electron整合React搭建環(huán)境內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
React實現(xiàn)歌詞滾動效果(跟隨音樂播放時間滾動)
這篇文章主要為大家詳細介紹了React實現(xiàn)歌詞滾動效果(跟隨音樂播放使勁按滾動),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2024-02-02
React需要自己開發(fā)支持插槽功能，原理：父組件組件中寫入的HTML，可以傳入子組件的props中，這篇文章主要介紹了React從插槽、路由、redux的詳細過程,需要的朋友可以參考下2022-10-10
React是一個狀態(tài)機主要體現(xiàn)在state上，通過與用戶交易實現(xiàn)不同的狀態(tài)，state是組件的私有屬性，是用來初始化的，本文重點給大家介紹react中的state的簡寫方式，感興趣的朋友一起看看吧2021-08-08
詳解React-Router中Url參數(shù)改變頁面不刷新的解決辦法
這篇文章主要介紹了詳解React-Router中Url參數(shù)改變頁面不刷新的解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
解決React報錯Property?'value'?does?not?exist?on?
這篇文章主要為大家介紹了React報錯Property?'value'?does?not?exist?on?type?EventTarget的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了淺談在react中如何實現(xiàn)掃碼槍輸入，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了如何在 React Native 中添加自定義字體,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
js中自定義react數(shù)據(jù)驗證組件實例詳解
我們在做前端表單提交時，經常會遇到要對表單中的數(shù)據(jù)進行校驗的問題。這篇文章主要介紹了js中自定義react數(shù)據(jù)驗證組件 ,需要的朋友可以參考下2018-10-10
基本路由跳轉是最常見的一種方式,下面介紹React 中常用的幾種路由跳轉方式,感興趣的朋友一起看看吧2023-12-12
react-redux集中式狀態(tài)管理及基本使用與優(yōu)化
react-redux把組件分為兩類，一類叫做UI組件，一類叫做容器組件，這篇文章主要介紹了集中式狀態(tài)管理＜react-redux＞基本使用與優(yōu)化,需要的朋友可以參考下2022-08-08