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

重要な概念：

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

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

反応の追加：

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

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

バベルローダーをwebpack.main.config.js：webpack.renderer.config.jsに追加することにより、JSXをサポートするようにWebpackを構(gòu)成します webpack.rules.js src元の記事で説明されているように、

を置き換え、

を作成してReact統(tǒng)合をテストします。 runningは、「hello from React in Electron！」を表示する必要があります

scratchpadの構(gòu)築：

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を調(diào)整します。

セキュアディスクの保存と読み込み：

を使用して、メインプロセス（main.js）にファイルシステムの処理を追加します。 アプリケーションのデータディレクトリにあるファイルから読み取り、書き込みするfsおよびloadContent関數(shù)を作成します（saveContent）。 app.getPath('userData')新たに作成された

および

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

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

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

set

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

。

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

以上がElectron ForgeとReactを使用して安全なデスクトップアプリを構(gòu)築するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。