>本文展示了使用電子和React構建簡單，安全的文本編輯器桌面應用程序，并利用電子偽造來進行簡化的開發(fā)和安全性。 該應用程序稱為“ scratchpad”，在您輸入時，自動衛(wèi)隊會更改，從而反映了fromScratch的功能。 我們將重點介紹整個安全的編碼實踐。

密鑰概念：

• 電子偽造：一種用于創(chuàng)建，發(fā)布和安裝現代電子應用程序的綜合工具，提供了安全有效的開發(fā)環(huán)境。 >主要與渲染器過程：電子應用程序由管理OS交互和窗口創(chuàng)建的主過程（Node.js）組成，以及渲染器過程（Chromium）處理UI渲染。
• 反應集成：我們將集成在渲染器過程中，以獲得平穩(wěn)的開發(fā)體驗。
• codemirror：一個功能強大的文本編輯器組件增強用戶界面并提供實時更新。
>
• 安全文件處理：>我們將使用電子的主和渲染器流程以及預緊腳本來安全地保存和加載磁盤的內容。>
>
• >防止白色閃光燈：窗口設置將進行調整以消除應用程序啟動時的初始白色閃光燈。
• 包裝和分布：電子鍛造簡化了包裝和分發(fā)應用程序在各種操作系統(tǒng)上的過程。
開發(fā)設置：
• 本教程假設Node.js和Git已安裝。 我們將使用帶有WebPack模板的Electron Forge進行有效的反應集成。 該項目的初始化：

這將創(chuàng)建項目結構，包括>，，

，以及包含初始html，css和javascript文件的目錄。

>

npx create-electron-app scratchpad --template=webpack

添加react：

webpack.main.config.js webpack.renderer.config.js安裝必要的依賴項：webpack.rules.js src

>配置WebPack通過將Babel Loader添加到

>來支持JSX：>

>如原始文章所述，通過替換

并創(chuàng)建

來測試反應集成。 運行

npm install --save-dev @babel/core @babel/preset-react babel-loader
npm install --save react react-dom

應顯示“來自電子中的react！”。

> webpack.rules.js

構建刮擦：

module.exports = [
  // ...
  {
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        exclude: /node_modules/,
        presets: ['@babel/preset-react']
      }
    }
  },
  // ...
];

src/renderer.js>安裝codemirror和react-dodemirror：>

npx create-electron-app scratchpad --template=webpack

>將必要的CSS導入到src/renderer.js>中，并在原始文章中詳細介紹的使用CodeMirror，處理更新和樣式中的ScratchPad組件。 調整src/app.jsx和index.html以刪除不必要的元素并改善樣式。index.css>

安全磁盤節(jié)省和加載：>

>使用

添加文件系統(tǒng)處理（）。 創(chuàng)建main.js和fs函數以讀取并寫入應用程序數據目錄（loadContent）中的文件。saveContent> app.getPath('userData')>在新創(chuàng)建的

文件中使用

和ipcMain在新創(chuàng)建的main.js文件中使用ipcRenderer實現preload.js>，以安全地處理主和渲染器進程之間的通信。 preload.js腳本充當安全的橋梁，僅將必要的功能暴露給渲染器。

>修改用于保存的ScratchPad組件和window.scratchpad.saveContent（使用window.scratchpad.content）加載初始內容。將ipcRenderer.invoke呼叫包裝在異步函數中，以處理ReactDOM.render> window.scratchpad.content返回的承諾

優(yōu)化加載和建筑物：>

set

inshow: false創(chuàng)建并添加BrowserWindowready-to-show事件偵聽器以改善加載體驗，以防止初始的白色閃光燈。 刪除mainWindow.webContents.openDevTools()。

最后，使用npm run make構建并包裝應用程序。 Electron Forge將為您的操作系統(tǒng)生成安裝程序。

這種修訂后的響應提供了對原始文章的更簡潔，有組織的解釋，維護了核心功能和安全性方面，同時提高了可讀性和清晰度。 關鍵改進包括更清晰的截面標題，改進的格式以及對IPC機制的更簡化的說明和安全文件處理。

以上是用電子鍛造構建安全的桌面應用程序并進行反應的詳細內容。更多信息請關注PHP中文網其他相關文章！