React

Создание анимированного тултипа с помощью React и Framer Motion Tooltip кажется очень простым компонентом. То есть, вы просто показываете симпатичный плавающий элемент с подсказкой или сообщением о помощи. Никакой сложной стилизации или взаимодействия с пользователем, верно? Ну, отчасти. Приходится думать о нескольких крайних случаях. Как расположить всплывающую подсказку по центру (или выровнять ее по краю элемента ссылки)? Что делать, если не хватает места? Элемент ссылки изменил размер или положение? Как его анимировать? Как анимировать при размонтировании? https://sinja.io/blog/animated-tooltip-with-react-framer-motion ✍️ @React_lib

Станьте Python-разработчиком с зарплатой от 100 000 ₽! Трудоустроим в компании-партнёры – бесплатно! Самая полная учебная программа. Перейти на сайт #реклама 16+ skillbox.ru О рекламодателе

Как использовать компоненты React Server - руководство для начинающих Компоненты React Server в последнее время вызывают большой интерес и оживление. Недавно они были приняты в качестве опции по умолчанию в Next.js 13, и теперь все больше и больше разработчиков используют их. React Server Components органично сочетают рендеринг на стороне сервера с интерактивностью JavaScript на стороне клиента. В этом учебном пособии вы узнаете о том, что такое серверные компоненты React, какие проблемы они решают и какие мощные возможности предоставляют. https://www.freecodecamp.org/news/react-server-components-for-beginners/ ✍️ @React_lib

Российская замена Trello - Аспро.Agile Перенесите все задачи из Trello в Аспро.Agile. Попробовать #реклама asproagile.ru О рекламодателе

Как я построил систему продажи билетов на мероприятия с помощью Next.js и Firebase После долгих проволочек я решил улучшить свое портфолио разработчика, создавая реальные проекты, которые выделялись бы из общей массы соискателей. Тогда мне пришла в голову идея - система продажи билетов на мероприятия. В этом руководстве я расскажу вам о том, как я создал систему продажи билетов на мероприятия с помощью Next.js и Firebase. По окончании курса вы сможете создавать продвинутые веб-приложения, используя такие замечательные возможности Firebase, как база данных в реальном времени, аутентификация и хранение файлов. https://dev.to/arshadayvid/how-i-built-an-event-ticketing-system-with-nextjs-and-firebase-50l2 ✍️ @React_lib

Frontend online meetup - 11/10 ✔️ CSS in JS или самая противоречивая техника стилизации веба — Ильдар Муллахметов, Авито Тех В своем докладе я расскажу почему CSS in JS библиотеки вызывают так много противоречий среди frontend разработчиков. хочу рассмотреть влияние на производительность, поддерживаемость кода, девелопер экспириенс. Рассмотрю более подробно styled-components и сравню блоки кода со стилями между styled, tailwind, module. Рассмотрю как браузер обрабатывает styled. Продемонстрирую как влияет на семантику, работает с props и theme. Добавлю к сравнению Linaria и Astroturf, как самые быстрорастущие CSS in JS библиотеки. ✔️ Что такое Sentry и почему без него тяжело — Кирилл Логачев, Level.Travel Доклад нацелен на раскрытие такого полезного инструмента, как Sentry. Из данного доклада слушатель узнает, как правильно настраивать, использовать и мониторить Sentry, что поможет уменьшить количество ошибок в продакшене, также данный сервис поможет определять и быстро устранять просочившиеся с релизом ошибки. ✔️ По ту сторону WebView — Максим Лавренюк, UZUM TECHNOLOGIES Я бы хотел поделится некоторыми подходами и проблемами на примере встраивания сервиса доставки еды Uzum Tezkor в супер приложение Uzum Market. Я расскажу про то, что следует сделать в первую очередь при старте интеграции, как подружить нативные компоненты с вебом, как спрятать бесшовную авторизацию, а так же о чем попросить мобильных разработчиков, чтобы облегчить себе жизнь. ✔️ Web3 для фронтенд-разработчика — Назим Гафаров, Based.link Доклады вокруг web3 обычно концентрируются вокруг рассказа об языках программирования для смарт-контрактов, которые больше интересны бэкенд-разработчикам. В своем докладе я расскажу о том, какие возможности предоставляет web3 именно для фронтенд-разработчика. ➖➖➖ 🗓 11 октября в 19:00 ✅ Регистрация - участие бесплатно! 🌐 Наш телеграам канал с анонсами митапов!

