React JS

💡Как использовать forwardRef с generic компонентами Одно из ограничений forwardRef в том, что он отключает выведение типа для generic компонентов. Например:

const Table = <T,>(
  props: {
    data: T[];
    renderRow: (row: T) => React.ReactNode;
  },
  ref: React.ForwardedRef<HTMLTableElement>
) => {
  /** --snip-- */
};
 
const ForwardReffedTable = React.forwardRef(Table);

<Table
    data={["a", "b"]}
    renderRow={(row) => { // Тип выводится: row: string
      return <tr>{row}</tr>;
  }}
/>;

<ForwardReffedTable
    data={["a", "b"]}
    renderRow={(row) => { // Тип не выводится: row: unknown
      return <tr>{row}</tr>;
  }}
/>;

Чтобы исправить выведение типа для generic компонентов, можно создать утилитарную функцию для вызова forwardRef с правильными типами:

function fixedForwardRef<T, P = {}>(
  render: (props: P, ref: React.Ref<T>) => React.ReactNode
): (props: P & React.RefAttributes<T>) => React.ReactNode {
  return React.forwardRef(render) as any;
}

// Вызов forwardRef с правильным выведением типа:
const ForwardReffedTable = fixedForwardRef(Table); 

🔗 Подробнее @react_tg

Реализация React Query в веб-приложении В этом уроке рассмотрим, как интегрировать React Query в базовое веб-приложение. React Query — мощная библиотека для управления, кэширования и синхронизации состояния сервера в приложениях React. Мы создадим простое приложение, получающее данные из API с открытым исходным кодом, и используем Bootstrap для применения стилей. Цели проекта Создать веб-приложение для получения данных из нижеуказанного API с помощью React Query. 📌Читать @react_tg

CopilotKit Вот библиотека с открытым исходным кодом, которая позволяет очень просто интегрировать искусственный интеллект в приложение. Посмотрите их репозиторий: 🐱 GitHub CopilotKit возьмет контекст вашего приложения и передаст его в свою инфраструктуру React для создания: - ИИ-чатботов в приложении - Текстовые области с поддержкой ИИ - RAG, вызов функций и интеграция Библиотека имеет встроенную поддержку LangChain, LangGraph и LangServe. Вы можете использовать их для расширения возможностей движка. Также в библиотеку встроены нативные UI/UX-компоненты, которые вы можете использовать в своих приложениях: - CopilotChat - CopilotSidebar - CopilotPopup - CopilotTextarea Библиотека имеет открытый исходный код. Вы можете размещать ее самостоятельно. Вы можете использовать ее с любым LLM, включая GPT-4. Этот проект был №2 на HackerNews и ProductHunt. Он был трендом на GitHub. Эта библиотека работает на любом приложении React, но команда работает над ее расширением.

💡Frontend совет Для определения min-width и width в CSS достаточно одной функции max ➡️ Демо: здесь #css #tip @react_th

«Я💛Фронтенд 2024»: встречаемся 23 марта в Москве и онлайн! Выступления спикеров, дискуссии с экспертами, новости веба, активности с подарками и, конечно же, нетворкинг — программа будет насыщенной. Вы сможете послушать доклады крутых специалистов, напрямую задать им свои вопросы, познакомиться и пообщаться с другими участниками сообщества. Регистрируйтесь и приходите! Если не сможете быть офлайн, всё равно регистрируйтесь — будет онлайн-трансляция. Реклама. ООО "Яндекс". ИНН 7736207543

Огромный выбор инструментов для веб-разработки. Автор классифицировал их на 30 категорий и представил несколько десятков сервисов в каждой категории. Таким образом, можно найти решение практически для любой задачи. Этот список включает в себя шрифты, иконки, палитры, стоковое аудио, шаблоны кода, инструменты для дизайна, JS-фреймворки и многое другое. Все это делает эту подборку незаменимой шпаргалкой для любого веб-разработчика. 👀 Смотреть

🚀Попробуйте TextSelection - #React TS хук, который отслеживает выделение текста пользователем и его положение на экране! Идеально подходит для создания интуитивно понятных функций пользовательского интерфейса, таких как всплывающая подсказка "Поделиться", подобно Medium. ✨ ▪ Демо: http://grayscal.es/hooks/use-text-selection ▪Код: https://gist.github.com/KristofferEriksson/8acb9b3eb241507eb0f6232938bf4ec7 @react_tg

