React Server Components (RSC) — интересная новая фича в React.

Есть вероятность, что в ближайшем будущем она сильно повлияет на скорость загрузки страниц, размер бандлов и то, как мы будем писать приложения на React. Мы в Plasmic (место работы автора) делаем визуальный конструктор для React и очень заботимся о производительности. Многие из наших клиентов используют Plasmic для создания маркетинговых сайтов и сайтов электронной коммерции, и производительность там критически важна. Так что хотя RSC — пока что ранняя экспериментальная функция React 18, мы разобрались, как она работает под капотом. Об этом и расскажем в статье.

Темная тема стала стандартом де-факто. Ее отсутствие может стать причиной отказа от пользования сайтом. Особенно если на него заходят программисты, которые сплошь и рядом работают в тёмной теме.

Я покажу, как можно просто добавить темную тему в React проект. Разберем основные моменты и сделаем всё красиво. Для тех, кто хочет все сразу:

• Репозиторий

• Демо

Доброго времени суток! В данной серии статей вы узнаете подходы, которые помогут Вам писать более красивый React код, а также познакомитесь с способами сделать части кода более универсальными.

Всего в данной серии 3 статьи:

Лучшие подходы и решения для уменьшения кода на React. Часть 1
Лучшие подходы и решения для уменьшения кода на React. Часть 2
Лучшие подходы и решения для уменьшения кода на React. Часть 3

Привет. Это перевод второй статьи из серии “Лучшие подходы и решения для уменьшения кода на React” автора Rahul Sharma.

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

Всего в данной серии 3 статьи, и найти их все вы можете по ссылкам ниже:

Часть 1
Часть 2
Часть 3

Привет! Это третья и заключительная часть серии статей “Лучшие подходы и решения для уменьшения кода на React” автора Rahul Sharma. Предыдущие статьи вы можете найти по ссылкам ниже:

Часть 1
Часть 2
Часть 3

В данной части вы получите несколько советов, как сделать Ваш код более универсальным. Узнаете немного о защите данных вашего приложения. Также, вы найдете расширения для VSCode, которые помогут Вам в разработке. И ещё много всего полезного и интересного.

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

Наша последняя основная версия включает в себя такие улучшения, как автоматическое пакетирование, новые API, такие как startTransition, и потоковый серверный рендеринг с поддержкой Suspense.

Многие функции в React 18 построены на основе нашего нового конкурентного рендеринга - закулисного изменения, которое открывает новые мощные возможности. Concurrent React является опциональным - он включается только при использовании concurrent функционала - но мы считаем, что он окажет большое влияние на то, как люди создают приложения.

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

Эта статья — перевод основных изменений версии реакта 18.0.0.

Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.

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

Привет, в переводе данного руководства вы сможете узнать как поместить ваше приложение в докер.

Докер – это открытая платформа для разработки, запуска и управления контейнерами на сервере и в облаке.

Для примера приложения в этом руководстве мы будем использовать Next.js.

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

Что подразумевается под необоснованной сложностью проектов?

Для начала необходимо отметить, что «React» в отличии от «Vue» предоставляет огромную свободу разработчику. Благодаря этому разработчики любят данный фреймворк и всячески указывают, что приложения на «React» будут быстрее и производительнее чем на «Vue». Это несомненно так, «React» приложения можно сделать быстрым, производительным и легко тестируемым. К сожалению, достичь этого крайне тяжело и из-за этого многие компании могут иметь не высокопроизводительные приложения, а наоборот перегруженные излишним кодом и трудно тестируемые приложения. Это связанно с тем, что начинающим разработчикам сложно понять, как правильно писать приложения на «React».

«React» словно тренер по плаванию, бросает вас в воду и говорит плыви, ему не важно будете вы правильно дышать или махать руками, ему важно чтобы вы плыли. Проецируя данный пример на «React», мы получаем возможность писать очень плохой рабочий код. Особенно это распространено в командах, где нет специалиста по «React». Люди меняются и каждый раз поддерживать приложение все труднее и труднее, кто-то увидел пример в функциональном стиле:

Привет, в данном посте вы найдете перевод статьи Mangabo Kolawole, в которой пойдет речь о Test-Driven Development. Мы создадим крайне простое приложение на React по всем правилам TDD.

Первое правило Test-Driven Development (TDD) – это написание тестов перед написанием кода. Это звучит более интуитивно, когда мы говорим о разработке для бэкенда, если честно, но работает ли данная схема для фронтенда, в частности для React, что же, посмотрим.

Привет, когда разрабатываем любой проект на React, мы, при выборе что рендерить, больше всего имеем дело с условными операторами или просто с передачей компонентов в определенный компонент, функцию или тому подобное. Но если происходит неожиданная ситуация и в React компоненте или функции случается ошибка, то, зачастую мы видим белый экран смерти. И после этого нам надо открыть инструменты разработчика, чтобы увидеть в консоли ошибку. А это точно не лучший способ обработки ошибок. Решением данной проблемы является Error Boundary.

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

Не буду пересказывать рекламные лозунги про 500% пользователей покидают страницу после 100мс ожидания, увелечения конверсии на 20% при снижении LCP на 2мс… читайте сами. Скажу коротко: метрики производительности важны.

Погрузитесь глубоко в новую архитектуру React под названием Fiber и узнайте о двух основных фазах нового алгоритма согласования (reconciliation). Мы подробно рассмотрим, как React обновляет состояние и пропсы и обрабатывает дочерние элементы.

В данном переводе рассказывается о том, что такое мемоизация, зачем её использовать. Также представлены основные примеры на JavaScript и React, демонстрирующие работу мемоизации.

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

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

В этой статье разберем как с помощью useEffect воспроизвести методы жизненного цикла в функциональных компонентах. Поговорим как и когда использовать useEffect и useLayoutEffect. Обсудим особенности отправки запросов из useEffect. Также узнаем почему массив зависимостей необязателен и когда это может пригодиться.

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

⚛ О применении слоеной архитектуры в современном React-Mobx приложении

В данной статье я привожу пример использования композиции сервисов через инъекцию зависимостей в React приложении. Это позволяет сочетать проверенный временем подход и проработанные компоненты от Еnterprise и сообщества