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 112
⚛ Создание UI-компонентов React на продвинутом уровне
React — хорошая библиотека. Так давайте сделаем ее еще лучше, создавая многоразовые компоненты на высокопрофессиональном уровне.
Для использования этого руководства достаточно базовых знаний о React, TypeScript и Tailwind CSS.
В качестве примера поработаем с button, но принципы, которым будем следовать здесь, применимы к любому HTML-тегу.
const Button = ({children, className}) => {
return (
<button className={className}>{children}</button>
)
}
Приведенный выше код работает, но что, если понадобится ввести ARIA (accessible rich internet application attribute — доступные полнофункциональные интернет-приложения), ссылки или любые другие свойства обычного тега button?
Можно просто добавить больше свойств и на этом закончить.
const Button = ({children, className, ref, type}) => {
return (
<button className={className} ref={ref} type={type}>{children}</button>
)
}
Это одно из решений, но оно не эффективно. Чтобы сделать его более действенным, поработаем с TypeScript и React. Быстро создать проект с использованием React и TypeScript поможет документация Vite.
Первым шагом будет импорт необходимых типов из React и создание интерфейса для свойств кнопки (button).
📌 Продолжение
@react_tg16 112
🖥 5 лучших библиотек всплывающих окон для React
Примеры профессионального использования всплывающих окон включают раскрывающиеся меню навигации, средства выбора дат и экскурсии во время процесса регистрации.
В экосистеме React эту потребность удовлетворяют многие библиотеки, предлагая различные уровни настройки, стратегии позиционирования и оперативности.
1 Popper.js
2 act-tiny-popover
3 react-laag
4 reactjs-popup
5 react Joyride
#js #react #ru
▪ Подробнее
@react_tg
16 112
Прокачайте скилы c Холдингом Т1! 💙 🚀
➕ Если вы уже более года работаете разработчиком JS+React и хотите освоить новые перспективы для развития внутри профессии, то Открытые школы Холдинга Т1 для вас!
Мы поможем вам улучшить свои навыки и пригласим лучших в нашу команду!
В программе интенсива:
🔹 Паттерны и принципы программирования
🔹 Тестирования ПО, написание юнит тестов
🔹 Микросервисная архитектура + микрофронты
Как это работает:
🔹 подать заявку на сайте
🔹 пройти входное тестирование
🔹 достаточно 8 часов в неделю: 4 часа на вебинары и 4 часа на практические задания
🔹 всё онлайн и без отрыва от работы
Продолжительность - 1 месяц, стартуем уже в январе 🎓
🌟 Подавайте заявку до 24 января!
Реклама. ООО "ГК "ИННОТЕХ". ИНН 9703073496.
16 112
Стильный слайдер для сайта
#html #css #js #slider
https://codepen.io/theseventh/pen/LYVqMYb
@javascriptv
16 112
Дайте старт вашей карьере с нашим бесплатным курсом по JavaScript!
🎓 Курс включает 39 уроков, 46 упражнений и 129 тестов для закрепления знаний. Вы освоите создание программ с использованием основных конструкций языка, сможете составлять программы из нескольких модулей и научитесь анализировать ошибки в коде с помощью отладочной печати.
💡 Научитесь не только теории, но и применять знания на практике. Поддержка в «Обсуждениях» поможет вам разобраться с темами, которые вызывают трудности.
Обучение с самого нуля, с акцентом на практику. Подходит для начинающих программистов! Добро пожаловать в мир JavaScript😉
Реклама. АНПОО "ХЕКСЛЕТ КОЛЛЕДЖ". ИНН 7839056670.
16 112
🖥 ShareDrop - это бесплатное веб-приложение с открытым исходным кодом, которое позволяет легко и безопасно обмениваться файлами непосредственно между устройствами, не загружая их сначала на какой-либо сервер
https://github.com/szimek/sharedrop #opensource
@react_tg
16 112
Начать учиться никогда не поздно, ведь сфера IT развивается с каждым днем, а специалистов готовых делать качественную работу единицы.
Попробовать свои силы можно на нашем бесплатном интенсиве по фронтенд-разработке:
✔️ На интенсиве мы с нуля по макету напишем лендинг для Автомастерской.
✔️ Реализуем адаптив под все устройства от десктопа до смартфона
✔️ Напишем форму для записи на осмотр или ремонт, выбор даты и времени.
Начните старт в IT с одного простого шага по ссылке - https://tglink.io/4fdaf5f077b9?erid=LjN8KTV2v
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024.
16 112
🖥 Чтобы уверенно работать на React, нужно создавать реальные проекты. Но какие проекты стоит создавать в 2024 году?
Представляем список из семи проектов, которые, подходят для того, чтобы стать получить хорошую практику на React, - от простых до сложных приложений.
Так же описан весь технологический стек, который можно использовать для создания каждого проекта, а также о том, как пошагово сделать каждый из них.
▪Читать
@react_tg
16 112
🦖 2024 Источники бесплатного обучения 👇
•HTML: 🌐 http://w3schools.com
•CSS: 🎨 http://web.dev/learn/css
•JavaScript: 🚀 http://javascript.info
•Git & GitHub: 📚 http://git-scm.com
•SQL: 🔍 http://SQLzap.com
@react_tg
16 112
💻 7 приложений и сайтов, которые облегчат работу UX/UI дизайнера
Никто не будет спорить, что Figma круто изменила работу для UX/UI дизайнера, делая все проще и объединяя все необходимое в одном месте. Однако даже со всеми потрясающими возможностями и плагинами в Figma существуют и другие приложения и сайты, которыми дизайнеры пользуются каждый день и которые Figma заменить не может. Каждое из них выполняет особую задачу, которая выходит за пределы возможностей Figma. Поэтому хочется поделиться 7 приложениями и сайтами, которые можно использовать вместе с Figma. Этот список покажет, что иногда для достижения лучших результатов нужно использовать несколько инструментов.
1. Mobbin
2. Lyssna
3. Maze
4. Typeform
5. Fonts in Use
6. Designstripe
7. PaletteMaker
▪Читать
@react_tg
16 112
Успей ухватить 7 дней бесплатного обучения фронтенд-разработке!
18-24 января Роман Чернов, веб-разработчик с 10-летним стажем, проведёт онлайн-интенсив с практикой и обратной связью.
На эти 7 дней план такой:
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг;
- Получишь советы по доработке своего проекта.
В итоге ты разработаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов.
👉 Забрать бесплатно 7 дней обучения frontend-разработке
А тем, кто ещё только думает переходить в IT, дадим пошаговый план как стать успешным frontend-разработчиком с нуля.
16 112
🍔 Beat Burger
Приложение на React, анимированное библиотекой gsap. При нажатии на элементы проигрываются звуки.
#react #js
https://codepen.io/ste-vg/pen/MWpxKYR
@react_tg
16 112
Научитесь пользоваться библиотекой React, использовать type-скрипт и напишите полноценное React-приложение. Если вы не уверены, что справитесь с курсом — пройдите бесплатный вступительный тест.
→ Начните учиться бесплатно
16 112
🖥 Принципы SOLID в React: так ли все с ними гладко?
Поговорим о принципах SOLID с точки зрения приложений React. Я прекрасно понимаю, что статей на эту тему уже достаточно много, и знаю это потому, что прочитал большинство из них.
Должен сказать, что не согласен с тем, как подается информация в таких материалах (иначе я бы, конечно, не стал публиковать эту статью).
Проблема, на мой взгляд, заключается в том, что авторы рассказывают только о том, как прекрасны принципы SOLID, не упоминая об их возможных изъянах и подводных камнях.
Никто не задается вопросом: а применимы ли вообще принципы SOLID в React-приложениях? Именно это мы и обсудим, так что читайте дальше.
📌 Читать дальше
@react_tg
16 112
Как реализовать простой контроль версий с помощью JavaScript, чтобы лучше разобраться в Git
Что такое Git и управление версиями в целом?
Это система, которая помогает отслеживать проект во времени. Так, с помощью Git мы можем легко погрузиться в историю исходного кода и посмотреть, как он выглядел в определенное время в прошлом.
Зачем разбираться в Git?
Во-первых, чтобы не использовать команды бездумно, когда что-то пойдет не так. Во-вторых, важно понимать, как работает система, с которой мы взаимодействуем каждый день.
Мы разберем основные понятия Git на примере реализации упрощенной системы управления версиями под названием Gitj.
Реализация
Выполнение первой команды Init
Как вы, наверное, знаете, мы запускаем проект командой git init, после чего Git создает папку .git и сохраняет в ней данные. Нам предстоит это реализовать.
Две важные папки, которые создает git, — это refs и objects. Objects (объекты) — это строительные блоки Git. Они могут быть 3 типов (на самом деле их 4): commit, tree и blob. Сейчас мы подробно рассмотрим каждый из этих типов. В папке refs есть подпапка heads, содержащая ветви и последний коммит каждой ветви (из названия должно быть понятно, что в ней хранится голова ветви). У нас также есть важный файл HEAD, который хранит текущую ветвь или коммит (иногда необходимо выполнить проверку в коммите, а не в ветви).
Создадим эти папки при вызове функции init.
const fs = require("fs");
function init() {
// создается папка .gitj и подпапки .gitj/objects,.gitj/refs и .gitj/refs/heads
fs.mkdirSync(".gitj");
fs.mkdirSync(".gitj/objects");
fs.mkdirSync(".gitj/refs");
fs.mkdirSync(".gitj/refs/heads");
// создается файл с именем .gitj/refs/heads/master
fs.writeFileSync(".gitj/refs/heads/master", "");
// создается файл с именем .gitj/HEAD
fs.writeFileSync(".gitj/HEAD", "ref: refs/heads/master");
}
init();
Git Add. Добавление файлов в индекс
📌 Продолжение
@react_tg16 112
🖥 CSS Reaction — анимация в стиле логотипа React, реализованная на чистом CSS
https://codepen.io/pavlovsk/pen/OXGdoN
@react_tg
16 112
🖥 Тестирование приложений React - ключевая часть процесса разработки.
И в этом подробном руководстве объясняет, как это сделать с помощью Cypress.
Вы узнаете, что такое сквозное тестирование, как организовать и запустить тесты, как отладить код и многое другое.
https://www.freecodecamp.org/news/cypress-for-end-to-end-testing-react-apps/
@react_tg
16 112
🔥 Дайджест полезных материалов из мира React за неделю
Почитать:
— Сложность алгоритмов. Разбор Big O
— Я счастлив, что больше не веб-разработчик
— Mobile Web, навигация и при чем тут Nginx
— Микрофронтенд для самых маленьких
— Кастомизация бессерверных функций без применения промежуточного ПО
— KISS your website или как написать уважаемый сайт на аутсорсе, глава первая
— Что выбрать: Npm, Yarn или Pnpm?
— Pixel Combats Api
— Анатомия shadcn/ui
— Валидация формы с помощью AJV, Vue.js и TypeScript
— How Validate Form Input Data In React Or Any JavaScript Web Application ?
— Fixing Fetch Waterfalls in React
— Svelte journey | Part 2
— How many of you use cloud emulators for testing?
— Svelte : Toji Fushiguro of Javascript Frameworks.
— Efficient React Development: A Deep Dive into Components, Hooks, and Performance Optimization
— Unveiling the Power of React Hooks: A Comprehensive Guide
— Tips for styling React apps in JavaScript
— This Week In React #167: Hydration, Remix, Server Components, cache, perf, Glow, Unistyles, Expo, :has(), Tailwind, date-fns...
— Mastering Redux Toolkit in Your React Projects
Посмотреть:
🌐 Type Predicates Solve This Common TypeScript Error (⏱ 05:01)
🌐 You Should Be Using Types Instead Of Interfaces In TypeScript (⏱ 00:52)
Хорошего дня!
@react_tg