"У России три пути: рейвы, водка и айти" — к чему готовиться, если ты выбрал последний вариант Представь, ты решил заработать денег и стать разработчиком. Из каждого же утюга и ютуб-канала доносится, что ровные пацаны залетают в айти с двух ног. Нужно просто быстренько пройти курс от крупной онлайн-школы, а через несколько месяцев можно уже уезжать на Бали попивать кокосовую водичку на удаленке с зарплатой 150к+. И вот ты, зеленый и неумелый, приходишь на один из таких курсов, смотришь видосики, общаешься со своими кураторами раз в неделю, иногда делаешь домашку, а дальше — все, что выше. Представил? Клево? Теперь давай знакомиться с реальностью. Что нормально на рынке труда, если ты новичок: 1) Судорожный поиск работы в виде 100 откликов в день, из которых на собеседования тебя позовут дай бог две компании 2) Зарплата 40-60к в первые полгода. Не жди больше. Никогда. Исключения бывают, но редко. 3) Перерасчет каждые полгода и повышение оклада на 20-30%. Но ради этого тебе придется поиграть в “Голодные Игры” и быть готовым к увольнению в любой кризисный момент Важно понимать: все джуны в IT - это убыток для компаний, но есть ребята из SaintCode, которые честно тебе расскажут, как обстоят дела на рынке и максимально подготовят к поиску работы. Студенты там занимаются по шесть часов в день в течение трех месяцев вживую с преподавателем. А еще у них есть домашка, на которую они тратят по 2-3 часа ежедневно. И даже после этого шансы найти работу в лучшем случае составляют 40%. Короче, SaintCode явно шарят в программировании и наедине с непонятной темой точно тебя не бросят. Записывайся на пробный урок и готовься пахать — в ближайшее время тебе точно будет не до рейвов

⚡️ Locofy.ai — полезная утилита для конвертирования дизайна сайта в его код. Вы можете переносить креативы из Figma/Adobe XD сразу в React, React Native, HTML-CSS, Next.js или Gatsby. Есть функция синхронизации кода с GitHub и Visual Studio. @react_tg

Уже год работаешь в ИТ и готов к росту и масштабным проектам? 🚀 Прокачай скиллы c Холдингом Т1! Приглашаем разработчиков JS+React в Открытую школу Т1 — программу найма в формате ИТ-интенсива: offer week + обучение без отрыва от работы. 🤚Поможем улучшить навыки и освоить новые перспективы, если ты готов к переменам в карьере, имеешь опыт работы разработчиком JS+React от года и хочешь присоединиться к команде лидера* ИТ-рынка — Холдинга Т1! 📚В программе интенсива: архитектура, BFF, микрофронты и др. Подробнее на сайте. 📌Как это работает? 🔹Подай заявку на сайте ⬇️Рассмотрим резюме, если твой профиль подойдет, то попросим пройти тестирование 👌 При успешном прохождении — зачислим в группу 🔹Лучшим назначим интервью и направим оффер! Формат обучения: онлайн (8 часов в неделю) Программа длится 1 месяц 🏳️Принимаем заявки до 25 февраля! *По версии CNews Analytics 2022, TAdviser 2021 и RAEX 2023

🌐🚀 #React hook - UseNetwork Информация о сети в реальном времени! 📡✨ Вы можете узнать скорость передачи данных, тип соединения и статус сети прямо в вашем приложении. Отлично подходит для адаптации контента вашего приложения в зависимости от качества соединения пользователя! 📶💻 👉 Demo: https://grayscal.es/hooks/use-network @react_tg

🖥 Собеседование Frontend разработчика в прямом эфире на нашем канале. https://www.youtube.com/watch?v=VlzPNfdNt_k @react_tg

🚀 useLocation - #React TS хук, который предоставляет данные о геолокации в реальном времени, а также метрики курса движения и скорости. 🗺️📍 Используйте его для получения информации о близлежащих местах или для определения местоположения пользователей поблизости. ▪Демо ▪Код @react_tg

Найден полезный курс по фронтенд-разработке! Что будет в бесплатном доступе: 1️⃣ Создание полноценного веб-сайта на HTML и CSS Поймёшь, как создавать стильные и функциональные веб-страницы с использованием современных технологий. 2️⃣ Оживление страницы с помощью JavaScript Попробуешь добавить интерактивность и динамичность в свои проекты. 3️⃣ Работа с фреймворком Angular Узнаешь, как создавать масштабируемые и эффективные веб-приложения 4️⃣ Подключение Backend и загрузка сайта на хостинг Впитаешь основы работы с Backend'ом и развернёшь свой проект на хостинге. 5️⃣ Советы по доработке проекта Получишь ценные советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня и качества. Обучение пройдёт 16-22 февраля. 👉 Успей ухватить бесплатно такой ценный материал Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 2 Продолжаем серию статей из 3 частей по визуализации данных с помощью React, Material UI, Tailwind CSS и Nivo. В 1-й части мы создали каркас для веб-приложения, содержащий 3 отдельные страницы: Home, About и Insights. В этой, 2-й части, будем использовать Tailwind CSS в качестве фреймворка для работы со стилями веб-приложения. Предварительные условия Если у вас еще нет каркаса веб-приложения, выполните шаги, указанные в 1-й части. Затем интегрируйте в проект Tailwind CSS. Перед разработкой веб-приложения обычно создается руководство по проектированию. Оно включает указания, касающиеся цветовых схем, типографики, интервалов и других стилистических компонентов. По сути, такое руководство является планом проекта. Задачи данного туториала будут сведены только к разработке цветовой схемы. 📌Читать 📌Часть 1

🖥 Лучшие бесплатные курсы React 2024 ▪ Читать @react_tg

