Вашему вниманию представляется react-redux-cache (RRC) - легковесная библиотека для загрузки и кэширования данных в React приложениях, которая поддерживает нормализацию, в отличие от React Query и RTK Query, при этом имеет похожий, но очень простой интерфейс. Построена на базе Redux, покрыта тестами, полностью типизирована и написана на Typescript.
Одной из самых важных теоретических тем, понимание которой облегчает работу с библиотекой React является процесс рендеринга компонентов. Как React понимает, что пора обновить DOM-дерево? Как ререндеринг влияет на производительность и как ее улучшить? Что происходит под капотом React, когда мы решаем отобразить компонент на странице? Какую роль в этом всем играют хуки? Чтобы ответить на эти вопросы необходимо разобраться с такими понятиями, как рендеринг, жизненный цикл компонента, реконциляция, побочные эффекты и с некоторыми другими.
План статьи:
1) Рендеринг в контексте React
2) Жизненный цикл компонента
2.1) Mounting компонента
2.2) Update компонента
2.3) Unmounting компонента
3) Некоторые вопросы для самопроверки
Привет, Хабр! Меня зовут Татьяна и уже почти два года я занимаюсь разработкой фронтенда в МКБ. Это история о том, как я сменила профессию, какую роль сыграли дисциплина, четкое видение конечного результата и пара мотивирующих цитат.
Многие слышали про AutoGPT и GPT Engineer — агентные системы, которые позволяют генерировать код по промпту от пользователя. Меня зовут Евгений Кокуйкин. Я руководитель AI продуктов компании Raft. Сегодня расскажу про Replit Agent — AI Copilot для написания кода без знаний в программировании. Без шуток! Раньше у меня на такие прототипы уходили часы кодинга и отладки. А сейчас я сгенерировал код приложения через агент — быстрее, чем писал эту статью. Так что теперь можно участвовать в хакатоне, не зная Python.
Replit — это онлайн-IDE, где с помощью AI можно быстро создать прототип приложения и задеплоить его прямо в облаке. Недавно вышла экспериментальная фича Replit Agent, которая стоит 25 баксов. Правда, для оплаты потребуется зарубежная карта, но это уже каждый сам решает, стоит заморачиваться или нет. Эта фича позволяет начать генерацию проекта одним промптом. Я так вдохновился постом Степана Гершуни, что тестировал кодинг-агента в Replit, а потом не спал всю ночь, записывая впечатления. Так появился этот обзор.
Привет, жители Хабра! Я Саша Пиманов, ведущий iOS-разработчик в МТС Диджитал. В прошлый раз я рассказывал, что почитать начинающим разработчикам. А сегодня поделюсь подборкой из шести библиотек, которые помогут в ежедневной работе. Среди них простые и сложные, с возможностью глубокой кастомизации и без нее. Все они могут здорово облегчить работу программиста, когда нужно визуализировать какие-то данные. Подробности — под катом.
В этой статье я хочу обратить внимание на такой аспект разработки как нейминг.
Мы рассмотрим, почему важно уделять внимание названиям переменных и функций, и как грамотный подход к неймингу может сократить время и усилия на поддержку и развитие проекта. Надеюсь, мои мысли окажутся полезными. Буду рада обратной связи в комментариях.
Построение современной и надежной системы аутентификации — задача, которая требует тщательного подхода. В огромном количестве информации легко запутаться: многие материалы представлены в неструктурированном виде, а часть из них и вовсе описывает устаревшие или даже небезопасные в настоящее время методы и подходы. К тому же каноническое описание шаблона Backend-For-Frontend (BFF) довольно абстрактно и вызывает сложности в практической реализации у многих разработчиков.
Это подтолкнуло меня создать подробное и максимально доступное руководство, посвященное реализации современного подхода к аутентификации на платформе .NET с использованием OpenID Connect, архитектурного шаблона Backend-For-Frontend (BFF) и распределению ответственности между одностраничным приложением (SPA) на React и серверным API.
В статье рассматриваются ключевые аспекты настройки аутентификации, такие как использование потока Authorization Code с Proof Key for Code Exchange (PKCE) и интеграция его с одностраничными приложениями (SPA) на React. Приведены примеры на базе .NET и React, включающие пошаговые инструкции по настройке клиента OpenID Connect и BFF, а также демонстрируется использование библиотеки YARP для проксирования запросов к внешним API. В результате выполнения инструкций вы самостоятельно создадите полнофункциональное приложение с безопасной аутентификацией и надежным взаимодействием с внешними сервисами и разберетесь в его внутреннем устройстве и взаимодействии с другими сервисами.
Бывает что на руках есть лишь «бинарная» сборка сайта на модном фреймворке вроде Angular или React, в которой «срочно надо что‑то поправить». А исходного кода нет. Есть лишь вы, «бандл» с обфрусцированным JavaScript‑кодом внутри и горящие сроки. Рассказываю что с этим можно cделать кроме увольнения.
Существует множество различных способов запуска Telegram Mini Apps, но я для себя выделил несколько наиболее удобных и простых методов.
После нескольких лет веб разработки хочу поделиться с вами историями и своим опытом, делая при этом полезные (или не очень) выводы.
Требуется мультиязычность на странице: английский и французский.
Будем использовать Redux ToolKit, Axios, sessionStorage.
Перевод состоит из двух частей.
Хочется вспомнить SOLID принципы и рассмотреть, как можно их применять в разработке интерфейсов на примере React компонентов.
S: Single Responsibility Principle (Принцип единственной ответственности). Означает, что каждый класс/функция/компонент должны выполнять только одну конкретную задачу.
На примере React компонента: компонент, который отрисовывает пользовательский интерфейс, не должен содержать в себе логику авторизации этого пользователя.
O: Open-Closed Principle (Принцип открытости-закрытости). Означает, что класс/функция/компонент должны быть открыты для расширения, но закрыты для модификации. Чтобы их можно было расширять новым функционалом, не изменяя при этом исходный код.
Привет друзья!
В данной статье я хочу показать вам, как разработать форму с динамическими добавлениями полей на React.js с использованием библиотеки react-hook-form и валидацией полей с использованием библиотеки yup на конкретном примере.
Формы являются неотъемлемой частью веб-разработки, и эффективная обработка пользовательского ввода является ключевым аспектом создания интерактивных приложений. Библиотека React Hook Form предоставляет разработчикам мощный инструментарий для упрощения работы с формами в React-приложениях.
В этой статье я расскажу о том, как разрабатывать веб-компоненты с использованием библиотеки Fusor и преимуществах данного подхода.
Такие компоненты можно будет затем собирать в полноценные веб-приложения, сопоставимые с теми, что созданы с использованием React, Angular, Vue, Solid, Svelte и т.д.
React Native — отличный выбор для веб-разработчиков, имеющих опыт работы с React, которые хотят создать первое мобильное приложение.
Хотя у React и React Native много общего, между веб-платформой и нативными приложениями существуют некоторые различия. В этой статье освещаются наиболее распространенные ошибки и вопросы, с которыми сталкиваются разработчики при переходе с React на React Native.
Привет всем! Сегодня я расскажу вам о моей системе оценивания, которая создана для проведения экзаменов и оценки знаний студентов. Система построена на Django Rest Framework (DRF) для бэкенда и React с MaterialUI для фронтенда. Я добавил множество полезных функций, включая интеграцию с ISPmanager, которые делают систему удобной и эффективной.
Привет, Хабр! Сегодня рассмотрим как автоматизировать тестирование React-приложений с инструментом Cypress.
Всем привет! Меня зовут Дмитрий, я Frontend-разработчик в VK. В этой статье расскажу немного о том, как мы знакомились с замечательной архитектурой FSD (Feature-Sliced Design), как мы рефакторили свои проекты под неё. И, самое главное, что из этого вышло. Постараюсь заинтересовать вас, чтобы и вы смело её внедряли в свои проекты. FSD — это, пожалуй, то, чего так не хватало в Frontend-мире.
⚛️ Адаптивная верстка на React Native
При разработке веб-приложений на React, браузер Chrome тратит много оперативной памяти. Это связано с тем, что для эффективного обхода Virtual Dom, используется JIT компилятор, наслаивающий более эффективные реализации скомпилированных JavaScript функций поверх интерпретируемой реализации. Это создает высокую сложность по памяти: нагрузка на GC возрастает кратно.
Избежать просадки производительности может использование движка Hermes из React Native. Однако, React Native не умеет работать с адаптивной версткой: из коробки есть Yoga Layout, реализующий только Flexbox.
Описание проблем, возникших при портировании классического React приложения в React Native можно прочитать в этой статье. Речь идет о поддержке различных форм факторов устройств, в том числе, Galaxy Fold
