Краткое введение в Elm для React разработчиков

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

https://blog.theodo.com/2021/10/intro-to-elm-for-react-devs/

✍️ @React_lib

Опасности гидратации в React

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

https://www.joshwcomeau.com/react/the-perils-of-rehydration/

✍️ @React_lib

Сравнение Remix vs Next.js

https://remix.run/blog/remix-vs-next

✍️ @React_lib

Как создать редактор кода для 40+ языков с помощью React

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


✍️ @React_lib

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

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

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

✍️ @React_lib

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

Вам сюда: 👉 @frontendnoteschannel

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

В общем добро пожаловать!

Знакомство с SVG-анимацией с помощью React-Native ReAnimated 2

https://medium.com/tribalscale/intro-to-svg-animations-with-react-native-reanimated-2-78bd87438129

✍️ @React_lib

Виртуализация больших списков с помощью библиотеки 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