React JS

Яндекс Go Frontend Meetup #4 Ждем фронтенд-разработчиков на митапе от команды SUPERWEB. Это специалисты, которые помогают выстраивать процессы и прорабатывать новые продукты, погружаются в дизайн, аналитику и даже немного в бэкенд. На митап поделимся докладами на околофронтендные темы: — Анастасия Барташук, младший разработчик интерфейсов в Яндекс Про, поделится докладом о добавлении темизации в проект — Егор Брагин, руководитель группы разработки платформы Яндекс Go для бизнеса, расскажет о том, как команда выстроила телефонию на базе WebRTC — Сергей Алейников, старший разработчик интерфейсов в Яндекс Go, объяснит, как оптимизировать веб-приложения на примере Турбоаппа Такси Митап пройдет 23 мая в Санкт-Петербурге. Можно прийти офлайн или подключиться к онлайн-трансляции. Обязательно регистрируйтесь. До встречи на митапе!

🖥 SVGR: SVG — в React-компонент SVGR — это универсальный инструмент для преобразования SVG в компоненты React. На входе — необработанный SVG, на выходе — готовый к использованию React-компонент. 🖥 GitHub @react_tg

🔥Подборка лучших обучающих каналов для программистов. ➡️ Делитесь с коллегами и сохраняйте себе, чтобы не потерять ⚡Машинное обучение Machine Learning - запускаем лучшие ИИ модели, пишем код, погружаемся в нейросети Ml Собеседование - подготовка к собесу по мл, алгоритмам, коду Ml ru - актуальные статьи, новости, код и обучающие материалы Ml Jobs - вакансии ML ML Книги - актуальные бесплатные книги МО ML чат 🏆 Golang Golang Golang собеседование - разбор задач и вопросов с собесов Golang вакансии -работа для Go разработчика Golang книги библиотека книг Golang задачи и тесты Golang чат Golang news - новости из мира go Golang дайджест 💥 Linux /Этичный хакинг Linux Academy - гайды, секреты и лучшие материалы по Linux Kali linux - погрузись в мир этичного хакинга и кибербезопасности linux_kal - kali чат Информационная безопасность 🚀 Data Science Анализ данных - полезные фишки, код, гайды и советы, маст-хэв датасаентиста Data Jobs - ds вакансии Аналитик данных Data Science книги - актуальные бесплатные книги Big data 🛢Базы данных Sql базы данных - научим работе с базами данных профессионально Библиотека баз данных SQL чат Вакансии Sql аналитик данных #️⃣C# С# академия - лучший канал по c# С# заметки — код, лучшие практики, заметки программиста c# С# задачи и тесты С# библиотека - актуальные бесплатные книги C# вакансии - работа 🐍 Python Python/django - самый крупный обучающий канал по Python Python Собеседование - подготовка к собеседовению python и разбор алгоритмов Pro python - статьи, новости, код и обучающие материалы Python Jobs - вакансии Python Python чат Python книги ☕ Java Java академия - java от Senior разработчика Java вакансии Java чат Java вопросы с собеседований Java книги 💻 C++ C++ академия С++ книги C++ задачи - подготовка к собеседовению мл, алгоритмам C++ вакансии ⚡️ Frontend Javascript академия - крупнейший js канал React - лучшие гайды и советы по работе с react Frontend - тутрориалы, уроки, гайды, код PHP Книги frontend Задачи frontend 🦀 Rust Rust программирование Rust чат Rust книги для программистов 📲 Мобильная разработка Android разработка Мобильный разработчик гайды и уроки 🇬🇧 Английский для программистов 🧠 Искусственный интеллект ИИ и технологии Neural - нейросети для работы и жизни Книги ИИ Artificial Intelligence 🔥 DevOPs Devops для программистов Книги Devops 🌟 Docker/Kubernets Docker Kubernets 📓 Книги Библиотеки Книг для программситов 💼 Папка с вакансиями: Папка Go разработчика: Папка Python разработчика: Папка Data Science Папка Java разработчика Папка C# Папка Frontend 💥 Бесплатный Chatgpt бот

