Electron ForgeとReactを使用して安全なデスクトップアプリを構築する

この記事では、電子と反応を使用してシンプルで安全なテキストエディターデスクトップアプリケーションを構築し、合理化された開発とセキュリティのために電子鍛造を活用しています。 「ScratchPad」と呼ばれるアプリは、入力すると変更され、FromScratchの機能をミラーリングします。 全体を通して安全なコーディングプラクティスに焦点を当てます

重要な概念：

• 電子フォージ：最新の電子アプリケーションを作成、公開、およびインストールするための包括的なツール、安全で効率的な開発環境を提供します。
メイン対レンダラープロセス：
• 電子アプリケーションは、メインプロセス（node.js）OSの相互作用とウィンドウ作成の管理、およびレンダラープロセス（クロム）の処理UIレンダリングで構成されています。 React統合： Reactをレンダラープロセスに統合して、スムーズな開発エクスペリエンスを統合します。
• codemirror：ユーザーインターフェイスを強化し、リアルタイムの更新を提供する強力なテキストエディターコンポーネント。
セキュアファイルの処理：
• ディスクからコンテンツを安全に保存してロードするための電子のメインプロセスとレンダラープロセスとプリロードスクリプトを使用します。 ホワイトフラッシュの防止：
ウィンドウ設定は、アプリケーションの起動時の最初の白いフラッシュを排除するように調整されます。
• パッケージングと配布：電子フォージは、さまざまなオペレーティングシステム全体にアプリケーションをパッケージ化して配布するプロセスを簡素化します。
• 開発のセットアップ：
このチュートリアルでは、node.jsとgitがインストールされていると想定しています。 効率的なReact統合のために、Webパックテンプレートを使用してElectron Forgeを使用します。 プロジェクトは以下で初期化されます
• これにより、、、
、および初期HTML、CSS、およびjavaScriptファイルを含む

ディレクトリを含むプロジェクト構造が作成されます。

反応の追加：

必要な依存関係をインストールする：

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

codemirrorとReact-codemirrorをインストールします：

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')新たに作成された

および

ファイルにipcMaininmain.jsandipcRendererを使用して、インタープロセス通信（IPC）を実装して、メインプロセスとレンダラープロセス間の通信を安全に処理します。 preload.jsスクリプトは安全なブリッジとして機能し、必要な関数のみをレンダラーに公開します。 preload.jsコンポーネントを変更して、保存に

を使用し、初期コンテンツをロードするには

（ScratchPadを使用して）を使用します。 window.scratchpad.saveContent。 window.scratchpad.contentipcRenderer.invoke荷重と建物の最適化：ReactDOM.render window.scratchpad.content

set

in作成とイベントリスナーを追加して、最初の白いフラッシュを防ぎ、荷重エクスペリエンスを改善します。

。

を削除します show: false最後に、BrowserWindowを使用してアプリケーションを構築およびパッケージ化します。 Electron Forgeは、オペレーティングシステム用のインストーラーを生成します ready-to-showこの改訂された応答は、元の記事のより簡潔で整理された説明を提供し、読みやすさと明確さを改善しながら、コア機能とセキュリティの側面を維持します。 重要な改善には、より明確なセクションの見出し、改善されたフォーマット、IPCメカニズムのより合理化された説明とセキュアファイル処理が含まれます。

以上がElectron ForgeとReactを使用して安全なデスクトップアプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。