この記事では、電子と反応を使用してシンプルで安全なテキストエディターデスクトップアプリケーションを構築し、合理化された開発とセキュリティのために電子鍛造を活用しています。 「ScratchPad」と呼ばれるアプリは、入力すると変更され、FromScratchの機能をミラーリングします。 全体を通して安全なコーディングプラクティスに焦点を当てます
重要な概念:
反応の追加:
必要な依存関係をインストールする:
npx create-electron-app scratchpad --template=webpack
バベルローダーをwebpack.main.config.js
:webpack.renderer.config.js
に追加することにより、JSXをサポートするようにWebpackを構成します
webpack.rules.js
src
元の記事で説明されているように、
を作成してReact統合をテストします。 runningは、「hello from React in Electron!」を表示する必要があります
scratchpadの構築:npm install --save-dev @babel/core @babel/preset-react babel-loader npm install --save react react-dom
npx create-electron-app scratchpad --template=webpack
必要なcssをsrc/renderer.js
にインポートし、CodeMirrorを使用してScratchPad
コンポーネントをsrc/app.jsx
>に実装し、元の記事で詳述しているように更新とスタイリングを処理します。 不要な要素を削除し、スタイリングを改善するには、index.html
とindex.css
を調整します。
セキュアディスクの保存と読み込み:
を使用して、メインプロセス(main.js
)にファイルシステムの処理を追加します。 アプリケーションのデータディレクトリにあるファイルから読み取り、書き込みするfs
およびloadContent
関数を作成します(saveContent
)。
app.getPath('userData')
新たに作成された
ファイルにipcMain
inmain.js
andipcRenderer
を使用して、インタープロセス通信(IPC)を実装して、メインプロセスとレンダラープロセス間の通信を安全に処理します。 preload.js
スクリプトは安全なブリッジとして機能し、必要な関数のみをレンダラーに公開します。
preload.js
コンポーネントを変更して、保存に
(ScratchPad
を使用して)を使用します。 window.scratchpad.saveContent
。
window.scratchpad.content
ipcRenderer.invoke
荷重と建物の最適化:ReactDOM.render
window.scratchpad.content
in作成とイベントリスナーを追加して、最初の白いフラッシュを防ぎ、荷重エクスペリエンスを改善します。
。を削除します
show: false
最後に、BrowserWindow
を使用してアプリケーションを構築およびパッケージ化します。 Electron Forgeは、オペレーティングシステム用のインストーラーを生成します
ready-to-show
この改訂された応答は、元の記事のより簡潔で整理された説明を提供し、読みやすさと明確さを改善しながら、コア機能とセキュリティの側面を維持します。 重要な改善には、より明確なセクションの見出し、改善されたフォーマット、IPCメカニズムのより合理化された説明とセキュアファイル処理が含まれます。
以上がElectron ForgeとReactを使用して安全なデスクトップアプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。