8 советов, которые сделают JavaScript-код чище Прежде чем перейти к теме, выясним, что такое чистый код. ЧИСТЫЙ КОД — ЭТО КОНЦЕПЦИЯ В РАЗРАБОТКЕ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ, ПОДЧЕРКИВАЮЩАЯ ВАЖНОСТЬ НАПИСАНИЯ КОДА, КОТОРЫЙ ЛЕГКО ПОНЯТЬ, ПОДДЕРЖИВАТЬ И ТЕСТИРОВАТЬ. ОНА ВКЛЮЧАЕТ В СЕБЯ ТАКИЕ ПРИНЦИПЫ, КАК ЧИТАБЕЛЬНОСТЬ, ПРОСТОТА, ИЗБЕГАНИЕ ИЗБЫТОЧНОСТИ, ОСМЫСЛЕННОЕ ИМЕНОВАНИЕ, ЕДИНСТВЕННАЯ ОТВЕТСТВЕННОСТЬ ФУНКЦИЙ ИЛИ МЕТОДОВ, ЭФФЕКТИВНАЯ ОБРАБОТКА ОШИБОК, ЧЕТКАЯ КОММУНИКАЦИЯ ЧЕРЕЗ КОД И ТЕСТИРУЕМОСТЬ. ЦЕЛЬ ЧИСТОГО КОДА — СДЕЛАТЬ ИСХОДНЫЙ КОД ПОНЯТНЫМ КАК ДЛЯ НЫНЕШНИХ, ТАК И ДЛЯ БУДУЩИХ РАЗРАБОТЧИКОВ, ЧТО СПОСОБСТВУЕТ СОТРУДНИЧЕСТВУ И ОБЛЕГЧАЕТ ПОСТОЯННОЕ СОПРОВОЖДЕНИЕ И ОПТИМИЗАЦИЮ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ. ПРИНЦИПЫ ЧИСТОГО КОДА НАИБОЛЕЕ ПОДРОБНО ИЗЛОЖЕНЫ В КНИГЕ РОБЕРТА К. МАРТИНА “ЧИСТЫЙ КОД: РУКОВОДСТВО ПО ГИБКОЙ РАЗРАБОТКЕ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ”. Если у вас много сложного кода и вы не работаете над его очисткой, вам будет очень сложно его поддерживать. Вот 8 советов, которые сделают JavaScript-код более читабельным и чистым. 📌 Смотреть

🖥 Replyke — встраиваемые комментарии для React Инструмент работает все максимально просто: сами комментарии подключаются по системе plug&play, а настроить их можно прямо на веб-сайте проекта Replyke предоставляет готовый к использованию компонент комментариев, который легко настраивается и интегрируется с существующими React-проектами https://replyke.com/ #React #web @react_tg

Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 1 Визуализация данных — важнейший компонент процесса принятия обоснованных решений и представления информации в удобном для пользователя виде. Она позволяет преобразовывать сложные данные в четкие и осмысленные визуальные картины, благодаря чему организации могут решать различные задачи и повышать эффективность своей работы. Для визуализации данных существует множество платформ бизнес-аналитики (BI). В качестве примера можно привести Tableau, Power BI, QlikView и Looker. Однако они могут иметь ограничения и отличаться высокой стоимостью. Альтернативным подходом к использованию BI-инструментов является применение библиотек визуализации данных, таких как Nivo, при веб-разработке фронтенда. В этом цикле из трех частей мы рассмотрим, как создавать дэшборды, отслеживающие производительность сайта, с помощью React, Tailwind CSS, Material UI и Nivo. Если вы разработчик, желающий усовершенствовать навыки визуализации данных, владелец бизнеса, стремящийся получить представление о данных, или просто человек, интересующийся миром React и визуализации данных, рекомендуем приступить к работе после прочтения серии этих статей. Итак, начнем! 📌 Читать

Искусство манипулирования массивами JavaScript: исследование метода Array.prototype.filter() Такие методы, как Array.prototype.filter(), Array.prototype.map() и Array.prototype.reduce(), являются неотъемлемой частью парадигмы функционального программирования JavaScript. Но достаточно ли хорошо вы понимаете, как работает метод filter? Не будем вдаваться в подробности реализации, а рассмотрим только внутренний механизм этого метода. “Дьявол кроется в деталях” — попробуем копнуть поглубже и поискать этого “дьявола” в языке JavaScript. В JavaScript массивы не являются “примитивными значениями”, а рассматриваются как “объекты”, а при слове “объект” на ум приходит другое слово — “метод”. В этой статье хочу обратить ваше внимание на неизменяющие (Non-Mutating ) и изменяющие (Mutating) методы массива. На простом языке разницу между ними я бы объяснил так: методы, которые не изменяют исходный массив, а создают или возвращают новый массив с необходимыми изменениями, называются неизменяющими, а изменяющие методы — это те, которые изменяют исходный массив. Array.prototype.filter() — один из неизменяющих методов, возвращающий новый массив. Возвращаемый массив содержит элементы, отфильтрованные из исходного массива на основе теста, реализованного функцией обратного вызова, переданной в качестве входного аргумента методу .filter(). Сигнатура метода “filter” выглядит следующим образом: 📌Смотреть