Category: React

04
Окт
2021

5 методов оптимизации производительности React

От автора: Оптимизация производительности приложений является ключевым моментом для разработчиков, которые заботятся о том, чтобы оценка пользователей оставалась положительной и чтобы они продолжали пользоваться приложением. Согласно исследованию Akamai, секундная задержка во времени загрузки может привести к снижению конверсии на 7%, что заставляет разработчиков создавать приложения с оптимизированной производительностью. Для приложений, созданных с помощью React, нам […]

01
Окт
2021

Виртуализация больших списков данных с помощью React-Window

От автора: рендеринг большого набора данных в DOM без правильных инструментов может быть довольно затратным, так как это отрицательно сказывается на производительности веб-страницы; замедляет время выполнения, сетевые запросы и производительность памяти. В этом руководстве мы рассмотрим, как визуализировать большой объем данных из внешнего API или фиктивного файла данных в нашем приложении. Мы будем использовать библиотеку […]

29
Сен
2021

Руководство по React Context и хуку useContext()

От автора: контекст React предоставляет данные компонентам независимо от того, насколько глубоко они находятся в дереве компонентов. Контекст используется для управления глобальными данными, например, глобальным состоянием, темой, службами, пользовательскими настройками и т.д. В этом посте вы узнаете, как использовать концепцию контекста в React. 1. Как использовать контекст Для использования контекста в React требуется 3 простых […]

24
Сен
2021

Введение в Atomic Layout для приложений React

От автора: Atomic Layout — это легкая библиотека React, которая позволяет создавать адаптивный макет сетки для ваших компонентов. Современные библиотеки CSS, такие как styled-components и emotion невероятно полезны, потому что они позволяют создавать изолированные локальные CSS, которые применяются только к намеченным конкретным компонентам. Но поскольку обе библиотеки ориентированы на написание CSS только внутри JavaScript, это […]

22
Сен
2021

От Create-React-App к Next

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

10
Сен
2021

Использование перетаскивания в React

От автора: в этом посте я объясню основы использования библиотеки с открытым исходным кодом react-dnd (версия 14.0.2 на данный момент) и покажу несколько актуальных примеров кода.. Подготовка Установите библиотеки react-dnd и react-dnd-html5-backend с помощью npm/yarn. Оберните компонент-контейнер (тот, который отображает компоненты с помощью перетаскивания) DndProvider следующим образом: [crayon-613afd5caa69e872821417/] Нам необходимо предоставить react-dnd бэкэнд, который инкапсулирует […]

02
Сен
2021

Использование localStorage с React Hooks

От автора: localStorage — это один из двух механизмов веб-хранилища браузера. Он позволяет пользователям сохранять данные в виде пар ключ / значение в браузере для последующего использования. В отличие от механизма sessionStorage, который сохраняет данные в хранилище браузера, пока открыта текущая вкладка браузера, localStorage не очищает данные при закрытии браузера. Это делает его идеальным для […]

01
Сен
2021

Три примера багов кода React и способы их устранения

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

27
Авг
2021

Выявление ошибок в React с помощью Error Boundaries

От автора: эта статья познакомит вас с концепцией error boundaries в React. Мы рассмотрим, какие задачи они пытаются решить, как их реализовать и какие у них есть недостатки. Наконец, мы рассмотрим небольшой слой абстракции, который делает error boundaries еще лучше! Даже в самых безупречных приложениях время от времени возникают ошибки выполнения. Сеть может выйти из […]

26
Авг
2021

10 способов стилизовать приложение на React

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

28
Июл
2021

Архитектура React: как структурировать и настроить приложение

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

21
Июл
2021

Руководство по пользовательским хукам React с MutationObserver

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

13
Июл
2021

Обучение фронтенду с оплатой после трудоустройства

Изучите всё, необходимое фронтенд-разработчику: HTML, CSS, JS, а также React в связке с Redux. Ничего платить не придётся, пока не найдёте работу в Москве.
— Читать дальше «Обучение фронтенду с оплатой после трудоустройства»

13
Июл
2021

Митап «Common anti-patterns in JS apps»

Эксперт по бэкенд- и фронтенд-разработке поговорит о типичных проблемах на бэкенде с Node.js, о фронтенде с React/Redux, ответит на вопросы и даст рекомендации.
— Читать дальше «Митап «Common anti-patterns in JS apps»»

05
Июл
2021

Путь к увеличению производительности приложения на React в 10 раз

От автора: когда-либо получали ошибку «Aw! Snap» в вашем приложении? Пытались это решить? Вы просто погуглили и не нашли ничего, кроме статьи о ошибках chrome? Как правило, простое обновление страницы поможет вашему приложению снова запускаться. Год назад в Technogise у меня появилась возможность поработать над тяжелым фронт-энд приложением ReactJS с множеством функций. Мы унаследовали эту […]

