5 библиотек для React-разработчика, которые стоит попробовать

1. React Joyride помогает создать пошаговое руководство и интерактивную экскурсию по приложению.

2. React Beautiful DnD — для перетаскивания (drag and drop) с поддержкой мыши и клавиатуры. Также библиотека поддерживает вертикальные, горизонтальные передвижения и между списками.

3. Enzyme — это библиотека JavaScript, созданная командой AirBnB для тестирования компонентов React.

4. React Spring — популярная библиотека для анимаций.

5. Styled Components используется для стилизации приложений. Позволяет отслеживать компоненты и добавлять только их стили.

#react

@react_tg

​Создаём приложение для чата с помощью ReactJS и Firebase

Небольшое приложение со входом в аккаунт через учётную запись Google с помощью Firebase Authentication (SDK). Это инструмент Firebase, который поддерживает различные методы аутентификации, такие как пароли, номера телефонов, Google, Facebook, Twitter, GitHub и другие.

Все сообщения из чата пользователя хранятся в облаке Firestore. Cloud Firestore сохраняет данные в документах в виде пар ключ-значение.

В этой статье вы найдёте пошаговое руководство, как настроить проект в Firebase и React, и создадите полноценное приложение для чата:

https://www.freecodecamp.org/news/building-a-real-time-chat-app-with-reactjs-and-firebase/

#react

Наглядные примеры использования React Hooks

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

https://css-tricks.com/react-hooks-the-deep-cuts/

#react #фронтенд

@react_tg

​React Spectrum — создание компонентов нового поколения

При переиспользовании компонентов или создании новых на основе старых нам необходимо каждый раз заново разбираться в.логике кода Это неудобно. Согласны?

Решением этой проблемы является React Spectrum от компании Adobe. Это библиотека, в которой логика для создания компонентов уже написана за вас. Вам необходимо только импортировать её к себе в проект и добавить кастомных стилей.

В этой статье вы можете посмотреть, как работает эта библиотека, а также познакомиться с аналогами:

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

#react #фронтенд

@react_tg

​Тестируйте свои React-компоненты с помощью Nightwatch и Testing Library

Nightwatch и Testing Library — два крайне полезных инструмента для тестирования компонентов. Первая библиотека написана на Node.js и позволяет проводить полноценное сквозное тестирование веб-приложений и сайтов, написанных на JS. В свою очередь Testing Library более минималистичный инструмент, созданный специально для тестирования React-компонентов.

В этой статье вы научитесь:

— устанавливать новый проект React с помощью Vite, который также используется внутри Nightwatch для компонентного тестирования;
— подключать и конфигурировать Nightwatch и Testing Library;
— имитировать API запросы с помощью плагина @nightwatch/api-testing;
— писать комплексные React-компонентные тесты, используя Nightwatch и Testing Library.

https://habr.com/ru/companies/otus/articles/719266/

#react #qa

React recursively re-renders child components, but there is a nuance

https://alexsidorenko.com/blog/react-render-children-prop #react

​Как писать комментарии в React: хорошие, плохие и уродливые

Когда дело доходит до написания комментариев, React предлагает синтаксис {/* Comment */}, который может быть немного многословен.

В этой статье вы можете посмотреть, как использовать обычные комментарии JSX и ещё 2 других способа комментирования, которые могут быть лучше:

https://dmitripavlutin.com/react-comments/

#react #фронтенд