React

⚛️ REACT с нуля за 5 часов! React js урок для начинающих + TypeScript - RED Test Тайм коды: 00:00:00 - Начало 00:10:15 - Дизайн проекта 00:20:00 - Разбор структуры 00:22:50 - Разбор всех хуков 00:43:50 - Создаем структуру 00:46:50 - Кастомный сниппет 00:50:10 - Установка chakra ui 01:00:00 - Делаем верстку на chakra 01:07:00 - Решаем проблему с темной темой 01:23:00 - Стилизация 01:31:00 - Делаем красивое свечение 02:05:00 - Модальное окно для перевода денег 02:16:00 - Делаем форму 02:21:00 - React Hook Form 02:55:40 - Локальная база данных 03:03:00 - React Query 03:09:30 - Instance axios 03:11:50 - User service 03:27:30 - Функционал перевода денег 03:41:00 - Придумываю красивую анимацию после успешной отправки 04:12:00 - ДЕМО 04:17:00 - Спалил одну страницу нового проекта 04:36:50 - Общение с чатом https://www.youtube.com/watch?v=eU1sAk5l4xQ&list=PLXkonRjGXZwzL7roeExkrkaMZ2MWPAaEN&index=9 ✍️ @React_lib

Создаем приложение React с нуля Пошаговое руководство по созданию современного приложения React без шаблонов Вы можете получить доступ ко всей этой статье и всему связанному с ней коду на GitHub. ✍️ @React_lib

Plasmo Framework Plasmo Framework - это SDK для браузерных расширений, созданный хакерами для хакеров. Создайте свой продукт и перестаньте беспокоиться о конфигурационных файлах и странных особенностях создания браузерных расширений. https://docs.plasmo.com/ ✍️ @React_lib

An apparent React bug https://phelipetls.github.io/posts/surprising-react-bug/ ✍️ @React_lib

Используем React для создания менеджера бюджета, чтобы следить за ежедневными расходами https://dev.to/gbadeboife/using-react-to-create-a-budget-manager-59jh ✍️ @React_lib

Почему пользовательские react hooks могут разрушить производительность вашего приложения https://www.developerway.com/posts/why-custom-react-hooks-could-destroy-your-app-performance ✍️ @React_lib

Тестирование компонентов React В этой статье мы расскажем, как использовать библиотеку React Testing Library и Jest для тестирования наших компонентов React. ✍️ @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

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

Проблемы в типизации children https://fettblog.eu/react-types-for-children-are-broken/ ✍️ @React_lib

❗️ Как писать программы, которые пишут код на Typescript за вас? Узнайте и попробуйте сами 15 сентября в 20:00 на открытом уроке «Кодогенерация Typescript» в OTUS. На занятии мы не только научимся писать такие программы, но и попробуем в действии несколько библиотек и приобретем навык чтения абстрактного синтаксического дерева. 👨🏻‍💻Занятие проведет Арсений Высоцкий, тимлид в международной компании, в рамках онлайн-курса «JavaScript Developer. Professional» для тех, кто хочет повысить свой уровень в JS-разработке. 👉 Для регистрации на занятие пройдите вступительный тест: https://otus.pw/JR34/

React Hooks и советы по избежанию бесполезного рендеринга компонентов, применяемого к спискам https://blog.theodo.com/2022/01/react-list-hooks-avoid-render/ ✍️ @React_lib

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

Знакомство с SVG-анимацией с помощью React-Native ReAnimated 2 https://medium.com/tribalscale/intro-to-svg-animations-with-react-native-reanimated-2-78bd87438129 ✍️ @React_lib

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

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

Frontend meetup online 1. Формы: костыли для библиотек или долгострой велосипедов - Фёдор Кирпичёв, Evrone В проектах, над которым работают большое количество людей, есть проблема написания кода в одном стиле. На примере Практикума посмотрим, как это можно улучшить. 2. Как мы вывели Code Style в Практикуме на следующий уровень - Софья Гусева, Яндекс Расскажу, об асинхронных коммуникациях. Покажу как найти события, почему события должны быть разных видов, как добиться эволюционности и что делать дальше. 3. Отдел разработки без бэкенда: растим фронтенд и сохраняем бюджет клиента - Владислав Худяков, Pragmatica Как реализовывать сайты и сервисы, не имея в штате ни одного бэкенд-специалиста. Инструменты, решения и опыт разработки только силами фронта. ➖➖➖ 🗓 14 сентября, начало в 19:00 мск, Среда 🌐 ОНЛАЙН ✅ Регистрация на мероприятие

Как создать редактор кода для 40+ языков с помощью React Онлайн-платформа выполнения кода позволяет писать и сразу запускать код на любимом языке программирования. В идеале можно увидеть вывод программы, например двоичного поиска на JavaScript. Далее ✍️ @React_lib

Сравнение Remix vs Next.js https://remix.run/blog/remix-vs-next ✍️ @React_lib