🛡️ ⚛️ Простая, масштабируемая и мощная архитектура для создания готовых к работе приложений React.

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

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

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

https://github.com/alan2207/bulletproof-react

✍️ @React_lib

Как создать автоматический слайдер с помощью React

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


✍️ @React_lib

Как реализовать reCAPTCHA в приложении React

В этой статье мы продемонстрируем, как реализовать reCAPTCHA v2 в приложении React и как проверить пользовательские токены в бэкенде Node.js.

✍️ @React_lib

Полное руководство по React Router: Все, что вам нужно знать

https://ui.dev/react-router-tutorial

✍️ @React_lib

React state with a fragmented store

https://t.me/ru_react_notes/54

✍️ @React_lib

Upgrade a Component to Use Suspense in React 18 in 5 Minutes

https://medium.com/@pkellner/upgrade-a-component-to-use-suspense-in-react-18-in-5-minutes-95f36996e74e

✍️ @React_lib

React

React in 100 Seconds
10 React Hooks Explained // Plus Build your own from Scratch
WASM + React... Easily build video editing software with JS & FFmpeg
Advanced Dropdown Menu - React & CSS Animation Tutorial for Beginners
Invite Only! Use FOMO to grow your app // Exclusive Phone SignIn Tutorial
How to use TypeScript with React... But should you?
Google Sheets… Your Next Database?
Springy Animated Modals // Framer Motion & React Tutorial for Beginners
React Native in 100 Seconds
React Native vs Flutter - I built the same chat app with both
Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar
Next.js 12 is a Beast
Remix is a NEW JavaScript framework you MUST try
10 React Antipatterns to Avoid - Code This, Not That!
This video was made with code. But how?
React Query in 100 Seconds

Доступно на youtube

✍️ @React_lib

Краткое введение в 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