🖥 5 вещей, которые сделают ваш React проект лучше

*️⃣Используйте JSX-сокращения
Допустим, вам нужно управлять видимостью компонента Navbar с помощью пропса showTitle:
Плохо

return (
  <Navbar showTitle={true} />
);    

Хорошо

return(
  <Navbar showTitle />  
);  

*️⃣Используйте тернарные операторы
Отличный способ для выбора между двумя компонентами по некоторому условию
Плохо

const { role } = user;

if(role === ADMIN) {
  return <AdminUser />
}else{
  return <NormalUser />
}  

Хорошо

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />   

*️⃣Используйте преимущества объектных литералов
Если у вас выбор между тремя и более компонентами, литералы объектов могут сделать код более читаемым – используйте их вместо сложных условий.
Плохо

const {role} = user

switch(role){
  case ADMIN:
    return <AdminUser />
  case EMPLOYEE:
    return <EmployeeUser />
  case USER:
    return <NormalUser />
}  

Хорошо

const {role} = user

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser
};

const Component = components[role];

return <Component />;  

*️⃣Используйте фрагменты
Нет никакого преимущества в использовании div вместо Fragment. Зачем нам лишний элемент в DOM?
Плохо

return (
  <div>
     <Component1 />
     <Component2 />
     <Component3 />
  </div>  
)   

Хорошо

return (
  <>
     <Component1 />
     <Component2 />
     <Component3 />
  </>  
)    

*️⃣Не определяйте функцию внутри рендера
Лучше не смешивать логику и рендер внутри компонента.
Плохо

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>    // NOTICE HERE
      This is a bad example 
    </button>  
)  

Хорошо

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
  <button onClick={submitData}>  
    This is a good example 
  </button>  
)   

📎 Ещё больше полезных советов

@react_tg

🖥 Boa — экспериментальный лексер, парсер и компилятор Javascript

Тут на днях года состоялся релиз Boa v0.18 — экспериментального лексера, парсера и компилятора Javascript, а также движка ECMAScript, написанного на языке программирования Rust.

🔥 Новая версия Boa позволяет легко встраивать JS-движок в различные проекты, и а также использовать его из WebAssembly и командной строки.

Разработчики пояснили, что этот выпуск Boa также знаменует собой серьёзное обновление дизайна сайта проекта и появление нового логотипа.

«Поскольку Boa используется все большим количеством проектов, важно, чтобы мы могли предоставить стабильный и надёжный API. Нам кажется, что мы ещё не достигли этого результата, но после обсуждения с командой мы решили нацелиться на выпуск версии 1.0 в ближайшем будущем. Это станет для нас важной вехой, и мы надеемся, что к тому времени у нас будет много новых функций и улучшений», — пояснили разработчики проекта.

Впервые проект Boa был представлен на конференции JSConf EU 2019 разработчиком Джейсоном Уильямсом.

🖥Исходный код проекта выложен на GitHub под лицензией MIT
4.6К⭐️

@react_tg

🖥 Создание PDF с помощью React

🌟 Относительно недавно разработчики Onedoc выпустили UI Kit под названием React Print. Он предназначен для создания PDF-файлов с помощью React и TypeScript.
С его помощью можно подготавливать шаблоны счетов, брошюр и любых других документов.

Пользуйтесь)

🖥 GitHub

@react_tg

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

🖥 Полезные советы по написанию чистого React кода

▶️Деструктурирование свойств —
— это хороший способ сделать код чище и улучшить возможности по его поддержке. Дело в том, что это позволяет чётко выражать или объявлять то, что использует некая сущность. При этом такой подход не принуждает разработчиков вчитываться в реализацию компонента для того, чтобы выяснить состав свойств, связанных с ним.

// до рефакторинга
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

🖥 React Email 2.0

▶️Относительно недавно состоялся релиз мажорной версии открытого проекта для работы с электронной почтой (коллекция компонентов для создания электронных писем с использованием React и TypeScript) React Email 2.0.

Разработчики проекта пояснили, что в React Email 2.0 переосмысленный опыт предварительного просмотра, в код внесены изменения для значительного улучшения производительности, добавлены новые компоненты (Code Block, Inline Code, ), появилась поддержка развёртывания в Vercel, а также улучшена поддержка монорепозиториев.

Команда проекта React Email опубликовала инструкцию по обновлению на версию 2.0.

