React

❌ Избегайте использования useState() для сложного управления состояниями в React

✅ Вместо этого используйте useReducer

✍️ @React_lib

Как React 18 повышает производительность приложений

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

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

https://vercel.com/blog/how-react-18-improves-application-performance

✍️ @React_lib

⚛️ Когда разделять JSX на новые компоненты? Когда создавать пользовательские хуки? Как абстрагировать уровень данных от представления?

✍️ @React_lib

⚛️ Совет по React

Отложите создание non-primitive значений, если вы используете их в массиве зависимостей

✍️ @React_lib

Шаблоны проектирования React

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

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

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

Presentational & Container Component
Higher Order Components
Render Props
Compound Components
Hooks

https://dev.to/anuradha9712/react-design-patterns-2acc

✍️ @React_lib

Все, что я хотел бы знать перед переносом 50 000 строк кода на React Server Components

Серверных компонентов React очень много. Недавно мы переосмыслили нашу документацию и сделали ребрендинг Mux, а пока мы этим занимались, перенесли все сайты mux.com и docs.mux.com на серверные компоненты. Так что... поверьте мне. Я знаю. Я также знаю, что это возможно, не так страшно и, возможно, стоит того.

import { Suspense } from 'react'

async function VideoSidebar({ videoId }) {
return (
<Suspense fallback={<p>loading comments...</p>}>
<Comments videoId={videoId} />
</Suspense>
<Suspense fallback={<p>loading related videos...</p>}>
<RelatedVideos videoId={videoId} />
</Suspense>
)
}

https://www.mux.com/blog/what-are-react-server-components

✍️ @React_lib

Эффективные практики ReactJS

https://dev.to/nikacodes/reactjs-good-practices-59b3

✍️ @React_lib

Why Signals Are Better Than React Hooks

00:00 - Introduction
00:57 - Demo
02:18 - The Problem With Hooks
04:12 - Why Signals Are Great
05:40 - Basic Signals
11:15 - Advanced Signals

источник

✍️ @React_lib

Изучаем код React

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

Конечно, я знаю то-то и то-то о виртуальном DOM и алгоритме свертки. По крайней мере, в теории. Но только в этом году мое любопытство наконец-то пересилило. Я открыл репозиторий React, но на этот раз с намерением прочитать код.

https://alexkondov.com/readint-source-code-react/

✍️ @React_lib

Разработчики React любят Preact, и вот почему

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

Итак, давайте поговорим о размере. Если говорить о размере файла, то сам React весит около 6 КБ, а ReactDOM добавляет к нему примерно 130 КБ. В сумме они составляют примерно 136 КБ кода, который браузер должен обработать. Следует помнить, что эти цифры относятся к минифицированному коду, который читает браузер.

Вы можете встретить упоминание о размере после сжатия с помощью GZip. В случае React и ReactDOM этот сжатый размер составит около 42 КБ.

https://hackernoon.com/why-react-developers-love-preact

✍️ @React_lib

React95

Это библиотека компонентов, созданная на основе дизайна пользовательского интерфейса Windows 95.

https://react95.github.io/React95/?path=/story/all--all

https://github.com/React95/React95

✍️ @React_lib

Построение уникальных диаграмм React

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

https://www.react-graph-gallery.com/

✍️ @React_lib

Не наступил ли у React момент переписывания Angular.js на Angular?

В 2012 году Angular.js серьёзно поменял frontend-разработку. Фреймворку от Google тогда очень быстро удалось снискать популярность у разработчиков.

И вот уже буквально через два года его разработчики решили объявить о выходе новой версии под именем Angular 2. Версия оказалось написанной полностью с нуля и не имела совместимости с предыдущей даже близко. Большинство разработчиков, не исключая и вашего покорного слугу, идея переписывать их приложения явно не прельщала. Писать приложения на старой версии, которая с припиской JS, тоже было так себе вариантом. Конкурирующие фреймворки уже были ничуть не хуже.

Rus https://habr.com/ru/articles/746918/

Eng https://marmelab.com/blog/2023/06/05/react-angularjs-moment.html

✍️ @React_lib

Объявление типов JSX в TypeScript 5.1

Новая функция, описанная как «отдельная проверка типов между элементами JSX и типами тегов JSX», появилась в TypeScript 5.1. Эта функция позволяет библиотекам контролировать, какие типы используются для элементов JSX. В этой статье я расскажу, почему это важно и как работает эта новая функция.

https://blog.logrocket.com/declaring-jsx-types-typescript-5-1

✍️ @React_lib

Эффективное тестирование хуков React с помощью Vitest

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

https://mayashavin.com/articles/test-react-hooks-with-vitest

✍️ @React_lib

Создание бесшовного многоязычного пользовательского интерфейса в React.

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

https://www.honeybadger.io/blog/creating-multi-language-user-interface-with-react/

✍️ @React_lib

React.js with typescript

#8 : How to use react developer tools
#9 : Create list with useState and adding types to useState
#10 : React Props
#11 : Reusing same componets for different props
#12 :Passing functions as props
#13 : useEffect Hook
#14 : useEffect Hook Dependencies

источник

✍️ @React_lib