React JS

🖥 Ручной триггер события click в ReactJS: пример кода ⏩Если в двух словах, то для того чтобы в ReactJS вручную инициировать события клика, используйте 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

📌Как писать более чистый CSS: дюжина советов от банальных до неочевидных Полезная статья о том, как писать CSS лучше Пару очевидных и не очень фактов из статьи: • Flex - первый инструмент для работы с макетами, но имеет недостатки. • Grid позволяет думать о макете в целом и заменяет множество элементов-контейнеров. • Использование функций min, max и clamp упрощает изменение ширины элементов в адаптивных макетах. • Aspect-ratio упрощает отображение адаптивных изображений и видео с определенным соотношением сторон. • Определение пользовательских переменных упрощает использование одного и того же значения цвета в разных местах на странице. • CSS предоставляет механизм управления состоянием, включая использование псевдокласса focus-within. • Использование относительных единиц, таких как em и rem, вместо статических значений пикселей может быть более предпочтительным. • Ориентирование на цвета HSL упрощает вычисление красивой цветовой палитры. 📎 Статья @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

Как стать Fullstack-разработчиком на JS? С чего начать? Начните с бесплатного урока по TypeScript и разработке server-side приложений на Node.js. Приходите на живой вебинар, где можно задавать свои вопросы! Что вы узнаете: 1. Введение в TypeScript 2. Интеграцию TypeScript с Node.js 3. Работу с модулями и зависимостями 4. Основные типы данных и аннотации типов 5. Работу с асинхронным кодом 6. Разработку серверной логики 7. Тестирование и отладку приложений 8. Лучшие практики разработки9. Практические примеры и демонстрации 🔥 Ведущий: Арсений Высоцкий — лид-инженер в крупной Software-компании. Встречаемся 21 марта в 20:00 мск в рамках старта курса «JavaScript Developer. Professional». Не упустите возможность присоединиться к группе. Осталось всего 3 места. Доступна рассрочка на обучение! А еще мы уговорили создателей подарить участникам вебинара скидку на курс 10% по 🎁промокоду js10🎁. 👉 Пройдите тест на знание JavaScript и зарегистрируйтесь на бесплатный урок прямо сейчас: https://otus.pw/79xL/?erid=LjN8KGYk8

🖥 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

💥 Фотошоп не нужен, просто добавьте CSS @react_tg

Вариант для тех, кто ищет виртуальный сервер с хорошей веб-защитой — Aéza: – Виртуальные сервера до 6.0 ГГц на лучших процессорах; – Профессиональная фильтрация атак StormWall; – Круглосуточная поддержка; – Anycast фильтрация; – Низкие цены; – 15% кешбэка по ссылке. Бесконечно можно смотреть на три вещи: на огонь, воду и скидку от Aeza! Говорят: твоё от тебя не уйдет. А зачем ждать? Динозавры тоже ждали и остались в прошлом Используй 50% скидку и погнали в будущее! Кроме того, сейчас Aéza раздает личные бесплатные сервера, забираем тут. Регистрация, подписка, платежи не потребуются. Реклама. Индивидуальный предприниматель Лобанов Леонид Константинович. ИНН 781625705648 erid: LjN8KEr3S

🖥 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

Верстаешь? Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Ты сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Добавишь в портфолио 1 качественный проект; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова. 👉 Проскочить на интенсив бесплатно Начинаем 16 марта.

🖥 Деплой React-приложения с помощью Kubernetes 🖥 ⏩Держите пошаговый гайд, как задеплоить приложение React. Здесь максимально подробно описывается каждый шаг: — создание приложения, запуск — упаковка в Docker-контейнер, конфигурирование Dockerfile — создание Docker-образа — установка kubectl и minikube, запуск — конфигурирование YAML-файла — ...короче, весь процесс Супер полезно, экономит время, не нужно проверять всё методом тыка 📎 Гайд @react_tg

Яндекс Практикум запустил курс «Инженер по тестированию: от новичка до автоматизатора». На нём студенты научатся вручную тестировать приложения и сайты, а потом — писать код на языке Java, чтобы запускать автоматические тесты. Автоматизация — востребованный навык у опытных тестировщиков, который открывает путь к более высоким должностям. Что вас ждёт во время учёбы: — Интерактивный учебник, где всё объясняем простым языком. — Тренажёр с мгновенной проверкой заданий. — Практика на учебных приложениях и проекты для портфолио. — Команда сопровождения, которая поможет разобраться в сложных темах и дойти до конца. — Карьерные консультанты, которые научат составлять резюме, проходить собеседования и тестовые задания. Попробуйте курс бесплатно, а если понравится — приходите учиться.

🖥 Полезные советы по написанию чистого 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 ограничивается вебом? 13 марта в 18:00 (GMT+3) Social Discovery Group приглашает на бесплатный вебинар "Optimizing React: Web & Beyond"! Узнаем, как React применяют в 3D графике, монтаже видео и создании ботов. А еще обещаем интересные разговоры о Server-Side Rendering и оптимизированных методах сборки компонентов. Social Discovery Group формирует будущее в индустрии онлайн-знакомств, с портфелем из более чем 70 брендов и 500+ миллионами пользователей по всему миру! Наша команда отлично разбирается в трудностях масштабирования приложений для такой огромной аудитории, сохраняя при этом их высокую производительность. 📝 Регистрация уже открыта: https://bit.ly/4abgoVP

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

Телеграм-канал фронтендерского сообщества Яндекса Yandex for Frontend — канал от фронтендеров Яндекса. Рассказываем, как мы делаем красивые и функциональные интерфейсы в наших продуктах, и показываем людей, которые двигают фронтенд-разработку вперёд. *Подписывайтесь* 👉 **https://t.me/yandex4frontend

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

Лучшие практики React-разработки собраны на бесплатном вебинаре Optimizing React: Web & Beyond! 13 марта команда разработчиков Social Discovery Group на примере реальных кейсов расскажут про: Как оптимизировать React-приложения и снизить нагрузку на устройства; Как основные «фичи» React нашли себе применение в монтаже видео, 3D графике и написании ботов; Как не сломать мемоизацию в React. 📅 Дата: 13 марта, 19:00 (GMT+4) 🔉 Язык: русский Регистрируйтесь на вебинар 👉🏻 здесь 👈🏻

🖥 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

🖥 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

🖥 Годный ролик с созданием 6 проектов на ReactJS 📎 Вот пересказ содержимого от YaGPT В ролике автор касается таких тем, как: ⏩Передача индекса и корректного варианта ответа в компонент result. ⏩Преобразование ответа в формат JSON и извлечение данных. ⏩Отображение вопросов и вариантов ответов при помощи списка и функции для обработки кликов на вариантах. ⏩Рендеринг пользователей, добавление их в список приглашений и удаление из него. В целом ролик очень полезный и неплохо помогает попрактиковаться и прокачать свой React @react_tg