React
الذهاب إلى القناة على Telegram
Подборки по React js и все что с ним связано. По всем вопросам @evgenycarter
إظهار المزيد
الشبكة:2 647
المشتركون
لا توجد بيانات24 ساعات
-47 أيام
-1330 أيام
أرشيف المشاركات
2 647
Тайна 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_lib2 647
Курс «Python-разработчик» от Яндекса. Начните с нуля.
Программа 2023 года.
Диплом о переподготовке и помощь с поиском работы.
Рассрочка.
Зарегистрироваться
#реклама 16+
practicum.yandex.ru
О рекламодателе
2 647
React Application Architecture for Production: Learn best practices and expert tips to deliver enterprise-ready React web apps
Автор: Alan Alickovic (2023)
На протяжении всей книги вы будете работать с реальными практическими примерами, демонстрирующими все рассмотренные концепции. Вы научитесь создавать современные фронтенд-приложения, созданные с нуля и готовые к производству. Начиная с обзора экосистемы React, книга поможет вам определить инструменты, доступные для решения сложных задач разработки. Затем вы перейдете к созданию API, компонентов и страниц, чтобы сформировать полноценное фронтенд-приложение. Книга также поделится лучшими практиками тестирования, обеспечения безопасности и структурированной упаковки вашего приложения, а затем, наконец, развертывания вашего приложения с учетом масштабируемости.
✍️ @React_lib
2 647
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
✅ Регистрация - участие бесплатно!
🌐 Наш телеграам канал с анонсами митапов!
2 647
React: разрабатываем кастомный useEffect
В данной статье мы с вами разработаем кастомный хук, функционал которого будет аналогичен функционалу встроенного хука useEffect, за исключением того, что наш useEffect будет повторно выполняться только при изменении его зависимостей любого типа (неважно, примитивы это или объекты).
https://habr.com/ru/companies/timeweb/articles/688982/
✍️ @React_lib
2 647
Ответ на 1 вопрос - Яндекс Музыка всю осень за 1₽ ваша!
Яндекс Музыка для вас и 3-х ваших близких до конца осени за 1₽. Попробуйте сейчас!
Узнать больше
#реклама 16+
mrqz.me
О рекламодателе
2 647
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
2 647
⁉️ JS-разработчик?
А насколько хорошо ты знаешь Vue.js?
✔️ Пройди тест из 20 вопросов и узнай, сможешь ли ты учиться на курсе "Vue.js разработчик" от OTUS. Если правильно ответишь хотя бы на 12 вопросов - сможешь поступить на курс по специальной цене!
⏰ Время прохождения теста ограничено 30 минут
👉 ПРОЙТИ ТЕСТ
🎫Курс можно приобрести в рассрочку
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru2 647
Как я уменьшил размер образа 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
2 647
useSyncExternalStore - The underrated React API
https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api
✍️ @React_lib
2 647
Курс «DevOps для эксплуатации и разработки» от Яндекса
За 6 месяцев обучения освоите принципы DevOps и автоматизацию процесса разработки.
Зарегистрироваться
#реклама 16+
practicum.yandex.ru
О рекламодателе
2 647
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
2 647
Интерактивное руководство по рендерингу в React
В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния.
Хотя это уравнение дает нам простую мысленную модель работы React, есть один аспект уравнения, который до сих пор, после стольких лет, кажется, смущает людей. Когда и как именно вызывается f? Или, говоря иначе, когда и как React обновляет представление?
Этой, казалось бы, простой теме посвящено множество постов в блогах, докладов на конференциях и сообщений в твиттере. И все же почему-то даже опытные разработчики React имеют некоторые (часто неизвестные) заблуждения на этот счет.
https://ui.dev/why-react-renders
✍️ @React_lib
2 647
Курс «Разработчик» - Профессия, у которой есть будущее
Станьте разработчиком и начните свою карьеру в IT. Гарантия трудоустройства!
Перейти на сайт
#реклама 16+
skillbox.ru
О рекламодателе
2 647
React: полное руководство по повторному рендерингу
https://www.developerway.com/posts/react-re-renders-guide
✍️ @React_lib
2 647
ЖК «Береговой»: редкие форматы премиум-квартир
Береговой – премиальный дом в форме волны. Преимущества жилого комплекса: благоустроенная набережная Москвы-реки, зеленый парк Фили рядом, продуманные планировки, панорамные окна, гардеробные, закрытый внутренний двор, лобби с тихой зоной, пространство для отдыха на крыше.
Узнать больше
Проектная декларация на рекламируемом сайте
#реклама
beregovoy-kvartal.ru
О рекламодателе
2 647
Learning React
Modern Patterns for Developing React Apps 2nd Edition
Alex Banks, Eve Porcello (2020)
Хотите создавать эффективные приложения с помощью React? Тогда эта книга написана для вас. Познакомьтесь c лучшими практиками и шаблонами создания современного кода.
В этой книге вы:
• Разберетесь с ключевыми аспектами функционального программирования на JavaScript.
• Узнаете, как устроена работа React в браузере.
• Создадите слои представления приложения с помощью компонентов React.
• Научитесь управлять данными и тратить меньше времени на отладку.
• Внедрите в проект хуки React для управления состояниями и перехвата данных.
• Используете маршрутизатор для полноценной работы с одностраничными приложениями.
• Научитесь структурировать приложения React с учетом особенности работы сервера.
✍️ @React_lib
2 647
⁉️ Как создавать сайт быстрее?
‼️ С помощью фреймворков Astro и Vue 3!
Приглашаем разработчиков на JavaScript и Vue, а также бэкенд-разработчиков на открытый вебинар «Быстрое создание сайтов с помощью Astro и Vue 3» курса «Vue.js-разработчик».
➡️ Расскажем, как комбинировать два фреймворка, чтобы улучшить UX и ускорить разработку. Разберёмся, как использовать Astro для предварительного рендеринга и статической генерации контента, а Vue 3 – для добавления динамических и интерактивных элементов.
🟠Курс «Vue.js-разработчик» можно оплатить в рассрочку.
📢📢 Занятие «Быстрое создание сайтов с помощью Astro и Vue 3» пройдёт 5 октября, в 20:00 МСК.
🟠Бесплатно.
🟠Для регистрации на вебинар необходимо пройти тест.
➡️Зарегистрироваться
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru2 647
Как развернуть приложение React с помощью PM2 и Serve
Да, вы изучили React и теперь можете разрабатывать полноценные фронтенд-приложения.
С помощью create-react-app можно настроить и запустить проект React, включая транспиляцию кода, базовую линтинг-систему, тестирование и систему сборки.
Одним словом, вы можете начать писать React-код с минимальной подготовкой. После того как вы разработали свое приложение, настало время развернуть его на сервере. Но вы застряли и обратитесь за помощью к своим товарищам по бэкенду или DevOps.
https://compile7.org/decompile/react-app-deployment/
✍️ @React_lib
2 647
Курс «Аналитик данных» в Яндекс Практикуме
Поможем освоить востребованную профессию — с нуля за 6 месяцев, и найти работу после.
Начать можно бесплатно
Попробовать
#реклама 16+
practicum.yandex.ru
О рекламодателе
