Оптимизация производительности React

Оптимизация производительности приложений крайне важна для разработчиков, заботящихся о сохранении приятного пользовательского опыта, чтобы удержать пользователей. Согласно исследованиям Akamai, разработчики должны создавать приложения, оптимизированные по скорости: каждая дополнительная секунда времени загрузки может привести к снижению конверсии на 7%. В этой статье мы рассмотрим методы и объясним, почему эти процессы оптимизации важны и когда их следует использовать.

import { List } from 'immutable';
Class MyComponent extends React.Component {
state = {
items: List([1, 2, 3])
}

handleAddItem = () => {

this.setState(prevState => ({
items: prevState.items.push(4)
}));
}

render() {
return (
<div>
<button onClick={this.handleAddItem}>Add Item</button>
<ul>
{this.state.items.map(item => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
}
}

https://blog.openreplay.com/optimizing-reacts-performance/

✍️ @React_lib

Как я построил систему продажи билетов на мероприятия с помощью Next.js и Firebase

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

В этом руководстве я расскажу вам о том, как я создал систему продажи билетов на мероприятия с помощью Next.js и Firebase.
По окончании курса вы сможете создавать продвинутые веб-приложения, используя такие замечательные возможности Firebase, как база данных в реальном времени, аутентификация и хранение файлов.

https://dev.to/arshadayvid/how-i-built-an-event-ticketing-system-with-nextjs-and-firebase-50l2

✍️ @React_lib

Как использовать компоненты React Server - руководство для начинающих

Компоненты React Server в последнее время вызывают большой интерес и оживление. Недавно они были приняты в качестве опции по умолчанию в Next.js 13, и теперь все больше и больше разработчиков используют их.

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

https://www.freecodecamp.org/news/react-server-components-for-beginners/

✍️ @React_lib

Создание анимированного тултипа с помощью React и Framer Motion

Tooltip кажется очень простым компонентом. То есть, вы просто показываете симпатичный плавающий элемент с подсказкой или сообщением о помощи. Никакой сложной стилизации или взаимодействия с пользователем, верно? Ну, отчасти. Приходится думать о нескольких крайних случаях. Как расположить всплывающую подсказку по центру (или выровнять ее по краю элемента ссылки)? Что делать, если не хватает места? Элемент ссылки изменил размер или положение? Как его анимировать? Как анимировать при размонтировании?

https://sinja.io/blog/animated-tooltip-with-react-framer-motion

✍️ @React_lib

Использование шаблонов проектирования группы GoF в React

В этой статье поговорим о том, как написать в React многократно используемый код, используя три шаблона проектирования группы Gang-of-Four.

Rus https://habr.com/ru/company/rshb/blog/680770/

Eng https://blog.bitsrc.io/using-gof-design-patterns-with-react-c334f3ea3147

✍️ @React_lib

React with TypeScript. Бесплатный курс от Matt Pocock.

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

Как лучше всего типизировать реквизиты компонентов? Что это за странные ошибки useRef?

Именно для этого и предназначен данный учебник по React с TypeScript!

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

https://www.totaltypescript.com/tutorials/react-with-typescript

✍️ @React_lib

React: революция использования фигурных скобочек

Хорошо, react. Как много мы используем всего, потому что так исторически сложилось: пишем функции задом наперед (сначала объяви, потом вызывай). Оборачиваем все в стрелочные функции и константы с ними, когда достаточно именованной функции. Этот список можно хорошенько продолжить.

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

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

function useClient(clientId) {
const [loadedClient, setLoadedClient] = useState(null)
const [isLoading, setIsLoading] = useState(false)

useEffect(() => {
const loadClient = async () => {
try {
setIsLoading(true)
const clientData = {} // actual data loading call goes here
setLoadedClient(clientData)
}
finally {
setIsLoading(false)
}
}

loadClient()
}, [clientId])

return [loadedClient, isLoading]
}

https://habr.com/ru/articles/727542/

✍️ @React_lib

Шпаргалка по React

https://reactcheatsheet.com/

✍️ @React_lib

Соглашения о присвоении имен в React JS

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

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

https://www.upbeatcode.com/react/react-naming-conventions/

✍️ @React_lib

Серверный компонент Grok React от Quizzes

React Server Component - это новая архитектура React, представленная командой React в конце 2020 года. Она позволяет разработчикам рендерить компоненты на стороне сервера, тем самым повышая производительность и уменьшая размер кода на стороне клиента.

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

https://betterprogramming.pub/grok-react-server-component-by-quizzes-df4417905bc4

✍️ @React_lib

Понимание параллелизма в React

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

https://www.bbss.dev/posts/react-concurrency/

✍️ @React_lib

Типы React в TypeScript

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

Я расскажу о некоторых часто используемых типах для React, чтобы в будущем мы с вами больше не паниковали.

https://jser.dev/2023-05-31-react-types-in-typescript/

✍️ @React_lib

Самоучитель по React для начинающих ⚛️

00:00:00 introduction
00:01:41 installation
00:02:48 new project
00:05:00 how to restart dev server
00:05:36 project folder explanation
00:08:13 App component
00:09:14 new Header component
00:13:30 new Footer component
00:16:32 new Food component
00:19:22 conclusion

источник

✍️ @React_lib

React reconciliation: как это работает и почему это должно нас волновать

Каждый раз, когда мне кажется, что я знаю все о том, как React рендерит компоненты, Вселенная находит способ удивить меня. Такая невинная вещь, как простое утверждение if, может полностью перевернуть ваше сознание. Так случилось и в эту субботу, когда я случайно просматривал документацию по React, чтобы отложить то, что я должен был сделать в соответствии со списком дел на выходные, висящим у меня на стене. Очередной момент "подождите, это не может быть правильным" привел к тому, что еще один план на выходные исчез в пустоте, а за ним последовало еще одно глубокое исследование и статья. Кому вообще нужны эти ToDo? Они же не были важными, верно?

https://dev.to/adevnadia/react-reconciliation-how-it-works-and-why-should-we-care-417e

✍️ @React_lib

Экосистема React в 2023 году

В 2023 году React исполнилось 10 лет, и экосистема продолжает развиваться благодаря постоянным усовершенствованиям и инновациям. Будучи одной из самых распространенных JavaScript-библиотек, React остается фаворитом среди разработчиков для создания динамичных и высокопроизводительных приложений.

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

https://www.builder.io/blog/react-js-in-2023

✍️ @React_lib

Построение анимированной выдвижной панели вкладок с помощью React и Tailwind CSS

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

let allTabs = [
{
id: "home",
name: "Home",
},
{
id: "blog",
name: "Blog",
},
{
id: "projects",
name: "Projects",
},
{
id: "arts",
name: "Arts",
},
];

export const SlidingTabBar = () => {
const tabsRef = useRef<(HTMLElement | null)[]>([]);
const [activeTabIndex, setActiveTabIndex] = useState<number | null>(null);
const [tabUnderlineWidth, setTabUnderlineWidth] = useState(0);
const [tabUnderlineLeft, setTabUnderlineLeft] = useState(0);

useEffect(() => {
if (activeTabIndex === null) {
return;
}

const setTabPosition = () => {
const currentTab = tabsRef.current[activeTabIndex] as HTMLElement;
setTabUnderlineLeft(currentTab?.offsetLeft ?? 0);
setTabUnderlineWidth(currentTab?.clientWidth ?? 0);
};

setTabPosition();
}, [activeTabIndex]);

return (
<div className="flew-row relative mx-auto flex h-12 rounded-3xl border border-black/40 bg-neutral-800 px-2 backdrop-blur-sm">
<span
className="absolute bottom-0 top-0 -z-10 flex overflow-hidden rounded-3xl py-2 transition-all duration-300"
style={{ left: tabUnderlineLeft, width: tabUnderlineWidth }}
>
<span className="h-full w-full rounded-3xl bg-gray-200/30" />
</span>
{allTabs.map((tab, index) => {
const isActive = activeTabIndex === index;

return (
<button
key={index}
ref={(el) => (tabsRef.current[index] = el)}
className={`${
isActive ? `` : `hover:text-neutral-300`
} my-auto cursor-pointer select-none rounded-full px-4 text-center font-light text-white`}
onClick={() => setActiveTabIndex(index)}
>
{tab.name}
</button>
);
})}
</div>
);
};


https://www.julienthibeaut.xyz/blog/build-animated-sliding-tab-bar-with-react-tailwind-css

✍️ @React_lib

Аутентификация JWT в React с помощью react-router

В этой статье мы рассмотрим бесшовную интеграцию JWT-аутентификации с React и react-router. Мы также узнаем, как работать с публичными маршрутами, защищать аутентифицированные маршруты и использовать библиотеку axios для выполнения API-запросов с маркером аутентификации.

https://dev.to/sanjayttg/jwt-authentication-in-react-with-react-router-1d03

✍️ @React_lib

Реализация аудио в React-сайтах

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

https://blog.openreplay.com/implementing-audio-in-react-websites/

✍️ @React_lib

RSC From Scratch. Часть 1: Серверные компоненты

В этом техническом погружении мы с нуля реализуем очень упрощенную версию React Server Components (RSC).
Это глубокое погружение будет опубликовано в нескольких частях:


Это глубокое погружение не объясняет преимущества React Server Components, как реализовать приложение с использованием RSC или как реализовать фреймворк с их использованием. Вместо этого он проведет вас через процесс их самостоятельного "изобретения" с нуля.

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

🚧 Это глубокое погружение не предназначено для ознакомления с тем, как использовать серверные компоненты. Мы работаем над документированием серверных компонентов на сайте React. Пока же, если ваш фреймворк поддерживает Server Components, обратитесь к его документации.

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

https://github.com/reactwg/server-components/discussions/5

✍️ @React_lib

Лучшие библиотеки анимации для React🎉

Сегодня пользовательские интерфейсы Web-приложений имеют множество элементов, которые делают их привлекательными для пользователей. Разработчикам приходится искать новые способы реализации пользовательских интерфейсов с анимацией и переходами, чтобы соответствовать этим современным требованиям.

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

https://dev.to/arafat4693/best-animation-libraries-for-react-156n

✍️ @React_lib