React with TypeScript

Возможности TypeScript и опыт разработчиков отлично сочетаются с React, но начало работы может оказаться запутанным.

Как лучше всего типизировать реквизиты компонентов? Что это за странные ошибки useRef?
Именно для этого и предназначен данный учебник по React с TypeScript!
Начиная с самого начала внедрения поддержки TS в проект React, вы вскоре научитесь правильно вводить хуки и осваивать компоненты. Вы узнаете все, что нужно для продуктивной работы с React и TypeScript.

Темы учебника включают:

Чтение определений типов React для отладки ошибок и обеспечения правильного использования
Определение реквизитов для пользовательских компонентов и компонентов функций React.FC.
Использование умозаключений TypeScript в своей работе
Поддержка дочерних компонентов
Типизация и переопределение обработчиков событий
Использование ComponentProps для извлечения свойств из импортированных компонентов или элементов HTML DOM
Понимание API и типизация useState, useCallback, useEffect и других крючков React Hooks. К концу семинара вы будете уверенно использовать React с TypeScript в своих собственных проектах!

https://www.totaltypescript.com/tutorials/react-with-typescript


✍️ @React_lib

React: как сделать динамический суффикс в <input />, который будет двигаться вместе с набранным текстом

Задача
Необходимо сделать input с помощью React, в котором, после текста отображается какое то значение. Будем называть это значение суффиксом.

Условия
Cуффикс не должен подмешиваться к самому значению инпута, т.e. чтобы мы на каждый change эвент не брали строку и не отделяли этот суффикс, а потом все снова складывали

Суффикс во время ввода должен всегда быть виден

Суффикс может быть другим react элементом (например картинкой, или текстом)

Если мы передадим во время работы приложения новое значение пропа суффикса -- он должен нормально перерендериться, инпут не должен сломаться

Суффикс нельзя выделить, скопировать, как либо с ним провзаимодействовать. Он не должен перекрывать поле инпута

Поведение инпута никак не должно отличаться от обычного

https://habr.com/ru/articles/743768/

✍️ @React_lib

Телепортация в React: Позиционирование, стекирование контекста и порталы

Рассмотрим, как работает CSS-позиционирование, что такое контекст стекирования, как избавиться от overflow:hidden с помощью CSS, почему мы не можем сделать все с помощью CSS и нуждаемся в порталах, как работают порталы

https://www.developerway.com/posts/positioning-and-portals-in-react


✍️ @React_lib

Переход от useState к useReducer в React Hooks

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

https://hackernoon.com/migrating-from-usestate-to-usereducer-in-react-hooks

✍️ @React_lib

Создание лучшего и более быстрого представления кода

Новая версия GitHub Code View предоставляет пользователям множество новых возможностей для улучшения качества чтения и изучения кода, и мы преодолели ряд уникальных технических препятствий, чтобы предоставить эти возможности без ущерба для производительности.

https://github.blog/2023-06-21-crafting-a-better-faster-code-view/

✍️ @React_lib

Лучший путь обучения React с помощью серверных компонентов

Мне всегда нравилось делиться своими знаниями. Когда я люблю язык, библиотеку или фреймворк, то больше, чем изучать каждую мельчайшую деталь, я думаю о том, как я могу помочь людям изучить его и полюбить так же сильно, как я.

https://scastiel.dev/better-learning-path-react

✍️ @React_lib

Как работает функция useState() внутри React?

Наверняка вы знакомы с функцией useState() в React. В базовом приложении "Счетчик" показано, как useState() позволяет нам добавлять состояние в наш компонент. В этом эпизоде мы выясним, как работает функция useState() внутри React, заглянув в ее исходный код.

https://jser.dev/2023-06-19-how-does-usestate-work/

✍️ @React_lib

Как повторно использовать и совместно использовать компоненты React в 2023 году: Пошаговое руководство

Узнайте, насколько простым может быть совместное использование кода с помощью интуитивно понятного подхода Bit к многократно используемым компонентам React.

https://itnext.io/how-to-reuse-and-share-react-components-in-2023-a-step-by-step-guide-85642e543afa

✍️ @React_lib

Построение фильтра поиска в реальном времени в React: Пошаговое руководство

Когда я начал работать с React, одной из распространенных проблем, с которыми я столкнулся, была реализация функции фильтра поиска в реальном времени. Эта функция обновляет отображаемые элементы по мере ввода пользователем текста и показывает все элементы заново, если поисковый фильтр пуст. Поэтому в этом руководстве я расскажу вам о том, как создать эту функцию в React. Мы начнем со списка жестко заданных элементов, а затем перейдем к списку элементов, полученных из API.

https://dev.to/alais29/building-a-real-time-search-filter-in-react-a-step-by-step-guide-3lmm

✍️ @React_lib

Расставание с SVG-in-JS

В декабре прошлого года вышла статья "Почему мы отказываемся от CSS-in-JS", в которой описывалось, почему больше не нужно использовать CSS в JS-бандлах. Однако CSS - не единственное, что попадает в JS-бандлы в наши дни, - SVG тоже попадают, как показывает Джейсон Миллер, автор Preact.

https://kurtextrem.de/posts/svg-in-js

✍️ @React_lib