React

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

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.js — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете фреймворк. Сможете сдать — пройдёте на продвинутый курс по React.js со скидкой. 🚀За 4 месяца вы научитесь продвинутым возможностям Redux, Redux-Saga, Redux-thunk; созданию SPA-приложений и оптимизации их для production; чистому и лаконичному коду с TypeScript; применению интеграционных и юнит-тестов; работе в GraphQL, Apollo, Relay. 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS 📌Хотите протестировать учебный процесс заранее? Регистрируйтесь на бесплатные вебинары: — «Создание быстрых сайтов с Astro.build»: регистрация — «Refine.js - мощный фреймворк разработки внутренних приложений»: регистрация

Повышение производительности приложений React с помощью React Profiler Руководство по измерению и улучшению производительности React-приложений с помощью React Profiler. Сопровождается веб-приложением, которое позволяет легко следить за ходом работы. https://indepth.dev/posts/1497/react-profiler ✍️ @React_lib

Remotion: фреймворк для создания видео в React https://blog.logrocket.com/remotion-a-framework-for-making-videos-in-react/ ✍️ @React_lib

Методы выборки данных с помощью React https://blog.openreplay.com/data-fetching-techniques-with-react ✍️ @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

Underrated React Hooks you’re missing out on https://blog.logrocket.com/underrated-react-hooks-youre-missing-out-on/ ✍️ @React_lib

React Dark Mode Example Реализация элементарного переключателя темной/светлой темы на ReactJS с помощю Class-Components https://codepen.io/montesmakes/pen/WNrPKaO ✍️ @React_lib

Использование глобальной мемоизации в React Когда наши приложения React становятся медленными, мы обычно обращаемся к useMemo, чтобы избежать бесполезной работы по повторному рендерингу. Это молоток, который часто работает хорошо, и с его помощью трудно выстрелить себе в ногу. Но useMemo не является серебряной пулей - иногда он просто добавляет еще больше бесполезной работы вместо того, чтобы сделать ваше приложение быстрее. https://blog.thoughtspile.tech/2022/02/09/react-global-memo/ ✍️ @React_lib

⚛️ 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