Прежде чем начать, убедитесь, у вас стоят:
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
? 'https://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 https://127.0.0.1:3000 && tsc -p electron -w\" \"wait-on https://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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🤡9🔥2❤1
— это хороший способ сделать код чище и улучшить возможности по его поддержке. Дело в том, что это позволяет чётко выражать или объявлять то, что использует некая сущность. При этом такой подход не принуждает разработчиков вчитываться в реализацию компонента для того, чтобы выяснить состав свойств, связанных с ним.
// до рефакторинга
async function authenticate({ user_id, token }) {
try {
const response = await axios.post('https://someapi.com/v1/auth/', {
user_id,
token,
})
console.log(response)
return response.data
} catch (error) {
console.error(error)
throw error
}
}
// после рефакторинга
async function authenticate({ user_id, jwt_token, token = jwt_token }) {
try {
const response = await axios.post('https://someapi.com/v1/auth/', {
user_id,
token,
})
console.log(response)
return response.data
} catch (error) {
console.error(error)
throw error
}
}
Сущность
jwt_token будет оцениваться в тот момент, когда код дойдёт до token. В результате, если jwt_token окажется действительным токеном, и сущность token окажется равной undefined, в token попадёт значение jwt_token. Если же в token уже было какое-то значение, не являющееся по правилам JS ложным (то есть — некий реальный токен), то в token просто останется то, что там уже было.Например, эта структура может выглядеть наподобие
- src
- components
- Breadcrumb
- index.js
- Breadcrumb.js
- CollapsedSeparator.js
- Input
- index.js
- Input.js
- utils.js
- focusManager.js
- Card
- index.js
- Card.js
- CardDivider.js
- Button.js
- Typography.js
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤2🔥2
Здесь максимально подробно описывается каждый шаг:
— создание приложения, запуск
— упаковка в Docker-контейнер, конфигурирование Dockerfile
— создание Docker-образа
— установка
kubectl и minikube, запуск— конфигурирование YAML-файла
— ...короче, весь процесс
Супер полезно, экономит время, не нужно проверять всё методом тыка
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥7❤6
Разработчики проекта пояснили, что в React Email 2.0 переосмысленный опыт предварительного просмотра, в код внесены изменения для значительного улучшения производительности, добавлены новые компоненты (Code Block, Inline Code, ), появилась поддержка развёртывания в Vercel, а также улучшена поддержка монорепозиториев.
Команда проекта React Email опубликовала инструкцию по обновлению на версию 2.0.
— обновлены компоненты и основные блоки;
— статические файлы для сервера предварительного просмотра теперь хранятся в папке ./emails/static или в указанном каталоге электронной почты;
— улучшен пользовательский интерфейс и обновлены иконки;
— добавлена возможность просмотра, как ваша электронная почта будет выглядеть на мобильных устройствах;
— появилась поддержка подпапок, что позволяет приложению предварительного просмотра игнорировать некоторые из них, если они имеют префикс
_ (например: _comComponents);— время запуска локального сервера React Email 2.0 при новой установке составляет около 7 секунд (для React Email 1.10.1 этот параметр составляет 40 секунд);
— после завершения первоначальной настройки время загрузки составляет около 1 секунды (зависит от конфигурации сервера);
— улучшена фильтрация отображения электронных писем на боковой панели, которая показывает их только в том случае, если где-то внутри у них есть настройки экспорта по умолчанию. Это своего рода эвристика, и её всё еще можно улучшить.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17❤2❤🔥1
Urlcat — это крошечная JavaScript-библиотека, которая делает очень удобным построение URL и предотвращает распространенные ошибки.
Да, для построения URL можно использовать URL API. Но вам все равно придется позаботиться о некоторых деталях вместо того, так что используйте Urlcat.
Вы ее подключаете, и она просто работает. Не нужно изучать сложные шаблоны или тратить часы на документацию.
UseHooks — это небольшая библиотека с хорошо написанными, задокументированными и полностью типизированными (для пользователей TypeScript) хуками для всех этих вещей. Использование этой библиотеки позволит вам не отвлекаться на мелочи и сосредоточиться на самом проекте.
Когда я пишу код фронтенда, я хочу иметь логи. Но с некоторыми требованиями:
— логи должны быть полностью типизированными (чтобы использовать в Typescript)
— они должны быть небольшими
— у логов должны быть цветные ярлыки
— мне нужны разные уровни логов
— должна быть возможность скрывать некоторые логи в зависимости от условий (мб, в продакшен-сборке)
— должна быть возможность отправлять эти логи куда-то еще (мб, в Sentry).
После долгих поисков подходящей библиотеки, я нашел Logt, которая отвечает всем моим требованиям.
Несколько ключевых моментов: Loadable Components поддерживает SSR (рендеринг на стороне сервера), Library Splitting (разделение библиотеки) и даже полный динамический импорт. Неплохо, да?
Библиотека действительно проста в использовании. Практически plug-and-play.
Работая над различными проектами, мне часто приходится иметь дело с эмодзи. Так что держите эту маленькую библиотеку.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
❤16🔥6👍5⚡3🌭1
! и TabЭто сочетание клавиш за секунду создаёт базовую структуру кода или вложенные теги.
Windows —
Ctrl + /macOS —
Command + /Windows —
Ctrl + GmacOS —
Control + GИногда отладчики внезапно сообщают, что на строке 953 случилась непоправимая инфернальная ошибка вселенной. Чтобы не выискивать вручную, не листать и не тратить на это время, нажмите
Ctrl + G, введите номер строки и спокойно спасайте вселенную.Windows —
Alt + ↑ / ↓macOS
Option + ↑ / ↓Alt и стрелки меняют текущую строку местами с соседними.Windows
Shift + Alt + ↓ / ↑macOS
Shift + Option + ↓ / ↑Windows
Ctrl + Shift + \macOS
Shift + Command + \Если кода много, очень просто запутаться в закрывающих и открывающих скобках, непонятно, где какой блок. На помощь приходит
Ctrl + Shift + \.Windows —
F2macOS —
F2Чтобы не выискивать переменные по всему документу и не менять руками, есть
F2.Windows —
Shift + Alt + FmacOS
Shift + Option + FVS Code предложит выбрать расширение из существующих, а потом красиво отформатирует документ — расставит по местам блоки и скобки и т.д.
Windows —
F12macOS —
F12F12 перенесёт вас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.Windows —
Alt + ZmacOS
Option + ZЕсли строки кода или текст не вмещаются в редактор по ширине, включите перенос.
Windows —
Ctrl + KZmacOS —
Command + KZ Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете думать только о коде. Чтобы вернуться в реальный мир, нажмите
Escape.@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍35❤9🔥2👏2🍌2💔1
Полезная статья о том, как писать CSS лучше
Пару очевидных и не очень фактов из статьи:
• Flex - первый инструмент для работы с макетами, но имеет недостатки.
• Grid позволяет думать о макете в целом и заменяет множество элементов-контейнеров.
• Использование функций
min, max и clamp упрощает изменение ширины элементов в адаптивных макетах.•
Aspect-ratio упрощает отображение адаптивных изображений и видео с определенным соотношением сторон.• Определение пользовательских переменных упрощает использование одного и того же значения цвета в разных местах на странице.
• CSS предоставляет механизм управления состоянием, включая использование псевдокласса
focus-within.• Использование относительных единиц, таких как
em и rem, вместо статических значений пикселей может быть более предпочтительным.• Ориентирование на цвета HSL упрощает вычисление красивой цветовой палитры.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17❤3🔥2⚡1
ref, представляющий ссылку на соответствующий элемент, и вызовите в контексте этого элемента метод click(). Пример:import React, { useRef } from 'react';
function MyButton() {
const btnRef = useRef();
// Функция для симуляции клика
const simulateClick = () => {
btnRef.current?.click();
};
return (
<>
<button ref={btnRef} onClick={() => alert('Кликнуто!')}>Кликните меня</button>
<button onClick={simulateClick}>Симуляция клика</button>
</>
);
}В этом примере с использованием хука `useRef` создаётся ссылка
btnRef на первую кнопку, затем функцией `simulateClick` вызывается метод `click()` у btnRef.current, что имитирует клик по этой кнопке.Использование refs: ключ к DOM. В то время как в React основным является декларативный подход к управлению DOM, в ряде случаев необходим прямой доступ к DOM-элементам. Предоставить такую возможность позволяют
refs. Для функциональных компонентов используется хук useRef, для классовых — React.createRef.— Лексическое окружение: в классовых компонентах для сохранения контекста
this используйте стрелочные функции.— Хранение
refs: в классовых компонентах refs обычно присваиваются как свойства класса.— Вложенность компонентов: проверьте корректность расположения элементов в
render-методе компонента.— Предотвращение стандартного поведения: чтобы контролировать стандартную реакцию на события, используйте
e.preventDefault().@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤🔥3⚡2❤1
// используем уникальные ID
const todoItems = todos.map(todo => <li key={todo.id}>{todo.task}</li>);
// если список не статический, не используйте индексы в качестве ключей
const menuItems = menu.map((dish, index) => <li key={index}>{dish.name}</li>);
— В погоне за "идеальным" ключом. При обновлении компонентов ориентируйтесь на уникальные и стабильные ключи. Откажитесь от использования индексов массива, которые могут вызвать проблемы с производительностью. И забудьте о
Math.random(), так как случайные значения не соответствуют принципам работы алгоритма React.— Чудеса управления ключами. Ставьте явные ключи каждому элементу в массиве. Это важно для эффективного обновления DOM. В методе
.map() ключи следует присваивать на самом верхнем уровне элемента, чтобы обеспечить плавную работу компонента при рендеринге.— Запасной вариант: ручное создание ключей. Если уникальное свойство недоступно, вам пригодится создание уникальных идентификаторов вручную. Для этого подойдут библиотеки, такие как
react-key-index или uuid, предлагающие надёжные методы генерации ключей.@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🥱5👍4❤3👎1🥴1
window.matchMedia:const isMobile = window.matchMedia("(max-width: 768px)").matches;Значение
isMobile примет значение true для экранов шириной меньше 768px — это показатель мобильных устройств. Параметр max-width можно настроить согласно вашим требованиям к адаптивности. В дальнейшем isMobile позволит наладить поведение приложения в зависимости от размера экрана.import React, { useState, useEffect } from 'react';
// Хук useDeviceDetect для определения типа устройства
const useDeviceDetect = () => {
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
useEffect(() => {
// Отслеживаем изменение размера экрана здесь
const handleResize = () => setIsMobile(window.innerWidth < 768);
window.addEventListener('resize', handleResize);
// удаляем обработчик, чтобы предотвратить утечку памяти
return () => window.removeEventListener('resize', handleResize);
}, []);
return { isMobile };
};
export default useDeviceDetect;useDeviceDetect позволяет отслеживать изменение ширины устройства и динамически адаптировать рендеринг:import React from 'react';
import useDeviceDetect from './useDeviceDetect';
const MyResponsiveComponent = () => {
const { isMobile } = useDeviceDetect();
return (
<div>
{
// Выбираем между мобильным и десктопным в зависимости от типа устройства
isMobile ? <MobileComponent /> : <DesktopComponent />
}
</div>
);
};
export default MyResponsiveComponent;
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27⚡4❤3❤🔥1🔥1
Режим
<StrictMode> позволяет находить распространенные ошибки в компонентах на ранних стадиях разработки.Используйте
StrictMode для включения дополнительных поведений разработки и предупреждений для внутреннего дерева компонентов.Строгий режим включает следующие модели поведения, доступные только для разработчиков:
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15⚡3🤩1