Category: React

29
Июл
2022

Google Maps – всё? Переходим на Яндекс Карты в React Native приложениях

Рассказали о библиотеке для React на основе Yandex MapKit. Она поможет заменить Google Maps, ведь их больше нельзя оплатить.
— Читать дальше «Google Maps – всё? Переходим на Яндекс Карты в React Native приложениях»

29
Июл
2022

Google Maps – всё? Переходим на Яндекс Карты в React Native приложениях

Рассказали о библиотеке для React на основе Yandex MapKit. Она поможет заменить Google Maps, ведь их больше нельзя оплатить.
— Читать дальше «Google Maps – всё? Переходим на Яндекс Карты в React Native приложениях»

07
Июл
2022

Найди ошибку в React-компоненте: Функциональное Карри

У нас есть React компонент-переключатель между активным и неактивным состояниями. Однако он не работает как ожидается. Найдите ошибку.
— Читать дальше «Найди ошибку в React-компоненте: Функциональное Карри»

30
Июн
2022

Подготовка окружения React-приложения: VSCode, Prettier, ESLint, Stylelint, Husky

Рассказываем, какие инструменты выбрать для подготовки окружения для React-приложения, и как их настроить.
— Читать дальше «Подготовка окружения React-приложения: VSCode, Prettier, ESLint, Stylelint, Husky»

30
Июн
2022

Подготовка окружения React-приложения: VSCode, Prettier, ESLint, Stylelint, Husky

Рассказываем, какие инструменты выбрать для подготовки окружения для React-приложения, и как их настроить.
— Читать дальше «Подготовка окружения React-приложения: VSCode, Prettier, ESLint, Stylelint, Husky»

04
Май
2022

React 18: новые хуки и как изменился рендеринг

Всё об обновлении React 18: автоматический батчинг, конкурентный режим, изменения в архитектуре рендеринга на стороне сервера и новые хуки.
— Читать дальше «React 18: новые хуки и как изменился рендеринг»

21
Апр
2022

Как развивать карьеру IT-специалисту в кризис 

Востребованность IT-специалистов растет, поэтому кризис ― не время останавливаться в карьерном развитии. При этом правила игры изменились.
— Читать дальше «Как развивать карьеру IT-специалисту в кризис »

04
Мар
2022

Изучение трех новых API в React 18

От автора: самая большая тема в экосистеме React сейчас — React 18 и выпуск его долгожданных функций параллельного рендеринга. В июне 2021 года команда React объявила о планах React 18 и о том, что должно произойти. Несколько месяцев спустя, в декабре, главной темой React Conf 2021 стали все недавно анонсированные функции параллельного рендеринга. Вместе с […]

03
Мар
2022

Все о миграции с ReactJS на NextJS

От автора: общие мысли, проблемы и результаты: миграция технического стека Peerlist с ReactJS на NextJS. Эта статья охватывает большую часть наших мыслей, связанных с решением и процессом миграции, и, возможно, не будет углубляться в технологии, но, в конце концов, ее стоит прочитать! React — одна из самых популярных библиотек JavaScript, которая в наши дни широко […]

25
Фев
2022

Три шаблона проектирования компонентов React

От автора: React, возможно, является самой популярной библиотекой JavaScript для создания пользовательских интерфейсов, и одной из причин этого является его непредвзятый характер. Независимо от того, решите ли вы рассматривать React как фреймворк или библиотеку, можно выделить одну особенность — это его невмешательство в то, как разработчики должны создавать приложения React, что дает им, разработчикам, и […]

17
Фев
2022

Лучший способ решить задачу сквозной передачи данных в React

От автора: работа с управлением состоянием в приложениях React может быть непростой задачей, особенно когда данные необходимо передать от корневого компонента к глубоко вложенным компонентам. Мы, как разработчики React, часто склонны перепроектировать свои приложения, слишком сильно полагаясь на Context API и Redux в ситуациях, когда они на самом деле не нужны. Мы неоправданно часто обращаемся […]

16
Фев
2022

5 способов избежать повторного рендеринга компонентов React