02
Июл
2021

Динамическая и статическая маршрутизация в React

От автора: маршрутизация — это тема, с которой большинство из нас знакомо. Однако фреймворки SPA и библиотеки маршрутизации используют различные методы. Два таких подхода — статическая и динамическая маршрутизация. Такие фреймворки, как Angular, Ember и библиотека React Router (в прошлом) поддерживали статическую маршрутизацию. Но недавно React Router представил динамическую маршрутизацию для устранения некоторых основных ограничений […]

25
Июн
2021

Использование форм в React

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

24
Июн
2021

iPod.js — веб-версия легендарного плеера с авторизацией через Spotify и Apple Music

Как вишенка на торте — работающий Click Wheel.
— Читать дальше «iPod.js — веб-версия легендарного плеера с авторизацией через Spotify и Apple Music»

24
Июн
2021

Лучшие практики стилизованных компонентов React

Приведённые в статье советы и рекомендации должны помочь вам грамотно использовать стилизованные компоненты React.
— Читать дальше «Лучшие практики стилизованных компонентов React»

23
Июн
2021

Митап «Эволюция фронтенд-разработчика»

Расскажут о том, как развиваться фронтендеру, стоит ли двигаться в сторону фуллстека или пробовать себя в мобильной разработке.
— Читать дальше «Митап «Эволюция фронтенд-разработчика»»

16
Июн
2021

Курс «Веб-разработчик»

12 месяцев обучения разработке на JavaScript и PHP, 30 проектов для портфолио, 6 месяцев дополнительного обучения и помощь в трудоустройстве.
— Читать дальше «Курс «Веб-разработчик»»

16
Июн
2021

Полное руководство по виртуальной DOM React

От автора: борьба с бесполезными манипуляциями с DOM, согласование и алгоритм различий. Реальная DOM Перво-наперво, DOM означает «объектную модель документа». Простыми словами DOM представляет пользовательский интерфейс вашего приложения. Каждый раз, когда происходит изменение состояния пользовательского интерфейса вашего приложения, DOM обновляется, чтобы представить это изменение. Теперь загвоздка заключается в том, что частые манипуляции с DOM влияют […]

15
Июн
2021

Что такое React Hooks и какие проблемы они решают

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

14
Июн
2021

React, TypeScript и TDD

От автора: ReactJS очень популярен и поэтому широко поддерживается. TypeScript становится все более популярным и поэтому все более широко поддерживается. А если они вместе? Становится намного лучше. Они оба в контексте разработки через тестирование в сочетании с интеллектуальными инструментами? Почему разработка через тестирование? Разработка через тестирование, или TDD, позиционируется как способ выполнить дополнительную работу заранее, […]

11
Июн
2021

Курс «JavaScript-фреймворк React.js»

За 3 месяца научитесь применять фреймворк React.js, расширите профессиональные навыки и пополните портфолио.
— Читать дальше «Курс «JavaScript-фреймворк React.js»»

08
Июн
2021

Курс «Frontend-разработчик»

За 7 месяцев с нуля изучите вёрстку, JavaScript, инструменты и технологии для Frontend-разработки и подготовитесь к трудоустройству.
— Читать дальше «Курс «Frontend-разработчик»»

01
Июн
2021

Курс «Fullstack-разработчик на Python»

За 15 месяцев можно стать Fullstack-разработчиком с портфолио и получить работу при поддержке карьерного центра SkillFactory.
— Читать дальше «Курс «Fullstack-разработчик на Python»»

26
Май
2021

Курс «Fullstack-разработчик на JavaScript»

За полтора года с нуля научитесь программировать на JavaScript и TypeScript и освоите передовые технологии — React, Node.js, Docker, Express.js, Nest.js, Firebase, MongoDB.
— Читать дальше «Курс «Fullstack-разработчик на JavaScript»»

11
Май
2021

Создание To-Do List в React с помощью Redux Toolkit в TypeScript

От автора: сегодня мы узнаем, как составить список дел с помощью Redux. Redux — популярная библиотека управления состоянием, особенно в сочетании с React. Возьмем Redux Toolkit. Redux Toolkit значительно сокращает объем кода Redux, который нам придется писать, и значительно улучшает опыт разработки, как вы скоро увидите. Итак, без лишних слов, давайте погрузимся в создание нашего […]

07
Май
2021

Как создать свой первый React Hook от начала до конца

От автора: в этой статье давайте рассмотрим, как от начала до конца создать собственный React hook, который позволяет пользователям копировать фрагменты кода или любой другой текст в приложении. Какую функцию мы хотим добавить? На моем веб-сайте reedbarger.com я разрешаю пользователям копировать код из моих статей с помощью пакета под названием react-copy-to-clipboard. Пользователь просто наводит курсор […]