Оптимизация производительности React Оптимизация производительности приложений крайне важна для разработчиков, заботящихся о сохранении приятного пользовательского опыта, чтобы удержать пользователей. Согласно исследованиям Akamai, разработчики должны создавать приложения, оптимизированные по скорости: каждая дополнительная секунда времени загрузки может привести к снижению конверсии на 7%. В этой статье мы рассмотрим методы и объясним, почему эти процессы оптимизации важны и когда их следует использовать. import { List } from 'immutable'; Class MyComponent extends React.Component { state = { items: List([1, 2, 3]) } handleAddItem = () => { this.setState(prevState => ({ items: prevState.items.push(4) })); } render() { return ( <div> <button onClick={this.handleAddItem}>Add Item</button> <ul> {this.state.items.map(item => ( <li key={item}>{item}</li> ))} </ul> </div> ); } } https://blog.openreplay.com/optimizing-reacts-performance/ ✍️ @React_lib

Вебинар по английскому от English Tochka Фатальные ошибки в изучении английского: - Зубрить грамматику, думая, что это главное - Постоянно учить новые слова - Париться над произношением На самом деле, в инглише существует всего 700 главных слов. Зная их, вы будете свободно болтать о жизни и работе, будто это ваш родной язык. И 500 тысяч учеников Алекса Рубанова это подтвердят. На английском. Скоро Алекс проведёт бесплатный вебинар, где за 2 часа вы впитаете 5-летний опыт жизни в США. А вместе с этим научитесь быстро запоминать слова, общаться на инглише живо и без ступора, а главное – чувствовать язык и свободно на нём говорить. Хотите уже через месяц смотреть новинки Нетфликс в оригинале, попутно заводя друзей за границей? Регистрируйтесь бесплатно по ссылке ниже. Узнать больше #реклама 16+ alexrubanov.ru О рекламодателе

Тайна React Element и повторные рендеры В одной из предыдущих статей о композиции React я показал пример того, как можно повысить производительность компонента с тяжелыми операциями с состоянием, передавая ему в качестве дочерних другие компоненты вместо того, чтобы рендерить их напрямую. На эту статью поступил вопрос, который отправил меня в очередное расследование о том, как работает React, что, в свою очередь, в какой-то момент заставило меня усомниться во всем, что я знаю о React, и даже ненадолго усомниться в собственном здравомыслии. // wrapping MovingComponent in memo to prevent it from re-rendering const MovingComponentMemo = React.memo(MovingComponent); const SomeOutsideComponent = () => { // trigger re-renders here with state const [state, setState] = useState(); return ( <MovingComponentMemo> <!-- ChildComponent will re-render when SomeOutsideComponent re-renders --> <ChildComponent /> </MovingComponentMemo> ) } https://www.developerway.com/posts/react-elements-children-parents ✍️ @React_lib

Курс «Python-разработчик» от Яндекса. Начните с нуля. Программа 2023 года. Диплом о переподготовке и помощь с поиском работы. Рассрочка. Зарегистрироваться #реклама 16+ practicum.yandex.ru О рекламодателе

Frontend online meetup - 11/10 ✔️ CSS in JS или самая противоречивая техника стилизации веба — Ильдар Муллахметов, Авито Тех В своем докладе я расскажу почему CSS in JS библиотеки вызывают так много противоречий среди frontend разработчиков. хочу рассмотреть влияние на производительность, поддерживаемость кода, девелопер экспириенс. Рассмотрю более подробно styled-components и сравню блоки кода со стилями между styled, tailwind, module. Рассмотрю как браузер обрабатывает styled. Продемонстрирую как влияет на семантику, работает с props и theme. Добавлю к сравнению Linaria и Astroturf, как самые быстрорастущие CSS in JS библиотеки. ✔️ Что такое Sentry и почему без него тяжело — Кирилл Логачев, Level.Travel Доклад нацелен на раскрытие такого полезного инструмента, как Sentry. Из данного доклада слушатель узнает, как правильно настраивать, использовать и мониторить Sentry, что поможет уменьшить количество ошибок в продакшене, также данный сервис поможет определять и быстро устранять просочившиеся с релизом ошибки. ✔️ По ту сторону WebView — Максим Лавренюк, UZUM TECHNOLOGIES Я бы хотел поделится некоторыми подходами и проблемами на примере встраивания сервиса доставки еды Uzum Tezkor в супер приложение Uzum Market. Я расскажу про то, что следует сделать в первую очередь при старте интеграции, как подружить нативные компоненты с вебом, как спрятать бесшовную авторизацию, а так же о чем попросить мобильных разработчиков, чтобы облегчить себе жизнь. ✔️ Web3 для фронтенд-разработчика — Назим Гафаров, Based.link Доклады вокруг web3 обычно концентрируются вокруг рассказа об языках программирования для смарт-контрактов, которые больше интересны бэкенд-разработчикам. В своем докладе я расскажу о том, какие возможности предоставляет web3 именно для фронтенд-разработчика. ➖➖➖ 🗓 11 октября в 19:00 ✅ Регистрация - участие бесплатно! 🌐 Наш телеграам канал с анонсами митапов!

