Виртуализация больших списков с помощью библиотеки react-window

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

✍️ @React_lib

React Hooks и советы по избежанию бесполезного рендеринга компонентов, применяемого к спискам

https://blog.theodo.com/2022/01/react-list-hooks-avoid-render/

✍️ @React_lib

Проблемы в типизации children

https://fettblog.eu/react-types-for-children-are-broken/

✍️ @React_lib

7 TypeScript типов для React разработчиков

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

- React.ComponentProps. Иногда нет доступа к типу пропсов компонента: например, внешняя библиотека, которая дает доступ только к самому компоненту. Чтобы узнать тип пропсов компонента можно использовать React.ComponentProps.

import { ComponentProps } from "react";
import { ExternalComponent } from "external-lib";

type InternalComponentProps = ComponentProps<typeof ExternalComponent> & {
outerClassName: string;
};


- React.MouseEventHandler. Используется для типизации колбека события мыши.

import { MouseEventHandler, } from "react";

type ComponentProps = {
caption: string;
onClick: MouseEventHandler<HTMLButtonElement>;
};

const Component = (props: ComponentProps) => (
<div>
<button onClick={props.onClick}>{props.caption}</button>
</div>
);


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

type ComponentProps = Pick<Something, "propA" | "propB" | "children"> & {
wrapperClassName?: string;
}

export const Component = (props: ComponentProps) => (
…
);


https://www.chakshunyu.com/blog/7-typescript-utility-types-for-react-developers/



✍️ @React_lib

React. Lite Level

Первое приложение на React. .
Знакомимся с классами ES6. Часть 1
Знакомимся с классами ES6. Часть 2. Наследование, геттеры, сеттеры
Прототипное наследование. React.
Компоненты React.
Props и State. Часть 1.
Props и State. Часть 2.
Props и State. Часть 3.
Работаем с формами. React. Lite Level
Жизненный цикл компонентов. React. Lite Level
React JSX. React. Lite level
React Router - делаем навигацию! React. Lite level
Делаем проект на Реакте, сайт курса валют.
Делаем проект на Реакте, сайт курса валют часть 2.
Делаем сайт обмена валют на React. Часть 03
Делаем сайт обмена валют на React. Часть 04
Делаем сайт с курсом валют на React. Часть 5.
React сайт на хостинг.
Firebase React Deploy.
Собеседование по React на Junior Front-end разработчика

Все видео на youtube

✍️ @React_lib

Тестирование компонентов React

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

✍️ @React_lib

Почему пользовательские react hooks могут разрушить производительность вашего приложения

https://www.developerway.com/posts/why-custom-react-hooks-could-destroy-your-app-performance

✍️ @React_lib

Используем React для создания менеджера бюджета, чтобы следить за ежедневными расходами

https://dev.to/gbadeboife/using-react-to-create-a-budget-manager-59jh

✍️ @React_lib

An apparent React bug

https://phelipetls.github.io/posts/surprising-react-bug/

✍️ @React_lib

Plasmo Framework

Plasmo Framework - это SDK для браузерных расширений, созданный хакерами для хакеров. Создайте свой продукт и перестаньте беспокоиться о конфигурационных файлах и странных особенностях создания браузерных расширений.

https://docs.plasmo.com/

✍️ @React_lib

Создаем приложение React с нуля

Пошаговое руководство по созданию современного приложения React без шаблонов

Вы можете получить доступ ко всей этой статье и всему связанному с ней коду на GitHub.

✍️ @React_lib

Использование глобальной мемоизации в React

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

https://blog.thoughtspile.tech/2022/02/09/react-global-memo/

✍️ @React_lib

React Dark Mode Example

Реализация элементарного переключателя темной/светлой темы на ReactJS с помощю Class-Components

https://codepen.io/montesmakes/pen/WNrPKaO

✍️ @React_lib

Underrated React Hooks you’re missing out on

https://blog.logrocket.com/underrated-react-hooks-youre-missing-out-on/

✍️ @React_lib

ReactJS под капотом

React Reconciliation
Все ли вы знаете о React key?
Что вы знаете о useCallback?
какая разница между useLayoutEffect, componentDidMount и useEffect?
Best Practices for useEffect by React Documentation
Первое погружение в исходники хуков (задел на будущее)
createRef, setRef, useRef и зачем нужен current в ref
Что выбрать: глобальные переменные или useThis()?
Какая настоящая цена useMemo?
useMemo - исходники, альтернативное использование и мемоизация ссылки
React.memo это вам не useMemo || разница между HOC и hook на примере исходников
Чем отличается SimpleMemoComponent от MemoComponent?
Улучшаем перфоманс без memo() || Советы от Дэна Абрамова
Станет ли memo() дэфолтным поведением реакт компонента?
Блок схема по использованию memo() && Боевые примеры
Трюк с useMemo от React разработчиков
Новый хук в 18-ой версии React - useSyncExternalStore
Исходники Context API + Redux vs Context
[Эксперимент] useContext + useReducer вместо Redux
Лучшие примеры использования Context API
Новый хук useEvent решит наши проблемы!

Все видео доступны на youtube

✍️ @React_lib

Методы выборки данных с помощью React

https://blog.openreplay.com/data-fetching-techniques-with-react

✍️ @React_lib

Remotion: фреймворк для создания видео в React

https://blog.logrocket.com/remotion-a-framework-for-making-videos-in-react/

✍️ @React_lib

Повышение производительности приложений React с помощью React Profiler

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

https://indepth.dev/posts/1497/react-profiler

✍️ @React_lib

VSCode Glean

Allows extracting JSX into new component
Allows converting Class Components to Functional Components and vice-verse
Allows wrapping JSX with conditional
Allows renaming state variables and their setters simultaneously.
Allows wrapping code with useMemo, useCallback or useEffect
Moving code between files
Typescript support
ES2015 modules support
CommonJS modules support

https://marketplace.visualstudio.com/items?itemName=wix.glean

✍️ @React_lib

React JavaScript Framework for Beginners – Project-Based Course

Learn React in this full course for beginners. React is one of the most popular JavaScript frameworks and this course is the perfect place to start your learning journey. You will learn everything you need to know to get started with React by building three different projects.

https://www.youtube.com/watch?v=u6gSSpfsoOQ

✍️ @React_lib