electron react что это

1 год назад

🖥 Создание приложения 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 Победа! @javascript_react