10. Уроки React JS (default опасность плагин auto import)
Использование OpenAI для увеличения времени, затрачиваемого на ваш блог
Использование OpenAI для увеличения времени, затрачиваемого на ваш блог Сегодня вы узнаете, как создать систему рекомендаций для такой платформы, как Medium. Я хотел поделиться тем, чему научился при создании популярного плагина Obsidian AVA, который рекомендует ваши заметки. Весь исходный код проекта, который мы собираемся создать, доступен здесь. Здесь вы можете попробовать интерактивную версию. Вы также можете развернуть конечную версию на Vercel прямо сейчас. Общая картина В пунктах ниже описан...
🖥 Создание приложения 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