🖥 Интересные задачи и идеи для практики React 📎 Здесь собраны разные практические задачи, решение которых поможет глубже разобраться в React. А вот некоторые из заданий: — Крестики нолики Поле 3×3, игра должна содержать возможность перейти на любой из предыдущих шагов. 🟡 Codepen — Генератор цитат Пользователь должен иметь возможность запросить новую цитату, а так же создать пост для социальных сетей. 🟡 Решение может выглядеть так @react_tg

⭐️ Крутая анимация кнопки с соц сетями для https://codepen.io/carsonf92/pen/PoxxmeO?__cf_chl_tk= @react_tg

🖥 Создаем компонент прокручиваемого контейнера на React Задача — требуется реализовать компонент-контейнер: — в который можно просто передать список карточек — который ограничен по ширине — который скроллится по горизонтали — который имеет базовые контролы — стрелочки влево и вправо ▶️ Поехали к реализации 🟡 Открыть в Sandbox @react_tg

🖥 Вышел React 19 beta 🟡Команда React.js вовсю готовится к предстоящей конференции и видимо именно на ней они представят React 19. На сайте уже была опубликована страница релиза. 🟡В релизе всё то, о чём рассказывала команда Next.js — action для формы, новые хуки, серверные компоненты и серверные действия, метаданные страницы и предзагрузка ресурсов из коробки. Из нового — для передачи ref больше не нужно использовать forwardRef, обновлённое API контекстов и продвинутая поддержка таблиц стилей. 🟡Вместе с релизом был опубликован и гайд на обновление до 19 версии для библиотек. В гайде можно отметить значительные удаления функционала помеченного в последние годы как устаревший. @react_tg

🔥 Beautiful icon library, made for creativity. - Более 27 000 красивых иконок для разработчиков - Более 3800 бесплатных иконок для коммерческого использования - Доступны npm, SVG, React и React Native → http://hugeicons.com @react_tg

🖥 Авторизация в React — базовые сведения 🟡В этой статье — об архитектуре приложения, реализующего функцию аутентификации и авторизации. Статья призвана помочь понять концепцию; после этого приложение из примера можно дополнить новым функционалом и включить в любой свой проект. 🟡Для того, чтобы сделать функционал авторизации нужно иметь back-end приложение с API, при вызове которого мы будем получать информацию о том, что пользователь прошёл авторизацию. И front-end приложение, которое будет запрашивать API. Здесь сфокусируемся на архитектуре front-end приложения 🔜 Поехали @react_tg

🖥 Аналог Taplink и Linktree на React JS и Chakra UI Простое веб-приложение, чтобы собрать все ссылки на свои соцсети в одном месте. Отличная идея для пет-проекта, можно взять это за основу и улучшить) 📎 YouTube 🖥 GitHub @react_tg

🖥 Виртуальная прокрутка в React: реализация с нуля ⏩Сколько раз вы сталкивались с ситуацией, когда в веб-приложении необходимо вывести список элементов? Проблема возникает, когда нужно вывести очень большой набор данных, да еще и без пагинации. Это приведет к загрязнению DOM и займет много памяти браузера, что приведет к проблемам с производительностью. ⏩Виртуальная прокрутка — это одна из техник, которая может спасти вас в этой ситуации, поскольку отображаются только те элементы, которые пользователь действительно хочет увидеть, а остальные элементы будут загружаться виртуально по мере прокрутки к ним, вместо того чтобы отображать все сразу. Держите полезную статью, где пошагово реализуется виртуальная прокрутка в React 📎 Читать 📎 А вот демонстрация этой прокрутки @react_tg

🚀 MightyMeld — уже готовых к работе веб-компонентов. Это обширная коллекция компонентов, которые совместимы с Tailwind CSS и React. Просто выберите необходимый элемент из большой библиотеки шаблонов, перетащите его на рабочее пространство и настройте под свои потребности. В проекте также имеется встроенный искусственный интеллект. Основной функционал инструмента предоставляется бесплатно, однако также имеются платные возможности: 🖇 Github @react_tg