От автора: компоненты React прошли долгий путь развития с момента их создания. Тем не менее, многим разработчикам трудно исправить ненужные повторные рендеринги. Однако существует множество способов избежать этой проблемы. В данной статье я расскажу о 5 методах, позволяющих избежать ненужных повторных рендерингов в компонентах React. 1. Мемоизация с использованием хуков useMemo() и UseCallback() Мемоизация позволяет […]

15
Фев
2022

PurgeCSS: удаление неиспользуемого кода CSS

От автора: фреймворки CSS — это наборы таблиц стилей, которые заранее подготовлены и готовы к использованию. Разработчики выбирают CSS-фреймворки, чтобы предоставлять цифровые возможности более интуитивно понятным, эффективным и соответствующим стандартам образом. Однако CSS-фреймворки также могут создавать проблемы. Маловероятно, что вы будете использовать все функции, предлагаемые в рамках CSS, а это означает, что неиспользуемый код останется […]

11
Фев
2022

Переход на React Router v6: полное руководство

От автора: переход с React Router v5 на v6 может быть сложным, потому что в React Router v6 есть несколько существенных изменений, в сравнении с React Router v5. Кроме того, был введен ряд новых функций, поэтому рекомендуется обновиться до v6, даже если переход будет немного раздражать. Чтобы перейти с React Router v5 на v6, вам […]

09
Фев
2022

Создание доступной якорной ссылки с помощью React

От автора: ссылки необходимы для навигации по любому веб-сайту с момента появления современной сети в 2000-х годах. Не существует определенного числа, выражающего максимальное количество ссылок на любой веб-странице. Однако можно с уверенностью предположить, что семантический HTML header будет иметь несколько ссылок анкоров. В конце концов, header — это точка входа во вложенную структуру вашего сайта. […]

03
Фев
2022

Недооцененные хуки React

От автора: React Hooks предоставляют нам доступ к основным функциям React в контексте функциональных компонентов. Традиционно для оптимизации React разработчикам приходилось переключаться между функциональными и классовыми компонентами, однако React Hooks позволяет нам использовать функциональные компоненты во всех проектах для создания как небольших, так и крупных приложений. Если вы разработчик React и предпочитаете писать функциональные компоненты […]

02
Фев
2022

Как и почему вы должны хранить состояние React UI в URL-адресе

От автора: вы когда-нибудь использовали сложное веб-приложение с множеством функций, модальными окнами или боковыми панелями? В которых вы достигаете идеального состояния с нужной информацией на экране после нескольких кликов по разным страницам, но затем случайно закрываете вкладку? (Или Windows решает обновиться?). Было бы здорово, если бы был способ вернуться в то состояние, не проделывая тот […]

01
Фев
2022

Подробное руководство по итерации, контексту и дочерним элементам в React

От автора: самые сложные этапы освоения React включают итерацию по наборам информации, передачу данных по всему приложению и работу с props.children. В этой статье мы подробно рассмотрим эти три концепции, охватив их внутреннюю работу с несколькими соответствующими примерами. Чтобы следовать этому руководству, вы можете создать ветку в репозитории CodeSandBox. Вы также можете посмотреть здесь: GitHub […]

25
Янв
2022

Устранение утечек памяти в приложении

От автора: утечка памяти может происходить по-разному. В любом приложении приличного размера происходит утечка памяти. Последствия этих утечек могут быть мягкими, они могут раздражать (медленное приложение) или они могут быть разрушительными, вызывая сбой во вкладках браузера. Вот почему так важно следить за потреблением памяти и применять шаблоны, предотвращающие утечки. В этой статье мы рассмотрим два […]

25
Янв
2022

Устранение утечек памяти в приложении

От автора: утечка памяти может происходить по-разному. В любом приложении приличного размера происходит утечка памяти. Последствия этих утечек могут быть мягкими, они могут раздражать (медленное приложение) или они могут быть разрушительными, вызывая сбой во вкладках браузера. Вот почему так важно следить за потреблением памяти и применять шаблоны, предотвращающие утечки. В этой статье мы рассмотрим два […]

24
Янв
2022

Варианты оптимизации кеширования в React

От автора: React, одна из самых популярных интерфейсных библиотек для создания эффективных веб-приложений, она следует компонентному подходу, в котором каждый компонент имеет собственное состояние и логику. Самая большая проблема, связанная с React, — это избегать ненужных рендеров, которые могут вызвать серьезные проблемы с производительностью, особенно в больших приложениях. В этой статье мы рассмотрим несколько различных […]

