React JS
Відкрити в Telegram
React программирование @haarrp - admin @itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml № 5037566384
Показати більше
Сітка:📈 Аналітичний огляд Telegram-каналу React JS
Канал React JS (@react_tg) у мовному сегменті Російська є активним учасником. На даний момент спільнота об'єднує 16 112 підписників, посідаючи 7 993 місце в категорії Технології та додатки та 40 644 місце у регіоні Росія.
📊 Показники аудиторії та динаміка
З моменту свого створення невідомо, проект продемонстрував стрімке зростання, зібравши аудиторію у 16 112 підписників.
За останніми даними від 30 жовтня, 2026, канал демонструє стабільну активність. Хоча за останні 30 днів спостерігається зміна кількості учасників на -144, а за останні 24 години на -7, загальне охоплення залишається високим.
- Статус верифікації: Не верифікований
- Рівень залученості (ER): Середній показник залученості аудиторії становить 14.14%. Протягом перших 24 годин після публікації контент зазвичай збирає 5.66% реакцій від загальної кількості підписників.
- Охоплення публікацій: В середньому кожен допис отримує 2 279 переглядів. Протягом першої доби публікація в середньому набирає 912 переглядів.
- Реакції та взаємодія: Аудиторія активно підтримує контент: середня кількість реакцій на один пост – 16.
- Тематичні інтереси: Контент зосереджений навколо ключових тем, таких як javascript, github, css, интерфейс, браузер.
📝 Опис та контентна політика
Автор описує ресурс як майданчик для висловлення суб'єктивної думки:
“React программирование
@haarrp - admin
@itchannels_telegram - 🔥лучшие ит-каналы
@javascriptv - продвинутый javascript
@programming_books_it - бесплатные it книги
@ai_machinelearning_big_data - ml
№ 5037566384”
Завдяки високій частоті оновлень (останні дані отримано 31 жовтня, 2026), канал підтримує актуальність та високий рівень охоплення публікацій. Аналітика показує, що аудиторія активно взаємодіє з контентом, що робить його важливою точкою впливу в категорії Технології та додатки.
16 112
Підписники
-724 години
-477 днів
-14430 днів
Архів дописів
16 112
💡Как использовать 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>;
}}
/>;
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);
16 112
Реализация React Query в веб-приложении
В этом уроке рассмотрим, как интегрировать React Query в базовое веб-приложение.
React Query — мощная библиотека для управления, кэширования и синхронизации состояния сервера в приложениях React. Мы создадим простое приложение, получающее данные из API с открытым исходным кодом, и используем Bootstrap для применения стилей.
Цели проекта
Создать веб-приложение для получения данных из нижеуказанного API с помощью React Query.
📌Читать
@react_tg
16 112
CopilotKit
Вот библиотека с открытым исходным кодом, которая позволяет очень просто интегрировать искусственный интеллект в приложение.
Посмотрите их репозиторий:
🐱 GitHub
CopilotKit возьмет контекст вашего приложения и передаст его в свою инфраструктуру React для создания:
- ИИ-чатботов в приложении
- Текстовые области с поддержкой ИИ
- RAG, вызов функций и интеграция
Библиотека имеет встроенную поддержку LangChain, LangGraph и LangServe. Вы можете использовать их для расширения возможностей движка.
Также в библиотеку встроены нативные UI/UX-компоненты, которые вы можете использовать в своих приложениях:
- CopilotChat
- CopilotSidebar
- CopilotPopup
- CopilotTextarea
Библиотека имеет открытый исходный код. Вы можете размещать ее самостоятельно. Вы можете использовать ее с любым LLM, включая GPT-4.
Этот проект был №2 на HackerNews и ProductHunt. Он был трендом на GitHub.
Эта библиотека работает на любом приложении React, но команда работает над ее расширением.
16 112
«Я💛Фронтенд 2024»: встречаемся 23 марта в Москве и онлайн!
Выступления спикеров, дискуссии с экспертами, новости веба, активности с подарками и, конечно же, нетворкинг — программа будет насыщенной.
Вы сможете послушать доклады крутых специалистов, напрямую задать им свои вопросы, познакомиться и пообщаться с другими участниками сообщества.
Регистрируйтесь и приходите!
Если не сможете быть офлайн, всё равно регистрируйтесь — будет онлайн-трансляция.
Реклама. ООО "Яндекс". ИНН 7736207543
16 112
Огромный выбор инструментов для веб-разработки.
Автор классифицировал их на 30 категорий и представил несколько десятков сервисов в каждой категории.
Таким образом, можно найти решение практически для любой задачи.
Этот список включает в себя шрифты, иконки, палитры, стоковое аудио, шаблоны кода, инструменты для дизайна, JS-фреймворки и многое другое. Все это делает эту подборку незаменимой шпаргалкой для любого веб-разработчика.
👀 Смотреть
16 112
🚀Попробуйте TextSelection - #React TS хук, который отслеживает выделение текста пользователем и его положение на экране!
Идеально подходит для создания интуитивно понятных функций пользовательского интерфейса, таких как всплывающая подсказка "Поделиться", подобно Medium. ✨
▪ Демо: http://grayscal.es/hooks/use-text-selection
▪Код: https://gist.github.com/KristofferEriksson/8acb9b3eb241507eb0f6232938bf4ec7
@react_tg
16 112
"У России три пути: рейвы, водка и айти" — к чему готовиться, если ты выбрал последний вариант
Представь, ты решил заработать денег и стать разработчиком.
Из каждого же утюга и ютуб-канала доносится, что ровные пацаны залетают в айти с двух ног. Нужно просто быстренько пройти курс от крупной онлайн-школы, а через несколько месяцев можно уже уезжать на Бали попивать кокосовую водичку на удаленке с зарплатой 150к+.
И вот ты, зеленый и неумелый, приходишь на один из таких курсов, смотришь видосики, общаешься со своими кураторами раз в неделю, иногда делаешь домашку, а дальше — все, что выше.
Представил? Клево? Теперь давай знакомиться с реальностью.
Что нормально на рынке труда, если ты новичок:
1) Судорожный поиск работы в виде 100 откликов в день, из которых на собеседования тебя позовут дай бог две компании
2) Зарплата 40-60к в первые полгода. Не жди больше. Никогда. Исключения бывают, но редко.
3) Перерасчет каждые полгода и повышение оклада на 20-30%. Но ради этого тебе придется поиграть в “Голодные Игры” и быть готовым к увольнению в любой кризисный момент
Важно понимать: все джуны в IT - это убыток для компаний, но есть ребята из SaintCode, которые честно тебе расскажут, как обстоят дела на рынке и максимально подготовят к поиску работы.
Студенты там занимаются по шесть часов в день в течение трех месяцев вживую с преподавателем. А еще у них есть домашка, на которую они тратят по 2-3 часа ежедневно. И даже после этого шансы найти работу в лучшем случае составляют 40%.
Короче, SaintCode явно шарят в программировании и наедине с непонятной темой точно тебя не бросят.
Записывайся на пробный урок и готовься пахать — в ближайшее время тебе точно будет не до рейвов
16 112
Уже год работаешь в ИТ и готов к росту и масштабным проектам?
🚀 Прокачай скиллы c Холдингом Т1!
Приглашаем разработчиков JS+React в Открытую школу Т1 — программу найма в формате ИТ-интенсива: offer week + обучение без отрыва от работы.
🤚Поможем улучшить навыки и освоить новые перспективы, если ты готов к переменам в карьере, имеешь опыт работы разработчиком JS+React от года и хочешь присоединиться к команде лидера* ИТ-рынка — Холдинга Т1!
📚В программе интенсива: архитектура, BFF, микрофронты и др. Подробнее на сайте.
📌Как это работает?
🔹Подай заявку на сайте
⬇️Рассмотрим резюме, если твой профиль подойдет, то попросим пройти тестирование
👌 При успешном прохождении — зачислим в группу
🔹Лучшим назначим интервью и направим оффер!
Формат обучения: онлайн (8 часов в неделю) Программа длится 1 месяц
🏳️Принимаем заявки до 25 февраля!
*По версии CNews Analytics 2022, TAdviser 2021 и RAEX 2023
16 112
🌐🚀 #React hook - UseNetwork
Информация о сети в реальном времени! 📡✨
Вы можете узнать скорость передачи данных, тип соединения и статус сети прямо в вашем приложении.
Отлично подходит для адаптации контента вашего приложения в зависимости от качества соединения пользователя! 📶💻
👉 Demo: https://grayscal.es/hooks/use-network
@react_tg
16 112
🖥 Собеседование Frontend разработчика в прямом эфире на нашем канале.
https://www.youtube.com/watch?v=VlzPNfdNt_k
@react_tg
16 112
Найден полезный курс по фронтенд-разработке!
Что будет в бесплатном доступе:
1️⃣ Создание полноценного веб-сайта на HTML и CSS
Поймёшь, как создавать стильные и функциональные веб-страницы с использованием современных технологий.
2️⃣ Оживление страницы с помощью JavaScript
Попробуешь добавить интерактивность и динамичность в свои проекты.
3️⃣ Работа с фреймворком Angular
Узнаешь, как создавать масштабируемые и эффективные веб-приложения
4️⃣ Подключение Backend и загрузка сайта на хостинг
Впитаешь основы работы с Backend'ом и развернёшь свой проект на хостинге.
5️⃣ Советы по доработке проекта
Получишь ценные советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня и качества.
Обучение пройдёт 16-22 февраля.
👉 Успей ухватить бесплатно такой ценный материал
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
16 112
Разработка веб-дэшбордов с использованием 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
16 112
8 советов, которые сделают JavaScript-код чище
Прежде чем перейти к теме, выясним, что такое чистый код.
ЧИСТЫЙ КОД — ЭТО КОНЦЕПЦИЯ В РАЗРАБОТКЕ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ, ПОДЧЕРКИВАЮЩАЯ ВАЖНОСТЬ НАПИСАНИЯ КОДА, КОТОРЫЙ ЛЕГКО ПОНЯТЬ, ПОДДЕРЖИВАТЬ И ТЕСТИРОВАТЬ. ОНА ВКЛЮЧАЕТ В СЕБЯ ТАКИЕ ПРИНЦИПЫ, КАК ЧИТАБЕЛЬНОСТЬ, ПРОСТОТА, ИЗБЕГАНИЕ ИЗБЫТОЧНОСТИ, ОСМЫСЛЕННОЕ ИМЕНОВАНИЕ, ЕДИНСТВЕННАЯ ОТВЕТСТВЕННОСТЬ ФУНКЦИЙ ИЛИ МЕТОДОВ, ЭФФЕКТИВНАЯ ОБРАБОТКА ОШИБОК, ЧЕТКАЯ КОММУНИКАЦИЯ ЧЕРЕЗ КОД И ТЕСТИРУЕМОСТЬ.
ЦЕЛЬ ЧИСТОГО КОДА — СДЕЛАТЬ ИСХОДНЫЙ КОД ПОНЯТНЫМ КАК ДЛЯ НЫНЕШНИХ, ТАК И ДЛЯ БУДУЩИХ РАЗРАБОТЧИКОВ, ЧТО СПОСОБСТВУЕТ СОТРУДНИЧЕСТВУ И ОБЛЕГЧАЕТ ПОСТОЯННОЕ СОПРОВОЖДЕНИЕ И ОПТИМИЗАЦИЮ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ. ПРИНЦИПЫ ЧИСТОГО КОДА НАИБОЛЕЕ ПОДРОБНО ИЗЛОЖЕНЫ В КНИГЕ РОБЕРТА К. МАРТИНА “ЧИСТЫЙ КОД: РУКОВОДСТВО ПО ГИБКОЙ РАЗРАБОТКЕ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ”.
Если у вас много сложного кода и вы не работаете над его очисткой, вам будет очень сложно его поддерживать.
Вот 8 советов, которые сделают JavaScript-код более читабельным и чистым.
📌 Смотреть
16 112
🖥 Replyke — встраиваемые комментарии для React
Инструмент работает все максимально просто: сами комментарии подключаются по системе plug&play, а настроить их можно прямо на веб-сайте проекта
Replyke предоставляет готовый к использованию компонент комментариев, который легко настраивается и интегрируется с существующими React-проектами
https://replyke.com/
#React #web
@react_tg
16 112
Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 1
Визуализация данных — важнейший компонент процесса принятия обоснованных решений и представления информации в удобном для пользователя виде. Она позволяет преобразовывать сложные данные в четкие и осмысленные визуальные картины, благодаря чему организации могут решать различные задачи и повышать эффективность своей работы.
Для визуализации данных существует множество платформ бизнес-аналитики (BI). В качестве примера можно привести Tableau, Power BI, QlikView и Looker. Однако они могут иметь ограничения и отличаться высокой стоимостью. Альтернативным подходом к использованию BI-инструментов является применение библиотек визуализации данных, таких как Nivo, при веб-разработке фронтенда.
В этом цикле из трех частей мы рассмотрим, как создавать дэшборды, отслеживающие производительность сайта, с помощью React, Tailwind CSS, Material UI и Nivo. Если вы разработчик, желающий усовершенствовать навыки визуализации данных, владелец бизнеса, стремящийся получить представление о данных, или просто человек, интересующийся миром React и визуализации данных, рекомендуем приступить к работе после прочтения серии этих статей.
Итак, начнем!
📌 Читать
16 112
Искусство манипулирования массивами 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” выглядит следующим образом:
📌Смотреть
