tgoop.com/react_tg/443
Create:
Last Update:
Last Update:
Прежде чем начать, убедитесь, у вас стоят:
1. Node.js (версия 12 или новее)
2. npm
или yarn
Создайте новую директорию для вашего проекта и перейдите к ней в вашем терминале:
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
package.json
:npm init -y
npm install --save react react-dom typescript electron
npm install --save-dev concurrently electron-builder electron-is-dev wait-on cross-env
Создайте файл
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"]
}
Замените содержимое файла
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>
Замените содержимое файла
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();
}
});
Откройте файл
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"
}
npm run electron:dev
Победа!
@react_tg