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 #фронтенд

​Самый безопасный способ скрыть ключи API при использовании React

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

Подробнее:

https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/

#фронтенд #react

🔥 Дайджест полезных материалов из мира React за неделю

Почитать:
— Удобные формы для Vue 3
— Глубокий JS. В память о типах и данных
— React + Three.js. Создаём собственный 3D шутер. Часть 2
— Лучшие ресурсы чтобы выучить Git и Github
— Поиск удобных мест для жизни в Москве на GitHub Pages с помощью DuckDB в браузере
— Добавление WebAuthn в веб-приложение
— Уроки рисования красных квадратов
— Интерактивный парсер web страниц
— Webpack vs esbuild — уже можно использовать в production?
— Enhancing UX: Leveraging Nextjs Router Events for Form Manipulation
— 10 Essential React Hooks You Should Know
— Gpen Demystified: Expert Insights from Dumpsarena
— Optimizing JavaScript with Memoization: A Deep Dive into Boosting Performance:
— How to handle loading screens in Next JS
— Bape Sta White: A Classic Sneaker Icon
— Utilising createPortal to build walkthrough experiences in React applications
— VSCode Plugin For Feature Flags
— Protected Routes with React.js and Next.js
— 3D Toggle Switch

Посмотреть:
🌐 How Is This Code Safe? (⏱ 06:31)
🌐 NEW TypeScript Simplified Course - 24 Hour Sale (⏱ 07:18)
🌐 I Can’t Believe Chrome Hides This From You (⏱ 01:00)

Хорошего дня!

#digest #react

@react_tg