🖥 Порядок создания сайта на React Держите очень практическое руководство, самое то для тех, кто всё хочет создать свой пет-проект, но не знает, с чего начать Enjoy) 📎 Туториал @react_tg

🌟 Screenshot to Code — крутой инструмент для конвертирования скринов, Figma-шаблонов и мокапов в чистый код Поддерживаемые стэки: HTML + Tailwind, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind и SVG. @react_tg

Из джуна в мидла вместе с Холдингом Т1🚀 Приглашаем java-разработчиков в Открытые школы Т1! 🎓 Открытые школы Т1 — это новая карьерная программа для IТ-специалистов, объединяющая обучение без отрыва от работы и offer weeks. 👨‍💻 Для участия необходим опыт работы java-разработчиком от 1 года, а также желание присоединиться к команде Т1. Т1 занимает 2 место среди крупнейших ИКТ-компаний по версии RAEX 2023 и является партнёром ключевых производителей и разработчиков в сфере ИТ. В программу входит: spring framework; docker; синхронное и асинхронное взаимодействие, брокеры сообщений; паттерны, SOLID ⏰ Длительность 1 месяц. 💻 Формат: онлайн по вечерам (от 8 часов в неделю на вебинары и практику). Лучшим назначим интервью и направим оффер! 📌 Подробнее о программе — в карточках внутри поста. Принимаем заявки до 22 апреля! 🚀 Реклама. ООО "Т1". ИНН 7720484492.

🖥 Слои типичного 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_tg

Вместе уютно собираемся по вечерам каждый у себя дома и учимся верстать сайты с нуля. В комплекте приятная музыка, тёмная тема и добрейшее сообщество неопытных верстальщиков, которые вообще-то огого и всем ещё покажут. Всё это будет на бесплатном марафоне по HTML и СSS «ночной кружок по вёрстке», который пройдёт с 18 по 23 апреля. За 6 дней вы: — Изучите основы веб-технологий и попробуете себя в роли фронтенд-разработчика; — Напишете в тренажёрах свои первые строчки кода и увидите как изменяется страница сайта в реальном времени; — Поймёте нравится ли вам веб-разработка. Кстати, а ещё мы разыграем курс по HTML и СSS среди участников марафона. Вступить в кружок.

💡Простой способ получения скриншотов во время загрузки и фильтрации запросов в Chrome dev tools: на заметку фронтенд-разработчику #css #tip by Shripal Soni

Что делать новичку во фронтенд-разработке, чтобы уже в этом году гарантировано зарабатывать от 1000$/мес. на фронтенд-разработке, не выходя из дома. Для начала попробуй с нуля собрать сайт на Angular. ➡️ Вот тут пройдёт бесплатный-интенсив с подробными уроками, по которым ты сможешь: - Сверстать веб-сайт на HTML + CSS; - Оживить страницу на JavaScript; - Создать проект фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг; - Сделать сайту адаптив. А чтобы точно получилось, тебе будут помогать опытные кураторы. И в итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать. Интенсив стартует 16 апреля. 👉 Успей проскочить бесплатно Бонусом тебе помогут составить пошаговый план, как тебе развиваться в профессии, чтобы уже в этом году гарантировано зарабатывать от 1000$/мес. на фронтенд-разработке, не выходя из дома.

🖥 Понимаем полностью useMemo и useCallback Если вы изо всех сил пытались разобраться в useMemo и useCallback, вы не одиноки. Есть ненулевое количество разработчиков React, которые cломали голову над этими 2 хуками. Так что держите полезную статью, которая призвана помочь разобраться в путанице. Вот некоторые факты из статьи: ⏩React.memo и useMemo помогают оптимизировать производительность компонентов; в частности useMemo запоминает результат дорогостоящих вычислений и предотвращает ненужные повторные рендеры. ⏩Имеется проблема: чистые компоненты часто перерисовываются даже при отсутствии изменений; useMemo решает эту проблему, сохраняя ссылки на массивы и объекты. ⏩useCallback аналогичен useMemo для функций, позволяя запоминать функции колбэков. ⏩Рекомендуется использовать хуки useMemo и useCallback только при необходимости для оптимизации производительности. 📎 Статья @react_tg