Как стать автором
Обновить
44.79

ReactJS *

JavaScript-библиотека для создания интерфейсов

Сначала показывать
Порог рейтинга
Уровень сложности

Как нейминг влияет на качество кода?

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров5.6K

В этой статье я хочу обратить внимание на такой аспект разработки как нейминг.

Мы рассмотрим, почему важно уделять внимание названиям переменных и функций, и как грамотный подход к неймингу может сократить время и усилия на поддержку и развитие проекта. Надеюсь, мои мысли окажутся полезными. Буду рада обратной связи в комментариях.

Читать далее

Практическая реализация современной аутентификации на платформе .NET: OpenID Connect, шаблон BFF и SPA

Уровень сложностиСредний
Время на прочтение34 мин
Количество просмотров4.3K

Построение современной и надежной системы аутентификации — задача, которая требует тщательного подхода. В огромном количестве информации легко запутаться: многие материалы представлены в неструктурированном виде, а часть из них и вовсе описывает устаревшие или даже небезопасные в настоящее время методы и подходы. К тому же каноническое описание шаблона 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. В результате выполнения инструкций вы самостоятельно создадите полнофункциональное приложение с безопасной аутентификацией и надежным взаимодействием с внешними сервисами и разберетесь в его внутреннем устройстве и взаимодействии с другими сервисами.

Читать далее

React и жизнь после сборки

Уровень сложностиСредний
Время на прочтение27 мин
Количество просмотров3.3K

Бывает что на руках есть лишь «бинарная» сборка сайта на модном фреймворке вроде Angular или React, в которой «срочно надо что‑то поправить». А исходного кода нет. Есть лишь вы, «бандл» с обфрусцированным JavaScript‑кодом внутри и горящие сроки. Рассказываю что с этим можно cделать кроме увольнения.

Оживить

Способы запуска Telegram mini apps

Время на прочтение6 мин
Количество просмотров9.1K

Существует множество различных способов запуска Telegram Mini Apps, но я для себя выделил несколько наиболее удобных и простых методов.

Читать далее

Истории

Истории и боли frontend-разработчика

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров7.2K

После нескольких лет веб разработки хочу поделиться с вами историями и своим опытом, делая при этом полезные (или не очень) выводы.

Читать далее

Как я ускорил свое мобильное приложение BookDesk на React Native в 3 раза?

Уровень сложностиПростой
Время на прочтение14 мин
Количество просмотров3K

Всем привет! В этом материале я поделюсь с вами практическим опытом по оптимизации своего мобильного приложения на React Native. Я расскажу как я ускорил свое приложение в 3 раза.

Я разрабатываю свое мобильное приложение BookDesk для хранения прочитанных книг. Предыдущие серии: 123

Читать далее

Требуется мультиязычность на странице: английский и французский

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров718

Требуется мультиязычность на странице: английский и французский.

Будем использовать Redux ToolKit, Axios, sessionStorage.

Перевод состоит из двух частей.

Читать далее

SOLID in React

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров7K

Хочется вспомнить SOLID принципы и рассмотреть, как можно их применять в разработке интерфейсов на примере React компонентов.

S: Single Responsibility Principle (Принцип единственной ответственности). Означает, что каждый класс/функция/компонент должны выполнять только одну конкретную задачу.

На примере React компонента: компонент, который отрисовывает пользовательский интерфейс, не должен содержать в себе логику авторизации этого пользователя.

O: Open-Closed Principle (Принцип открытости-закрытости). Означает, что класс/функция/компонент должны быть открыты для расширения, но закрыты для модификации. Чтобы их можно было расширять новым функционалом, не изменяя при этом исходный код.

Читать далее

Работа с массивами в формах(динамическое добавление полей) с использованием библиотеки react-hook-form

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров1.7K

Привет друзья!

В данной статье я хочу показать вам, как разработать форму  с динамическими добавлениями полей на React.js с использованием библиотеки react-hook-form и валидацией полей с использованием библиотеки yup на конкретном примере.

Формы являются неотъемлемой частью веб-разработки, и эффективная обработка пользовательского ввода является ключевым аспектом создания интерактивных приложений. Библиотека React Hook Form предоставляет разработчикам мощный инструментарий для упрощения работы с формами в React-приложениях. 

Читать далее

Новый фронтенд-фреймворк?

Время на прочтение4 мин
Количество просмотров12K

В этой статье я расскажу о том, как разрабатывать веб-компоненты с использованием библиотеки Fusor и преимуществах данного подхода.

Такие компоненты можно будет затем собирать в полноценные веб-приложения, сопоставимые с теми, что созданы с использованием React, Angular, Vue, Solid, Svelte и т.д.

Читать далее

От Web к Native с React

Уровень сложностиСредний
Время на прочтение15 мин
Количество просмотров5.8K



React Native — отличный выбор для веб-разработчиков, имеющих опыт работы с React, которые хотят создать первое мобильное приложение.


Хотя у React и React Native много общего, между веб-платформой и нативными приложениями существуют некоторые различия. В этой статье освещаются наиболее распространенные ошибки и вопросы, с которыми сталкиваются разработчики при переходе с React на React Native.

Читать дальше →

Система оценивания для проведения экзаменов, срезов в СПО

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров1.3K