22
Янв
2022

«Запашки» кода React-компонентов

Перевод статьи React component code smells с сайта antongunnarsson.com, опубликован на CSS-live.ru с разрешения автора — Антона Гуннарсона Это не окончательный вариант статьи, могут быть новые дополнения. Растущая коллекция того, что я считаю «запашками» кода React-компонентов. Что такое «запашок» кода? «Запашок» кода — что-то такое, что вроде бы и не ошибка, но может быть признаком более серьезной проблемы в […]

21
Янв
2022

Как использовать Redux для управления состоянием

От автора: посмотрим правде в глаза – управлять состоянием нескольких компонентов непросто. Иногда мы можем правильно настроить обработку состояния или логики, но получить ошибку при использовании этого состояния. Или мы можем заставить все работать, но настолько увеличить кодовую базу в процессе, что это затруднит чтение, адаптацию и расширение. Возможность иметь единственный источник (единое хранилище) — […]

20
Янв
2022

Внедрение зависимостей в React

От автора: внедрение зависимостей (DI) — это шаблон, в котором компоненты, необходимые для запуска кода, могут быть заменены в горячем режиме. Это означает, что зависимости не жестко запрограммированы в реализации и могут изменяться по мере изменения среды. Благодаря наследованию, DI — это широко используемый шаблон в объектно-ориентированном программировании (ООП), предназначенный для многократного использования кода в […]

19
Янв
2022

Декларативная выборка данных с React Async

От автора: в JavaScript мы обычно используем async / await для асинхронных операций, таких как выборка данных. То же самое и при использовании библиотек пользовательского интерфейса, таких как React. Но что, если вместо этого вы получите возможность использовать компонент и хук React для извлечения данных? React Async делает именно это, предоставляя компонентный подход для извлечения […]

17
Янв
2022

Адаптивные веб-страницы с помощью React-Response и TypeScript

От автора: в последнее время часто возникает потребность в быстром создании адаптивных веб-приложений, которые правильно отображаются на устройствах с различным разрешением экрана. Эта потребность обязывает разработчиков искать способы быстрого включения стилей в логику (функционал) приложения, давая им гибкость, позволяющую легко создавать веб-приложения, реагирующие на запросы, без написания CSS медиа-запросов. В этом руководстве мы узнаем о […]

13
Янв
2022

Шпаргалка по React с TypeScript

От автора: благодаря этому руководству вы узнаете о наиболее распространенных типах, которые могут понадобиться при разработке приложения React-TypeScript. Как типизировать React props Поскольку React props используются для отправки данных от одного компонента React в другой, существует множество типов, которые вы можете использовать для типизации props. Чтобы записать типы props, нужно добавить двоеточие и буквенное обозначение […]

10
Янв
2022

Как писать более читаемый код React

От автора: один из важнейших аспектов кода — его читабельность. Легко читаемый код — это результат качественного написания кода, и он имеет много долгосрочных преимуществ. Его будет легче читать, понимать, поддерживать, проверять, он будет менее подвержен неожиданным ошибкам и, как правило, значительно упростит жизнь другим разработчикам, когда им придется взаимодействовать с таким кодом. Сложность читабельности […]

10
Янв
2022

Как писать более читаемый код React

От автора: один из важнейших аспектов кода — его читабельность. Легко читаемый код — это результат качественного написания кода, и он имеет много долгосрочных преимуществ. Его будет легче читать, понимать, поддерживать, проверять, он будет менее подвержен неожиданным ошибкам и, как правило, значительно упростит жизнь другим разработчикам, когда им придется взаимодействовать с таким кодом. Сложность читабельности […]

28
Дек
2021

Как очистить побочные эффекты в React

От автора: в React мы используем useEffec t, когда нам нужно что-то сделать после рендеринга компонента или когда нам нужно применить побочные эффекты. Побочным эффектом может быть выборка данных с удаленного сервера, чтение или запись в локальное хранилище, настройка слушателей событий или настройка подписки. UseEffect() позволяет нам управлять жизненными циклами компонентов внутри функциональных компонентов. Хук […]