610 читали · 4 года назад
React Single Page Application и React-Router для начинающих
Источник: Nuances of Programming Что такое SPA? SPA (single page application) переводится как “одностраничное приложение”, очень распространенный способ программирования веб-сайтов в наши дни: идея в том, что сайт загружает весь нужный для пользовательского опыта HTML/JS сразу же при первом посещении главной страницы, а при последующих переходах по страницам браузер лишь просматривает содержимое заново, не обновляя сайт. Одностраничные приложения на JavaScript-фреймворках улучшают удобство веб-сайта...
1559 читали · 2 года назад
React Router 6: частные маршруты (Protected Routes)
В React Router частные маршруты (или Protected Routes) требуют, чтобы пользователь был аутентифицирован для доступа к данным маршрутам или страницам. Если пользователь не аутентифицирован для конкретной страницы, у него будет запрещен доступ к ней. Классическим примером является аутентификация в React-приложении, где пользователю разрешен доступ только к защищенным страницам после успешной аутентификации (проверки подлинности). Однако авторизация простирается дальше аутентификации. Например, у пользователя...
531 читали · 3 года назад
Как сохранить фильтры и страницу при переходе между страницами на примере React + Ant design
Для сохранения состояния компонента между переходами и обновлениями страницы можно использовать различные подходы. В React есть несколько способов реализации этой функциональности, но одним из наиболее распространенных подходов является использование React Context. Для сохранения состояния фильтров и текущей страницы таблицы Ant Design мы можем создать контекст с помощью функции createContext из библиотеки React. Затем мы можем использовать Provider, чтобы предоставить доступ к этому контексту для всех компонентов, которым это необходимо. В качестве примера рассмотрим следующий код: import React,...
4 года назад
Как тестировать компоненты React
Источник: Nuances of Programming Написание тестов для проверки компонентов React  —  нелегкое занятие. Я потратил много времени на поиски правильных вариантов решения этой задачи и с трудом их нашел. Поэтому мне захотелось написать эту статью, чтобы поделиться с вами опытом и знаниями. Если вы хотите увидеть полноценный пример работы, взгляните на демонстрационный шаблон. Имитация После настройки среды для работы Jest и библиотеки тестирования React вы можете обнаружить, что некоторые компоненты выходят из строя при рендеринге во время теста...