ReactJS *

Разработка текстового инпута с выделением слов в React: неожиданные сложности и практические решения, выявленные в процессе реализации

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

В этой серии статей я продолжаю рассказывать о Remix — новом фреймворке для создания клиент-серверных веб-приложений на JavaScript (React) со встроенной поддержкой TypeScript.

Remix позволяет разрабатывать так называемые PESPA (Progressive Enhancement Single Page Apps — одностраничные приложения с возможностью прогрессивного улучшения). Это означает следующее:

• почти весь код приложения "живет" на сервере;
• приложение остается функциональным даже при отсутствии JS;
• JS используется только для прогрессивного улучшения UX (User Experience — пользовательский опыт).

Подробнее о PESPA и других архитектурах веб-приложений можно почитать здесь.

Очевидно, что разработчики Remix вдохновлялись Next.js и Svelte.

К слову, здесь вы найдете полное руководство по Next.js.

В первой части мы прошлись по руководствам из официальной документации, во второй — более подробно рассмотрим возможности, предоставляемые Remix.

Это часть номер два.

Вот ссылка на часть номер раз.

Взгляд на популярную Testing Library с Nightwatch

Мы создадим подробный пример проекта React с Vite, а затем воспользуемся Nightwatch и Testing Library для тестирования этих компонентов. Мы используем Complex example, доступный в документах React Testing Library, написанный с помощью Jest.

Hello, world!

В этом небольшом туториале мы с вами разработаем простое, но полезное расширение для браузера с помощью Plasmo.

Наше расширение будет представлять собой вызываемый сочетанием клавиш попап с инпутом для поиска информации на MDN с выводом 5 лучших результатов в виде списка. Кроме основного функционала, мы добавим страницу настроек для кастомизации цветов и отображения хлебных крошек. Мы будем разрабатывать расширения для Chrome, которое также будет работать в Firefox.

Вот как это будет выглядеть:

Для тех, кого интересует только код, вот ссылка на соответствующий репозиторий.

Интересно? Тогда прошу под кат.

Всех приветствую и желаю приятного чтения!

Next.js это fullstack фреймворк разработанный Vercel использующий последние разработки React.

Не так давно 25 октября 2022 года вышла версия 13. На данный момент последняя стабильная версия 13.2.3, и новые возможности все еще находятся в стадии бета теста, и не рекомендуется использовать в продакшен.

13 поддерживает все возможности версии 12. Для тестирования новых возможностей используется специальная директория app. Такой подход помогает попробовать новые возможности, в проектах, которые работали на версии 12.

В этой статье я пробую использовать только новые возможности версии 13, кому интересно больше узнать о Next.js рекомендую: Next.js: подробное руководство. Итерация первая.

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

Однако, почти все доклады на эту тему не показывают серьезность проблем, с которыми можно столкнуться на пути.

В этой статье будет рассказано вкратце, для тех, кто ещё не знает, что такое module federation, в каких ситуациях его стоит использовать, как настроить продакшен сборку, а не только локальную, ну и какие проблемы вас могут ждать.

Начнем!

Hello, world!

Представляю вашему вниманию перевод этой замечательной статьи.

useSyncExternalStore — это один из хуков, представленных в React 18. Наряду с хуком useInsertionEffect, он считается хуком для библиотек (library hook):

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

В списке изменений React 18 речь также идет о библиотеках:

Добавлен useSyncExternalStore для помощи в интеграции с React библиотек внешних хранилищ (external store libraries)

Привет! Меня зовут Айнур, и я frontend-разработчик SimbirSoft. Более 6 лет я работаю над коммерческими проектами, создаю и улучшаю интерфейсы, поэтому в работе достаточно часто использую паттерны проектирования. Неоднократно я обращался за идеями и лайфхаками к книге Patterns.dev, которая содержит очень современный взгляд на шаблоны проектирования, рендеринга и производительности JavaScript.

Авторы Patterns.dev:

Лидия Холли — штатный консультант и преподаватель по разработке программного обеспечения, которая в основном работает с JavaScript, React, Node, GraphQL. Она также занимается наставничеством и проводит личные тренинги.

Эдди Османи — технический менеджер, работающий над Google Chrome. Его команды работают над такими проектами, как Lighthouse, PageSpeed ​​Insights, Chrome User Experience Report и другими.

Материал книги будет полезен не только React-разработчикам, но и всем, кто так или иначе интересуется или сталкивается с frontend-разработкой.

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

Источник: https://www.patterns.dev/
Данный адаптированный материал распространяется на условиях лицензии Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)

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

В этом туториале я покажу вам несколько полезных приемов по работе с таблицами с помощью React Table.

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

Мы последовательно реализуем 5 вариантов таблицы:

• с возможностью сортировки строк;
• с возможностью фильтрации строк;
• с пагинацией;
• с возможностью выбора строк;
• комплексную.

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

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

Для тех, кого интересует только код, вот ссылка на соответствующий репозиторий.

Интересно? Тогда прошу под кат.