▶️ Основные изменения и добавления в проекте React Email 2.0:
— обновлены компоненты и основные блоки;
— статические файлы для сервера предварительного просмотра теперь хранятся в папке ./emails/static или в указанном каталоге электронной почты;
— улучшен пользовательский интерфейс и обновлены иконки;
— добавлена возможность просмотра, как ваша электронная почта будет выглядеть на мобильных устройствах;
— появилась поддержка подпапок, что позволяет приложению предварительного просмотра игнорировать некоторые из них, если они имеют префикс _ (например: _comComponents);
— время запуска локального сервера React Email 2.0 при новой установке составляет около 7 секунд (для React Email 1.10.1 этот параметр составляет 40 секунд);
— после завершения первоначальной настройки время загрузки составляет около 1 секунды (зависит от конфигурации сервера);
— улучшена фильтрация отображения электронных писем на боковой панели, которая показывает их только в том случае, если где-то внутри у них есть настройки экспорта по умолчанию. Это своего рода эвристика, и её всё еще можно улучшить.

🖥 Исходный код проекта доступен на GitHub под лицензией MIT License
⭐️ 11.9K

@react_tg

🖥 5 маленьких, но полезных библиотек React

▶️1. Urlcat

Urlcat — это крошечная JavaScript-библиотека, которая делает очень удобным построение URL и предотвращает распространенные ошибки.

Да, для построения URL можно использовать URL API. Но вам все равно придется позаботиться о некоторых деталях вместо того, так что используйте Urlcat.

Вы ее подключаете, и она просто работает. Не нужно изучать сложные шаблоны или тратить часы на документацию.

🖥 Смело пробуйте, GitHub


▶️2. UseHooks-ts

UseHooks — это небольшая библиотека с хорошо написанными, задокументированными и полностью типизированными (для пользователей TypeScript) хуками для всех этих вещей. Использование этой библиотеки позволит вам не отвлекаться на мелочи и сосредоточиться на самом проекте.

🖥 GitHub


▶️3. Logt

Когда я пишу код фронтенда, я хочу иметь логи. Но с некоторыми требованиями:
— логи должны быть полностью типизированными (чтобы использовать в Typescript)
— они должны быть небольшими
— у логов должны быть цветные ярлыки
— мне нужны разные уровни логов
— должна быть возможность скрывать некоторые логи в зависимости от условий (мб, в продакшен-сборке)
— должна быть возможность отправлять эти логи куда-то еще (мб, в Sentry).

После долгих поисков подходящей библиотеки, я нашел Logt, которая отвечает всем моим требованиям.

🖥 Рекомендую на 100%, GitHub


▶️4. Loadable Components

Несколько ключевых моментов: Loadable Components поддерживает SSR (рендеринг на стороне сервера), Library Splitting (разделение библиотеки) и даже полный динамический импорт. Неплохо, да?

Библиотека действительно проста в использовании. Практически plug-and-play.

🖥 GitHub


▶️5. Emoji Mart

Работая над различными проектами, мне часто приходится иметь дело с эмодзи. Так что держите эту маленькую библиотеку.

🖥 Позвольте вам представить Emoji Mart, GitHub

@react_tg

🖥 10 хоткеев VS Code, которые ускорят работу с React и не только

⏩Создать структуру документа
! и Tab

Это сочетание клавиш за секунду создаёт базовую структуру кода или вложенные теги.

⏩Быстро добавить комментарий
Windows — Ctrl + /
macOS — Command + /

⏩Перейти к строке под номером
Windows — Ctrl + G
macOS — 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 — F2
macOS — F2

Чтобы не выискивать переменные по всему документу и не менять руками, есть F2.

⏩Отформатировать документ

Windows — Shift + Alt + F
macOS Shift + Option + F

VS Code предложит выбрать расширение из существующих, а потом красиво отформатирует документ — расставит по местам блоки и скобки и т.д.

⏩Перейти к переменной

Windows — F12
macOS — F12

F12 перенесёт вас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.

⏩Включить или выключить перенос слов

Windows — Alt + Z
macOS Option + Z

Если строки кода или текст не вмещаются в редактор по ширине, включите перенос.

⏩Включить дзен-режим

Windows — Ctrl + KZ
macOS — Command + KZ

Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете думать только о коде. Чтобы вернуться в реальный мир, нажмите Escape.

@react_tg

📌Как писать более чистый CSS: дюжина советов от банальных до неочевидных

Полезная статья о том, как писать CSS лучше
Пару очевидных и не очень фактов из статьи:

• Flex - первый инструмент для работы с макетами, но имеет недостатки.

• Grid позволяет думать о макете в целом и заменяет множество элементов-контейнеров.

• Использование функций min, max и clamp упрощает изменение ширины элементов в адаптивных макетах.

• Aspect-ratio упрощает отображение адаптивных изображений и видео с определенным соотношением сторон.

• Определение пользовательских переменных упрощает использование одного и того же значения цвета в разных местах на странице.

• CSS предоставляет механизм управления состоянием, включая использование псевдокласса focus-within.

• Использование относительных единиц, таких как em и rem, вместо статических значений пикселей может быть более предпочтительным.

• Ориентирование на цвета HSL упрощает вычисление красивой цветовой палитры.

📎 Статья

@react_tg