🖥 Создание приложения React-Electron с нуля

Прежде чем начать, убедитесь, у вас стоят:
1. Node.js (версия 12 или новее)
2. npm или yarn


1️⃣шаг: настройка структуры проекта

Создайте новую директорию для вашего проекта и перейдите к ней в вашем терминале:

mkdir react-electron-app
cd react-electron-app
mkdir -p src electron public
touch src/App.tsx src/index.tsx electron/main.ts
touch public/index.html

Теперь ваш проект должен иметь следующую структуру:

react-electron-app
├── electron
│   └── main.ts
├── public
│   └── index.html
└── src
    ├── App.tsx
    └── index.tsx

2️⃣шаг: выполните следующую команду в терминале, чтобы инициализировать проект с файлом package.json:

npm init -y

3️⃣шаг: установите необходимые зависимости для проекта:

npm install --save react react-dom typescript electron
npm install --save-dev concurrently electron-builder electron-is-dev wait-on cross-env

4️⃣шаг: настройка Typerscript

Создайте файл tsconfig.json в корне проекта:

touch tsconfig.json

Добавьте следующее содержимое в файл tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2023",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

5️⃣шаг: настройка приложения React

Замените содержимое файла src/App.tsx следующим кодом:

function App() {
  return (
    <div className='App'>
      <p>
        Привет, мир!
      </p>
    </div>
  );
}

export default App;

Замените содержимое файла src/index.tsx следующим кодом:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Замените содержимое файла public/index.html следующим кодом:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Приложение React-Electron</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

6️⃣шаг: настройка основного процесса Electron

Замените содержимое файла electron/main.ts следующим кодом:

import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as isDev from 'electron-is-dev';

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  win.loadURL(
    isDev
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../build/index.html')}`
  );

  win.webContents.openDevTools();
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

7️⃣шаг: настройка скриптов в package.json

Откройте файл package.json и добавьте следующие скрипты в раздел “scripts”:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "eject": "react-scripts eject",
  "electron:dev": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://127.0.0.1:3000 && tsc -p electron -w\" \"wait-on http://127.0.0.1:3000 && tsc -p electron && electron .\"",
  "electron:build": "yarn build && tsc -p electron && electron-builder",
  "electron:dist": "yarn build && tsc -p electron && electron-builder --mac --dir"
}

8️⃣шаг: Теперь вы можете запустить свое приложение React-Electron, выполнив следующую команду:

npm run electron:dev

Победа!

@react_tg