NPM-пакет для интернационализации i18n используется на фронтэнде для создания мультиязычных вебсайтов очень часто. Перевод текста в нем содержится обычно в json или в js файлах, и требует дальнейшей обработки, чтобы с ним с комфортом могли работать контент-редакторы. В статье описывается как максимально упростить и сделать удобным хранение и внесение изменений в перевод.

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

На днях прочитал эту интересную статью, посвященную различным вариантам хранения токена доступа (access token) на клиенте. Мое внимание привлек вариант с использованием сервис-воркера (service worker) (см. "Подход 4. Использование service worker"), поскольку я даже не задумывался о таком способе применения этого интерфейса.

СВ — это посредник между клиентом и сервером (своего рода прокси-сервер), который позволяет перехватывать запросы и ответы и модифицировать их тем или иным образом. Он запускается в отдельном контексте, работает в отдельном потоке и не имеет доступа к DOM. Клиент также не имеет доступа к СВ и хранимым в нем данным. Как правило, СВ используется для обеспечения работы приложения в режиме офлайн посредством кэширования критически важных для работы приложения ресурсов.

В этой статье я покажу, как реализовать простой сервис аутентификации на основе JSONWebToken и HTTP Cookie с хранением токена доступа в сервис-воркере.

Для тех, кого интересует только код, вот ссылка на соответствующий репозиторий.

Интересно? Тогда прошу под кат.

Устали писать логику для компонентов, которая из раза в раз повторяется?

React Spectrum знает как это решить!

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

В этой серии статей я расскажу вам о Remix — новом фреймворке для создания клиент-серверных веб-приложений на JavaScript (точнее, на React) со встроенной поддержкой TypeScript.

Remix позволяет разрабатывать так называемые PESPA (Progressive Enhancement Single Page Apps — одностраничные приложения с возможностью прогрессивного улучшения). Это означает следующее:

• почти весь код приложения "живет" на сервере;
• приложение остается функциональным даже при отсутствии JS;
• JS используется только для прогрессивного улучшения UX (User Experience — пользовательский опыт).

Подробнее о PESPA и других архитектурах веб-приложений можно почитать здесь.

Очевидно, что разработчики Remix вдохновлялись Next.js и Svelte.

К слову, здесь вы найдете полное руководство по Next.js.

В первой части мы пройдемся по руководствам из официальной документации, во второй — более подробно рассмотрим возможности, предоставляемые Remix.

Это часть номер раз.

Часть номер два.

С первой частью рассказа о микрофронтендах в Dodo можно ознакомиться тут

Мы спокойно сидели и пилили новый проект на нашем устоявшемся стеке (React + TypeScript + Webpack + SingleSPA + SystemJS + Jest). Пока одним прекрасным утром не пришел наш техлид и такой: «Чуваки, а давайте затащим Vitest!».

Привет! Это tech-команда СберМаркет. Сегодня кто-то празднует день влюбленных, а для нас с вами это ещё и профессиональный праздник — день компьютерщика. Если совместить два повода, получим день влюблённых в компьютеры. Кто-то любит копаться в железе, кто-то в программах. Кто-то пишет библиотеки, а кто-то их использует. Но все мы не равнодушны, иначе нас бы здесь не было. Эта статья — любовное письмо языкам, фреймворкам и библиотекам, которые крутятся у нас под капотом — Go, Ruby, React, React Native, Redux.

В настоящее время мы все привыкли видеть появление новых фреймворков, которые обещают произвести революцию в сфере веб-разработки. Тем не менее, чаще всего мы остаемся привязанными к конкретной библиотеке пользовательского интерфейса (React, Vue, Svelte и т.д.) для определения наших компонентов и создания пользовательского опыта.

На этот раз ситуация поменялась! Используя возможности Vite.js, мы получили Astro: агностический фреймворк, который может работать как SSG (генератор статических сайтов) и обеспечивать SSR (рендеринг на стороне сервера).

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

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

В 16.8 версии библиотеки React впервые появились хуки (hooks) — функции, которые упрощают работу с компонентами React и переиспользованием какой-либо логики. В экосистеме React уже есть много дефолтных хуков, но также можно создавать и свои. Я Михаил Карямин, фронтенд-разработчик в Учи.ру, расскажу, как и в каких случаях хуки в React облегчают жизнь разработчику и как с ними работать.

Хотя в IT и разработана шкала оценки программистов (Trainee, Junior, Middle, Senior, Tech Lead), с которой более или менее все согласны, единого определения каждого уровня среди работодателей пока нет. В итоге каждая компания устанавливает собственные требования к навыкам на каждом уровне.

Этот тест поможет вам прикинуть, какой бы у вас был грейд, если бы вы собеседовались в МКБ.

Из-за своей гибкой парадигмы React имеет несколько подходов проектирования проекта. Решения, которые мы принимаем на этапе проектирования и архитектуры проекта, могут либо сократить временные затраты на разработку простого надежного решения, либо затруднить её из-за усложнения реализации.

Одним из простых в реализации, но иногда сложных в использовании инструментов является react-query — мощная библиотека для асинхронного управления состоянием. Простота реализации делает его желанным выбором для написания логики состояния компонентов.