TGViewer
Channel Public Channel
React

React

@react_lib

Подборки по React js и все что с ним связано. По всем вопросам @evgenycarter
Open in Telegram
Subscribers
2.66K
Photos
327
Videos
138
Links
412

Showing posts older than #97 · Back to latest

Older Posts 20 shown
Post #95 4.08K
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
  • 👍 5
Post #92 3.59K
Использование глобальной мемоизации в React

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

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

✍️ @React_lib
  • ❤ 1
  • 👍 1
Post #90 1.38K
Создаем приложение React с нуля

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

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

✍️ @React_lib
Post #89 1.25K
Plasmo Framework

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

https://docs.plasmo.com/

✍️ @React_lib
  • 👍 4
Post #85 3.41K
Тестирование компонентов React

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

✍️ @React_lib
  • 👍 4
  • ❤ 2
Post #84 1.3K
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
  • 👍 4
Post #83 3.43K
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
Chakshunyu 7 TypeScript Utility Types For React Developers It's hard to imagine React development without TypeScript nowadays. However, being a good React developer doesn’t automatically translate into being a good TypeScript developer. This article goes over 7 different utility types that are helpful to React developers…
  • 👍 8
Post #79 1.07K
Всех с праздником!
  • 🎉 9
  • 👍 5
  • ❤ 3
Post #78 3.98K
Виртуализация больших списков с помощью библиотеки react-window

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

✍️ @React_lib
  • 👍 4
Post #76 959
Frontender's notes - самый большой канал по фронту с годной инфой по HTML, CSS, JS, TypeScript, React, Node.js и развитию Soft-skills, а также разборы вопросов для интервью и подборка крутых статей c опытом релокации айтишников в другие страны.

Вам сюда: 👉 @frontendnoteschannel

Ну а если вы любите почитать статейки о вебе в оригинале то вот сюда 👉 @frontend_international

В общем добро пожаловать!
  • 👍 1
Post #75 913
В этом небольшом туториале я покажу вам, как разработать простой редактор кода на React.

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

Функционал нашего приложения будет следующим:
имеется три вкладки: для ручного редактирования HTML, CSS и JavaScript, соответственно;
пользователь имеет возможность загружать файлы, соответствующие текущей вкладке;
пользователь имеет возможность бросать (drop) файлы, соответствующие текущей вкладке;
код, введенный пользователем, загружается в iframe и выполняется в режиме песочницы (sandbox) при нажатии соответствующей кнопки.

✍️ @React_lib
  • 👍 2
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →