React JS
Kanalga Telegram’da o‘tish
React программирование @haarrp - admin @itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml № 5037566384
Ko'proq ko'rsatish
Tarmoq:📈 Telegram kanali React JS analitikasi
React JS (@react_tg) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 16 112 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 7 993-o'rinni va Rossiya mintaqasida 40 644-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 16 112 obunachiga ega bo‘ldi.
30 Oktabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -144 ga, so‘nggi 24 soatda esa -7 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 14.14% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 5.66% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 2 279 marta ko‘riladi; birinchi sutkada odatda 912 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 16 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent javascript, github, css, интерфейс, браузер kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“React программирование
@haarrp - admin
@itchannels_telegram - 🔥лучшие ит-каналы
@javascriptv - продвинутый javascript
@programming_books_it - бесплатные it книги
@ai_machinelearning_big_data - ml
№ 5037566384”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 31 Oktabr, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
16 112
Obunachilar
-724 soatlar
-477 kun
-14430 kun
Postlar arxiv
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” выглядит следующим образом:
📌Смотреть