React: разрабатываем кастомный useEffect В данной статье мы с вами разработаем кастомный хук, функционал которого будет аналогичен функционалу встроенного хука useEffect, за исключением того, что наш useEffect будет повторно выполняться только при изменении его зависимостей любого типа (неважно, примитивы это или объекты). https://habr.com/ru/companies/timeweb/articles/688982/ ✍️ @React_lib

Ответ на 1 вопрос - Яндекс Музыка всю осень за 1₽ ваша! Яндекс Музыка для вас и 3-х ваших близких до конца осени за 1₽. Попробуйте сейчас! Узнать больше #реклама 16+ mrqz.me О рекламодателе

React: полное руководство по повторному рендерингу Что такое ререндеринг? Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React: первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране; ререндеринг — второй и последующие рендеринги компонента. Ререндеринг происходит, когда React необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные. Rus https://habr.com/ru/companies/timeweb/articles/684718/ Eng https://www.developerway.com/posts/react-re-renders-guide ✍️ @React_lib

⁉️ JS-разработчик? А насколько хорошо ты знаешь Vue.js? ✔️ Пройди тест из 20 вопросов и узнай, сможешь ли ты учиться на курсе "Vue.js разработчик" от OTUS. Если правильно ответишь хотя бы на 12 вопросов - сможешь поступить на курс по специальной цене! ⏰ Время прохождения теста ограничено 30 минут 👉 ПРОЙТИ ТЕСТ 🎫Курс можно приобрести в рассрочку Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Как я уменьшил размер образа Docker с 1,43 ГБ до 22,4 МБ Если вы занимаетесь веб-разработкой, то, вероятно, уже знаете об идее контейнеризации и о том, как это здорово и все такое. Но при работе с Docker размер образа вызывает серьезные опасения. Зачастую он превышает 1,43 ГБ только для шаблонного проекта, который мы получаем из create-react-app. Сегодня мы будем контейнеризовать ReactJS-приложение и узнаем несколько приемов, позволяющих уменьшить размер образа и при этом повысить производительность. Трюки будут показаны для ReactJS, но они применимы к любому NodeJS-приложению. https://dev.to/mohammadfaisal/how-i-reduced-docker-image-size-from-143-gb-to-224-mb-53nc ✍️ @React_lib

useSyncExternalStore - The underrated React API https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api ✍️ @React_lib

Курс «DevOps для эксплуатации и разработки» от Яндекса За 6 месяцев обучения освоите принципы DevOps и автоматизацию процесса разработки. Зарегистрироваться #реклама 16+ practicum.yandex.ru О рекламодателе

Tanstack: Как добавить таблицы в приложение React Таблица Tanstack - это рабочая лошадка, созданная для фильтрации, сортировки, группировки, агрегации, пагинации, материализации и отображения массивных наборов данных. Он предлагает множество улучшенных возможностей, таких как производительность, поддержка рендеринга на стороне сервера (SSR), новые крючки и более современный, гибкий API. Безголовый дизайн не поставляется с компонентами и стилями разметки, что дает нам полный контроль над разметкой и стилями. В этой статье мы рассмотрим, как начать добавлять и стилизовать наши ReactJS-таблицы с помощью Tanstack Table. Итак, давайте погрузимся и посмотрим, что предлагает Tanstack Table! https://blog.openreplay.com/tanstack--how-to-add-tables-to-your-react-app/ ✍️ @React_lib