Привет всем! Сегодня я расскажу вам о моей системе оценивания, которая создана для проведения экзаменов и оценки знаний студентов. Система построена на Django Rest Framework (DRF) для бэкенда и React с MaterialUI для фронтенда. Я добавил множество полезных функций, включая интеграцию с ISPmanager, которые делают систему удобной и эффективной.

Читать далее

Основы тестирования React-приложений через Cypress

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров3.1K

Привет, Хабр! Сегодня рассмотрим как автоматизировать тестирование React-приложений с инструментом Cypress.

Читать далее

Ближайшие события

Как мы приготовили Feature-Sliced Design в VK

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров12K

Всем привет! Меня зовут Дмитрий, я Frontend-разработчик в VK. В этой статье расскажу немного о том, как мы знакомились с замечательной архитектурой FSD (Feature-Sliced Design), как мы рефакторили свои проекты под неё. И, самое главное, что  из этого вышло. Постараюсь заинтересовать  вас, чтобы и вы смело её внедряли в свои проекты. FSD — это, пожалуй, то, чего так не хватало в Frontend-мире.

Читать далее

Адаптивная верстка на React Native

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров2.3K

⚛️ Адаптивная верстка на React Native

При разработке веб-приложений на React, браузер Chrome тратит много оперативной памяти. Это связано с тем, что для эффективного обхода Virtual Dom, используется JIT компилятор, наслаивающий более эффективные реализации скомпилированных JavaScript функций поверх интерпретируемой реализации. Это создает высокую сложность по памяти: нагрузка на GC возрастает кратно.

Избежать просадки производительности может использование движка Hermes из React Native. Однако, React Native не умеет работать с адаптивной версткой: из коробки есть Yoga Layout, реализующий только Flexbox.

Описание проблем, возникших при портировании классического React приложения в React Native можно прочитать в этой статье. Речь идет о поддержке различных форм факторов устройств, в том числе, Galaxy Fold

Читать далее

Polling vs Websockets (с примерами на React хуках)

Время на прочтение10 мин
Количество просмотров6.2K

В современной веб-разработке существует множество способов обновления данных в реальном времени. Среди наиболее распространённых методов выделяются Polling и WebSockets. Оба подхода имеют свои уникальные особенности и применения, что делает их подходящими для различных сценариев. В этой статье мы рассмотрим основные различия между Polling и WebSockets, их преимущества и недостатки, а также приведем примеры использования каждого из них в React приложениях на хуках.

Читать далее

Основы типизации props в React

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров7.1K

Данная статья рассчитана на тех, кто только начинает писать свои React приложения на TypeScript, а также является памяткой для меня, ведь совсем недавно я путался в типизации children props.

Начну с того, что есть задачи и проекты, для реализации которых TypeScript не нужен. Например, это какой-то разовый проект, который, если и будет масштабироваться или изменяться со временем, то несущественно, или проект, у которого не много данных, получаемых с backend, и по большей части данные статичные или захардкоженные.

Если же чувствуете, что несмотря на то, что в проекте нет сложной логики, но дерево компонентов и количество и вариация передаваемых пропсов внушительные, я бы воспользовался prop-types. Ранее эта фича входила в состав React и использовали её так: React.PropTypes. Но начиная с версии React 15.5 она переехала в отдельную библиотеку, поэтому теперь её необходимо устанавливать как, например, npm/yarn пакет. Она используется для валидации типов props в компонентах React. Это всё из возможностей TS, но для проекта с большим количеством компонентов и пропсов - то, что нужно. Синтаксис описания типов пропсов отличается от TS.

Углубиться в детали

React: одна любопытная особенность порталов

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров5.2K



Привет, друзья!


В этой небольшой заметке я хочу рассказать вам об одной интересной особенности порталов в React, которую я долгое время упускал из виду, но которая на днях привела к любопытному багу. Речь идет о том, что структурно дерево React не всегда соответствует DOM.


Полагаю, статья будет интересна всем разработчикам React, а также тем, кто любит разбираться с тонкостями работы JavaScript и браузерных API.


Предполагается, что вы имеете некоторый опыт работы с React, и вам не надо объяснять, что такое порталы и для чего они нужны.

Читать дальше →

Аутентификация в SPA приложении через OpenAM используя OAuth2/OIDC

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров1.3K

Данная статья будет полезна разработчикам браузерных (SPA) приложений, которые хотят настроить аутентификацию пользователей. Для аутентификации будет использоваться OAuth2/OIDC протокол c PKCE. В качестве сервера аутентификации будет использоваться сервер управления аутентификации с открытым исходным кодом OpenAM.

Читать далее

Выбор JavaScript фреймворка: Сравнение React, Angular и Vue Глазами Разработчика

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров17K

В мире фронтенд-разработки существует множество различных фреймворков, которые помогают сделать процесс создания веб-приложений более удобным и эффективным. Я являюсь частью этого мира уже более 4-х лет, сейчас занимаю должность фронтенд разработчика в компании Loyalty Labs. За все время в IT я познакомилась с разными инструментами и фреймворками, и хотела бы обсудить трёх "гигантов" в области frontend: React, Angular и Vue.

Эта статья не предназначена для того, чтобы обучать вас этим фреймворкам. Это не технический гайд. Здесь я поделюсь своим мнением, попытаюсь разобраться в особенностях и понять, чем каждый из этих "гигантов" может гордиться.

Читать далее