React JS
Open in Telegram
React программирование @haarrp - admin @itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml № 5037566384
Show more
Network:📈 Analytical overview of Telegram channel React JS
Channel React JS (@react_tg) in the Russian language segment is an active participant. Currently, the community unites 16 112 subscribers, ranking 7 993 in the Technologies & Applications category and 40 644 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 16 112 subscribers.
According to the latest data from 30 October, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -144 over the last 30 days and by -7 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 14.14%. Within the first 24 hours after publication, content typically collects 5.66% reactions from the total number of subscribers.
- Post reach: On average, each post receives 2 279 views. Within the first day, a publication typically gains 912 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 16.
- Thematic interests: Content is focused on key topics such as javascript, github, css, интерфейс, браузер.
📝 Description and content policy
The author describes the resource as a platform for expressing subjective opinions:
“React программирование
@haarrp - admin
@itchannels_telegram - 🔥лучшие ит-каналы
@javascriptv - продвинутый javascript
@programming_books_it - бесплатные it книги
@ai_machinelearning_big_data - ml
№ 5037566384”
Thanks to the high frequency of updates (latest data received on 31 October, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.
16 112
Subscribers
-724 hours
-477 days
-14430 days
Posts Archive
16 115
🌟 Screenshot to Code — крутой инструмент для конвертирования скринов, Figma-шаблонов и мокапов в чистый код
Поддерживаемые стэки: HTML + Tailwind, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind и SVG.
@react_tg
16 115
+5Из джуна в мидла вместе с Холдингом Т1🚀 Приглашаем java-разработчиков в Открытые школы Т1!
🎓 Открытые школы Т1 — это новая карьерная программа для IТ-специалистов, объединяющая обучение без отрыва от работы и offer weeks.
👨💻 Для участия необходим опыт работы java-разработчиком от 1 года, а также желание присоединиться к команде Т1.
Т1 занимает 2 место среди крупнейших ИКТ-компаний по версии RAEX 2023 и является партнёром ключевых производителей и разработчиков в сфере ИТ.
В программу входит: spring framework; docker; синхронное и асинхронное взаимодействие, брокеры сообщений; паттерны, SOLID
⏰ Длительность 1 месяц.
💻 Формат: онлайн по вечерам (от 8 часов в неделю на вебинары и практику).
Лучшим назначим интервью и направим оффер!
📌 Подробнее о программе — в карточках внутри поста.
Принимаем заявки до 22 апреля! 🚀
Реклама. ООО "Т1". ИНН 7720484492.
16 115
🖥 Слои типичного React-приложения
1. Сам React (архитектура, компоненты, хуки, эвенты, стилизация, статические данные, HTML/CSS/JS)
2. Типизация React-приложения (TypeScript)
3. Стейт-менеджер (Redux toolkit)
4. Взаимодействие с API и обработка данных (URL, axios, апи-сервисы, логин, CRUD, localStorage, cookies, динамические данные и т.д.)
5. Сборка и экосистема (create-react-app, react-script, NextJS, Webpack, Parcel, npm-пакеты, env, линтеры, форматтеры, тестеры и т.д.)
6. UI-фреймворк для React (Material UI, bootstrap и т.д.)
7. Backend для React-приложения (сервер, SSR, бекенд-код, DB и т.д.)
8. Деплой приложения на тестовый и продакшн-серверы
Архитектура React-приложения
—
components/ - переиспользуемые компоненты
— utils/ - переиспользуемые утилиты
— consts/ или constants/- переиспользуемые константы
— store/ - Redux, mobx
— routes/, pages/ или containers/- страницы приложения
— styles/ - статичные стили
— api/ - взаимодействие с API
— static/ или assets/ - статичные файлы (изображения, шрифты, иконки и пр.)
— types/ или interfaces/ - файлы переиспользуемой типизации
📎 Подробнее
@react_tg16 115
Вместе уютно собираемся по вечерам каждый у себя дома и учимся верстать сайты с нуля. В комплекте приятная музыка, тёмная тема и добрейшее сообщество неопытных верстальщиков, которые вообще-то огого и всем ещё покажут.
Всё это будет на бесплатном марафоне по HTML и СSS «ночной кружок по вёрстке», который пройдёт с 18 по 23 апреля.
За 6 дней вы:
— Изучите основы веб-технологий и попробуете себя в роли фронтенд-разработчика;
— Напишете в тренажёрах свои первые строчки кода и увидите как изменяется страница сайта в реальном времени;
— Поймёте нравится ли вам веб-разработка.
Кстати, а ещё мы разыграем курс по HTML и СSS среди участников марафона.
Вступить в кружок.
16 115
💡Простой способ получения скриншотов во время загрузки и фильтрации запросов в Chrome dev tools: на заметку фронтенд-разработчику
#css #tip by Shripal Soni
16 115
Что делать новичку во фронтенд-разработке, чтобы уже в этом году гарантировано зарабатывать от 1000$/мес. на фронтенд-разработке, не выходя из дома.
Для начала попробуй с нуля собрать сайт на Angular.
➡️ Вот тут пройдёт бесплатный-интенсив с подробными уроками, по которым ты сможешь:
- Сверстать веб-сайт на HTML + CSS;
- Оживить страницу на JavaScript;
- Создать проект фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг;
- Сделать сайту адаптив.
А чтобы точно получилось, тебе будут помогать опытные кураторы.
И в итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать.
Интенсив стартует 16 апреля.
👉 Успей проскочить бесплатно
Бонусом тебе помогут составить пошаговый план, как тебе развиваться в профессии, чтобы уже в этом году гарантировано зарабатывать от 1000$/мес. на фронтенд-разработке, не выходя из дома.
16 115
+3🖥 Понимаем полностью useMemo и useCallback
Если вы изо всех сил пытались разобраться в
useMemo и useCallback, вы не одиноки. Есть ненулевое количество разработчиков React, которые cломали голову над этими 2 хуками.
Так что держите полезную статью, которая призвана помочь разобраться в путанице.
Вот некоторые факты из статьи:
⏩React.memo и useMemo помогают оптимизировать производительность компонентов; в частности useMemo запоминает результат дорогостоящих вычислений и предотвращает ненужные повторные рендеры.
⏩Имеется проблема: чистые компоненты часто перерисовываются даже при отсутствии изменений; useMemo решает эту проблему, сохраняя ссылки на массивы и объекты.
⏩useCallback аналогичен useMemo для функций, позволяя запоминать функции колбэков.
⏩Рекомендуется использовать хуки useMemo и useCallback только при необходимости для оптимизации производительности.
📎 Статья
@react_tg16 115
🖥 Топ-3 причины, почему вы должны использовать Copilot в работе с React и не только
В отличие от традиционных инструментов завершения кода, которые полагаются на предопределённые шаблоны и ключевые слова, GitHub Copilot идёт на шаг дальше, понимая цель кода и генерируя контекстуально подходящие предложения. Он основан на обширном репозитории фрагментов кода, библиотек и шаблонов программирования, доступных на GitHub, что делает его ценным ресурсом для разработчиков в различных областях и языках программирования.
В статье автор делится такими 3 плюсами от использования Copilot:
⏩Улучшение качества кода. Copilot предлагает рекомендации и варианты кода на основе переданного контекста, что помогает предотвратить ошибки и соблюдать практики программирования.
⏩Увеличение продуктивности. С Copilot разработчики могут сосредоточиться на более творческих и стратегических задачах, вместо того чтобы тратить время на рутинную работу.
⏩Обучение и рост. Использование Copilot также может стать отличным инструментом для обучения новичков в области программирования. Путём изучения рекомендаций и генерируемого кода они могут улучшить свои навыки и расширить свой опыт.
В целом, плюсы очевидны, но статью можно глянуть в первую очередь ради конкретных кейсов использования Copilot
📎 Статья
@react_tg
16 115
+2🔥 Большая подборка вопросов по React и смежных технологиях для подготовки к собеседованию
Здесь аж 120+ вопросов и ответов, что покрывает наверное 99% того, о чём могут спросить
Пользуйтесь)
Вот некоторые из вопросов:
• Тестирование в React
• Разница Zustand и Redux?
• Что такое Redux-Saga?
• Командный интерфейс Gatsby CLI
• Что такое
Tailwind CSS?
• Преимущества и недостатки Next.js над React
• Основные принципы Redux
• Каков смысл функции getStaticProps в Next.js?
📎 Вопросы-ответы
@react_tg16 115
🌟 Анатомия HTMX
Держите полезную статью)
⏩По данным 2023 JavaScript Rising Stars библиотека
htmx заняла 2 место в разделе Front-end Frameworks (1 место вполне ожидаемо принадлежит React) и десятое место в разделе Most Popular Projects Overall.
⏩htmx — это библиотека, которая предоставляет доступ к AJAX, переходам CSS, WebSockets и Server Sent Events прямо из HTML через атрибуты, что позволяет создавать современные пользовательские интерфейсы (насколько сложные — другой вопрос), пользуясь простотой и мощью гипертекста. На сегодняшний день у библиотеки почти 30 000 звезд на Github. Удивительно, что до такого решения додумались только сейчас, учитывая, что весь функционал был доступен уже 10 лет назад (вы сами убедитесь в этом, когда изучите исходный код htmx).
И в этой статье разбирается, как htmx работает, рекомендую
📎 Статья
@react_tg16 115
+2🖥 100 вопросов по React для подготовки к собеседованию
Держите отличную подборку вопросов, здесь покрываются основные темы React:
Основы React.
— JSX (JavaScript XML)
— Компоненты и их жизненный цикл.
— Пропсы (
props) и состояние (state).
— События и обработчики событий.
Компоненты и их типы
— Функциональные компоненты.
— Классовые компоненты.
— Хук состояния (useState).
— Хук эффекта (useEffect).
— Хук контекста (useContext).
Роутинг
— React Router — библиотека для маршрутизации в React-приложениях.
— Создание маршрутов и навигация.
— Пропсы маршрутов и параметры URL.
Состояние приложения
— Redux — библиотека для управления состоянием приложения.
— Создание хранилища (store), действий (actions) и редукторов (reducers).
— Middleware и асинхронные действия.
Взаимодействие с API
— Fetch API для выполнения HTTP-запросов.
— Axios — библиотека для выполнения HTTP-запросов.
— Работа с асинхронными запросами и обработка ошибок.
...и остальные темы
📎 100 вопросов
@react_tg16 115
🖥 Вопросы с собеседования на фронтенд разработчика React.js
Держите отличную подборку 🔥
Здесь собраны самые популярные вопросы, задаваемые на собеседованиях front-end разработчиков на React.js.
Тематика вопросов включает в себя как основы JavaScript и веб-технологий так и глубокое понимание работы React.js и смежных технологий (Redux, MobX и прочего).
К каждому вопросу приведён подробный ответ в выпадающем меню
📎 Ссылка
@react_tg
16 115
⚡️ React Morph Clock
Оригинальные часы, созданные из svg-картинки на React.
#js #react
https://codepen.io/Siddharth11/pen/MjjdyW
@react_tg
16 115
+2🖥 Как создать локальную среду React с помощью Vite
Держите годный контент!
В этой статье вы узнаете, как создать локальную среду с помощью Vite, инструмента сборки и сервера разработки, разработанного для быстрой и эффективной работы.
⏩В процессе рассматриваются:
— Пошаговые инструкции по созданию проекта Vite
— Удаление шаблона по умолчанию
— Создание простых компонентов React
— Добавление основных стилей CSS.
— Развертывание проекта с помощью Netlify (необязательно)
— К концу этого руководства у вас будет четкое представление о создании локальной среды React с помощью Vite
Уверен, будет полезно, а вот ссылка:
📎 Статья
@react_tg
16 115
Мы помогаем за 3-6 месяцев накопить реальный 💪 опыт работы, а не преукрашивать его для резюме!
🔥 Основная фишка — тренируешься работать в команде с процессами и требованиями боевого проекта.
ЧТО ВНУТРИ?
🔸 5 больших проектов — Погода, личный дневник, квизы, HR-платформа, таск-трекер.
🔸 Спринты и дедлайны — Научишься рассчитывать время и укладываться в сроки.
🔸 Работа с легаси — Исправишь ошибки, оптимизируешь код и сделаешь рефакторинг.
🔸 Пачка код-ревью — Увидишь много вариантов решений и поймешь как сделать свой код лучше.
🔸 Поддержка сообщества — Сможешь задать вопрос и за 5 минут получить ответ.
🔸 Новый стек технологий — Используешь самые популярные технологии, которые применяются в современных проектах.
🔸 Гибкий график — Сможешь легко совмещая тренировку с работой или учебой.
🔸 Полезные стримы — Публичные собеседования, разборы резюме, код-ревью, выступления от участников и обменом опытом.
Попробуй первый спринт бесплатно! 🆓
Реклама, ООО «Преакс Плэтформ», ОГРН 1237700372755
16 115
🖥 Как создать QR-код по строке и направить его пользователю на скачивание?
Вот так звучит реальный кейс, давайте подробнее.
⏩При нажатии на кнопку (
onClick событие) должен создаваться QR-код (превью для пользователя не нужно) по строке (рандомно генерирующийся набор символов) и отправляться на скачивание пользователю в виде png-картинки.
Как же это можно реализовать?
⏩Например, можно сделать так:
import QRCode from "https://esm.sh/qrcode";
function download(dataurl, filename) {
const link = document.createElement("a");
link.href = dataurl;
link.download = filename;
link.click();
document.removeElement(link);
}
QRCode.toDataURL("I am a pony!", function (err, qrCodeImageDataUrl) {
console.log(qrCodeImageDataUrl);
download(qrCodeImageDataUrl, "qrcode.png");
});16 115
+3🖥 Создание сложного веб-приложения с помощью React JS и Tailwind
Держите годный контент)
⏩В этом видео описано создание веб-приложения Brainwave с использованием React и Tailwind CSS. Приложение включает в себя различные элементы, реагирующие на курсор, навигационную панель, градиентные границы, схемы и другие элементы.
⏩Что происходит в видео?
00:04:24 — Настройка
00:22:07 — Header
00:44:28 — Компонент раздела оглавления
01:26:00 — Раздел о преимуществах
01:41:30 — Раздел о сотрудничестве
02:30:35 — Раздел о ценах
02:51:30 — Раздел roadmap
03:05:20 — Footer
03:10:10 — Деплой
📎 Кликабельный план видео
📎 Видео
Enjoy)
@react_tg
16 115
Стать фронтендером в Яндексе за выходные
18–19 мая устраиваем Weekend Offer Frontend: всего за 2 дня можно пройти технические секции и попасть в Яндекс. Для этого нужно зарегистрироваться и решить одну задачу в Контесте.
Вы сможете выбрать одну из 13 команд: Поиск, E-com Поиска, Реклама, Бизнес, Cloud, 360, Игры, Умный дом, Путешествия, Аренда, Недвижимость, Авто.ру и Авто.ру Бизнес. Можно пообщаться с нанимающими менеджерами и выбрать самый интересный проект. Если всё пройдёт хорошо, сразу же получите офер.
Поможем релоцироваться в пределах РФ, нанимаем в офисы по всей стране.
Узнать подробности и зарегистрироваться можно здесь.
16 115
+3🖥 Хук дня — 'use client'
⏩
'use client' позволяет отметить, какой код выполняется на клиенте.
Добавьте 'use client' в верхней части файла, чтобы отметить модуль и его транзитивные зависимости как клиентский код.
⏩Когда файл, помеченный директивой 'use client', импортируется из серверного компонента, совместимые бандлеры будут рассматривать импорт модуля как границу между кодом, выполняемым на сервере, и кодом, выполняемым на клиенте.
⏩Будучи зависимостями RichTextEditor, formatDate и Button также будут оцениваться на клиенте, независимо от того, содержат ли их модули директиву 'use client'. Обратите внимание, что один модуль может оцениваться на сервере при импорте из серверного кода и на клиенте при импорте из клиентского кода.
Некоторые нюансы
⏩'use client' должно находиться в самом начале файла, выше любого импорта или другого кода (комментарии допускаются). Они должны быть написаны с одинарными или двойными кавычками, но не с обратными знаками.
⏩Если модуль 'use client' импортируется из другого клиентского модуля, директива не имеет силы.
⏩Если модуль компонента содержит директиву 'use client', то любое использование этого компонента гарантированно является клиентским компонентом. Однако компонент может быть оценен на клиенте, даже если он не содержит директивы 'use client'.
Дополнение: компонент считается клиентским, если он определен в модуле с директивой 'use client' или является транзитивной зависимостью модуля, содержащего директиву 'use client'. В противном случае он является серверным компонентом.
⏩Код, помеченный для использования клиентом, не ограничивается компонентами. Весь код, входящий в поддерево модулей Client, отправляется клиенту и выполняется им.
⏩Когда модуль, работающий с сервером, импортирует значения из модуля 'use client', эти значения должны быть либо компонентами React, либо поддерживаемыми сериализуемыми значениями prop для передачи в клиентский компонент. При любом другом варианте использования будет возникать исключение.
📎 Читать подробнее
@react_tg