React JS

Frontend meetup 1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов. 2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках. 3. Serverless - уже можно? — Андрей Лаврентьев, NDA Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге. Модератор Григорий Петров, Devrel, Evrone Эксперт Глеб Михеев, Руководитель ПК, FrontendConf ➖➖➖ 🗓 22 мая, начало в 19:00 мск, Среда 🌐 ОНЛАЙН ✅ Регистрация на мероприятие Реклама, ООО "Эвроне.ру", ИНН 3663057399

🖥 Надежная библиотека хуков React от Alibaba — npm install --save ahooks • Простая в освоении и использовании • Поддерживает SSR • Специальная обработка функций позволяет избежать проблем с закрытием • Содержит большое количество продвинутых хуков, которые были разработаны на основе бизнес-сценариев • Содержит обширную коллекцию базовых хуков • Написана на TypeScript с предсказуемыми статическими типами 🖥 GitHub @react_tg

🖥 Recharts — пересмотренная библиотека для графиков на основе React и D3 — npm install recharts Recharts - это библиотека графиков Redefined, созданная на основе React и D3. Основная цель Recharts — помочь легко создавать графики, диаграммы в React-приложениях. Вот некоторые особенности Recharts: — Простое развертывание с помощью компонентов React — Нативная поддержка SVG, легкий вес, зависящий только от некоторых субмодулей D3 — Декларативные компоненты 🖥 GitHub 🟡 Доки @react_tg

❓Как строится современная веб-разработка на JS и при чем тут React? Узнайте на открытом практическом уроке от OTUS, где опытный эксперт разберет: - какие подходы используются в разработке сегодня; - основные технологии для разработки фронтенда: react, vue, angular; - их преимущества и недостатки. Спикер Игорь Звягин — опытный JS-разработчик. Встречаемся 13 мая в 20:00 мск в рамках курса «React.js Developer». Все участники вебинара получат специальную цену на обучение и персональную консультацию от менеджеров OTUS! 👉 Оставьте заявку прямо сейчас, чтобы посетить бесплатный урок: https://otus.pw/55A8r/?erid=LjN8KQVcG Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

🖥 react-pdf — создание pdf-файлов в React — yarn add @react-pdf/renderer react-pdf — пакет React, позволяет создавать pdf-файлы в браузере или на стороне сервера 🖥 GitHub 🟡 Доки @react_tg

🖥 Tina — удобная open-source CMS — npx create-tina-app@latest Tina — это headless CMS с открытым исходным кодом и поддержкой Git, позволяющая разработчикам и создателям контента беспрепятственно сотрудничать на одной платформе. Tina позволяет разработчикам реализовывать возможности визуального редактирования, идеально подходящие для их сайта или приложения, поддерживая при этом широкий спектр типов контента, таких как Markdown, MDX и JSON. 🖥 GitHub 🟡 Доки @react_tg

Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT. Опыт в программировании не нужен. Тебя ждёт: 1. Удалённая работа; 2. График свободный от 3-х часов в день; 3. Зарплата от 1000$/мес. 🔥 С нас обучение и помощь с заказами. С 14 по 20 мая проводим бесплатный онлайн-интенсив по Frontend-разработке, где будем показывать, как разрабатывать сайты и веб-приложения. За эти 7 дней обучения ты: 1. Создашь полноценный веб-сайт на HTML и CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в этом году зарабатывать от 1000$ на вёрстке сайтов. 👉 Пройди 7 дней обучения бесплатно, и ты поймёшь, что это не просто слова Реклама. ИП Чернова О. А., ИНН:771399721044

🖥 Ant Design — проектирование UI корпоративного уровня — npm install antd Фишки Ant Design: — UI корпоративного уровня — Набор высококачественных компонентов React из коробки — Написан на TypeScript с предсказуемыми статическими типами — Целый пакет ресурсов для проектирования и инструментов разработки — Поддержка десятков языков — Мощная кастомизация тем на базе CSS-in-JS Использование:

import { Button, DatePicker } from 'antd';

export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

🖥 GitHub 🟡 Страничка Ant Design @react_tg

Яндекс 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