Notice: file_put_contents(): Write of 23201 bytes failed with errno=28 No space left on device in /var/www/tgoop/post.php on line 50
React JS@react_tg P.443
REACT_TG Telegram 443
🖥 Создание приложения 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🤡9🔥21



tgoop.com/react_tg/443
Create:
Last Update:

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

BY React JS


Share with your friend now:
tgoop.com/react_tg/443

View MORE
Open in Telegram


Telegram News

Date: |

During the meeting with TSE Minister Edson Fachin, Perekopsky also mentioned the TSE channel on the platform as one of the firm's key success stories. Launched as part of the company's commitments to tackle the spread of fake news in Brazil, the verified channel has attracted more than 184,000 members in less than a month. 6How to manage your Telegram channel? Ng, who had pleaded not guilty to all charges, had been detained for more than 20 months. His channel was said to have contained around 120 messages and photos that incited others to vandalise pro-government shops and commit criminal damage targeting police stations. Step-by-step tutorial on desktop: Administrators
from us


Telegram React JS
FROM American