React JS

⚡️ 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” выглядит следующим образом: 📌Смотреть

⚛ Создание 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_tg

🖥 5 лучших библиотек всплывающих окон для React Примеры профессионального использования всплывающих окон включают раскрывающиеся меню навигации, средства выбора дат и экскурсии во время процесса регистрации. В экосистеме React эту потребность удовлетворяют многие библиотеки, предлагая различные уровни настройки, стратегии позиционирования и оперативности. 1 Popper.js 2 act-tiny-popover 3 react-laag 4 reactjs-popup 5 react Joyride #js #react #ru ▪ Подробнее @react_tg

Прокачайте скилы c Холдингом Т1! 💙 🚀 ➕ Если вы уже более года работаете разработчиком JS+React и хотите освоить новые перспективы для развития внутри профессии, то Открытые школы Холдинга Т1 для вас! Мы поможем вам улучшить свои навыки и пригласим лучших в нашу команду! В программе интенсива:  🔹 Паттерны и принципы программирования 🔹 Тестирования ПО, написание юнит тестов 🔹 Микросервисная архитектура + микрофронты Как это работает: 🔹 подать заявку на сайте  🔹 пройти входное тестирование 🔹 достаточно 8 часов в неделю: 4 часа на вебинары и 4 часа на практические задания 🔹 всё онлайн и без отрыва от работы Продолжительность - 1 месяц, стартуем уже в январе 🎓 🌟 Подавайте заявку до 24 января! Реклама. ООО "ГК "ИННОТЕХ". ИНН 9703073496.

Стильный слайдер для сайта #html #css #js #slider https://codepen.io/theseventh/pen/LYVqMYb @javascriptv

Дайте старт вашей карьере с нашим бесплатным курсом по JavaScript! 🎓 Курс включает 39 уроков, 46 упражнений и 129 тестов для закрепления знаний. Вы освоите создание программ с использованием основных конструкций языка, сможете составлять программы из нескольких модулей и научитесь анализировать ошибки в коде с помощью отладочной печати. 💡 Научитесь не только теории, но и применять знания на практике. Поддержка в «Обсуждениях» поможет вам разобраться с темами, которые вызывают трудности. Обучение с самого нуля, с акцентом на практику. Подходит для начинающих программистов! Добро пожаловать в мир JavaScript😉 Реклама. АНПОО "ХЕКСЛЕТ КОЛЛЕДЖ". ИНН 7839056670.

🖥 ShareDrop - это бесплатное веб-приложение с открытым исходным кодом, которое позволяет легко и безопасно обмениваться файлами непосредственно между устройствами, не загружая их сначала на какой-либо сервер https://github.com/szimek/sharedrop #opensource @react_tg

Начать учиться никогда не поздно, ведь сфера IT развивается с каждым днем, а специалистов готовых делать качественную работу единицы. Попробовать свои силы можно на нашем бесплатном интенсиве по фронтенд-разработке: ✔️ На интенсиве мы с нуля по макету напишем лендинг для Автомастерской. ✔️ Реализуем адаптив под все устройства от десктопа до смартфона ✔️ Напишем форму для записи на осмотр или ремонт, выбор даты и времени. Начните старт в IT с одного простого шага по ссылке - https://tglink.io/4fdaf5f077b9?erid=LjN8KTV2v  Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024.

🖥 Чтобы уверенно работать на React, нужно создавать реальные проекты. Но какие проекты стоит создавать в 2024 году? Представляем список из семи проектов, которые, подходят для того, чтобы стать получить хорошую практику на React, - от простых до сложных приложений. Так же описан весь технологический стек, который можно использовать для создания каждого проекта, а также о том, как пошагово сделать каждый из них. ▪Читать @react_tg