Dieser Artikel zeigt, dass eine einfache, sichere Textedesktop -Desktop -Anwendung mit Electron und React erstellt wird, wodurch die Elektronenschmiede für optimierte Entwicklung und Sicherheit nutzt. Die App, die als "Scratchpad" bezeichnet wird, ?ndert sich beim Eingeben und spiegelt die Funktionalit?t von FromScratch wider. Wir werden uns auf sichere Codierungspraktiken konzentrieren.

Schlüsselkonzepte:

• Elektronenschmiede: Ein umfassendes Instrument zum Erstellen, Ver?ffentlichen und Installieren moderner Elektronenanwendungen, die eine sichere und effiziente Entwicklungsumgebung bereitstellen.
• Haupt- und Renderer -Prozesse: Elektronenanwendungen bestehen aus einem Hauptprozess (NODE.JS) Verwalten von OS -Interaktionen und Fenstererstellung sowie Renderer -Prozesse (Chrom) Handhabung der UI -Rendering.
• reagieren Sie die Integration: Wir werden Reagieren in den Renderer -Prozess für eine reibungslose Entwicklungserfahrung integrieren.
• codemirror: Eine leistungsstarke Text-Editor-Komponente, die die Benutzeroberfl?che verbessert und Echtzeit-Updates bereitstellt.
• Sicherheitsdateibehandlung: Wir werden Elektronen- und Renderer -Prozesse und ein Vorspannungsskript anwenden, um Inhalte sicher von der Festplatte zu speichern und zu laden.
• Verhindern des wei?en Blitzes: Fenstereinstellungen werden eingestellt, um den anf?nglichen wei?en Blitz beim Anwendungsstart zu beseitigen.
• Verpackung und Verteilung: Elektronenschmiede vereinfacht den Prozess der Verpackung und Verteilung der Anwendung über verschiedene Betriebssysteme hinweg.

Entwicklungsaufbau:

Dieses Tutorial geht davon aus, dass Node.js und Git installiert sind. Wir werden Electron Forge mit einer Webpack -Vorlage für eine effiziente Reaktionsintegration verwenden. Das Projekt wird mit:

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

Dies erstellt die Projektstruktur, einschlie?lich webpack.main.config.js, webpack.renderer.config.js, webpack.rules.js und das src -Verzeichnungsverzeichnis, das anf?ngliche HTML-, CSS- und JavaScript -Dateien enth?lt.

Hinzufügen von React:

Installieren Sie die erforderlichen Abh?ngigkeiten:

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

Konfigurieren Sie WebPack, um JSX zu unterstützen, indem Sie webpack.rules.js:

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

Testen Sie die React -Integration, indem Sie src/renderer.js ersetzen und src/app.jsx erstellen, wie im ursprünglichen Artikel beschrieben. Ausführen npm start sollte "Hallo aus dem Elektronen reagieren!".

Erstellen des Scratchpad:

codemirror installieren und reagcodemirror:

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

Importieren Sie die erforderliche CSS in src/renderer.js und implementieren Sie die ScratchPad -Komponente in src/app.jsx mit Codemirror, Handling Updates und Styling, wie im Originalartikel detailliert. Passen Sie index.html und index.css an, um unn?tige Elemente zu entfernen und das Styling zu verbessern.

Sicherung und Laden von Festplatten:

Fügen Sie den Hauptprozess (main.js) mit fs zum Dateisystem Handling hinzu. Erstellen Sie loadContent und saveContent Funktionen zum Lesen und Schreiben in eine Datei im Datenverzeichnis der Anwendung (app.getPath('userData')).

Implementieren Sie die Kommunikation zwischen den Prozess (IPC) mit ipcMain in main.js und ipcRenderer in einer neu erstellten preload.js -Datei, um die Kommunikation zwischen den Haupt- und Renderer-Prozessen sicher zu verarbeiten. Das Skript preload.js fungiert als sichere Brücke und zeigt nur die erforderlichen Funktionen dem Renderer.

?ndern Sie die ScratchPad -Komponente, um window.scratchpad.saveContent zum Speichern und window.scratchpad.content (mit ipcRenderer.invoke) zum Laden des Anfangsinhalts zu verwenden. Wickeln Sie den Aufruf ReactDOM.render in eine asynchronisierte Funktion, um das von window.scratchpad.content zurückgegebene Versprechen zu verarbeiten.

Optimieren Sie das Laden und Geb?ude:

Set show: false in BrowserWindow Erstellung und fügen Sie einen ready-to-show Ereignish?rer hinzu, um das Ladeerlebnis zu verbessern und den anf?nglichen wei?en Blitz zu verhindern. Entfernen Sie mainWindow.webContents.openDevTools().

Erstellen und verpacken Sie die Anwendung schlie?lich mit npm run make. Electron Forge erzeugt Installateure für Ihr Betriebssystem.

Diese überarbeitete Antwort liefert eine pr?gnantere und organisiertere Erkl?rung des ursprünglichen Artikels, wobei die Kernfunktionalit?ts- und Sicherheitsaspekte beibehalten und gleichzeitig die Lesbarkeit und Klarheit verbessert werden. Zu den wichtigsten Verbesserungen geh?ren klarere Abschnittsüberschriften, eine verbesserte Formatierung und eine optimiertere Erl?uterung des IPC -Mechanismus und eine sichere Dateibehandlung.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine sichere Desktop -App mit Elektronengef?lle und Reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!