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 UI и Vue UI библиотеки, шаблоны HTML, CSS и многое другое в одном Notion файле. Вам нужно только выбрать категорию.

Например, если вы забывали, где найти бесплатные шрифты, то здесь собрано 37 полезных ресурсов для любого проекта:

https://surffers.notion.site/surffers/The-Best-Web-Development-Tools-2cf90734ead54d748edaf706120728d8

#web

@react_tg

​Zustand как альтернатива Redux

Управление состоянием в React за последнее время значительно меняется. Одни перешли на Redux, другие — используют сторонние библиотеки, например: Zustand или Recoil.

Библиотека Zustand была разработана создателями Jotai и React-spring и позволяет легко управлять состоянием приложения, не усложняя разработку обилием кода.

В этом видео рассматривается, что такое Zustand, работа с этой библиотекой и оптимизация рендера компонентов:

https://youtu.be/l6WDSN-_HSI

#фронтенд

@react_tg

Выбор CSS макета: Grid или Flexbox?

В целом Grid и Flex решают одни и те же задачи при разработке макета, но между ними всё же есть отличия:

— Flexbox является популярной системой вёрстки, но она одномерна: разработчики могут работать только со столбцами или строками.
— CSS Grid считается двумерной системой компоновки, с помощью которой можно передвигать элементы между строками и рядами.

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

Источник: https://odva.pro/blog/flex_or_grid/

#web #css

@react_tg

6 проектов на ReactJS для начинающих

В этом видеоуроке подробно разбирается, как создать простые проекты уровня Junior, а именно:

— счётчик,
— модальное окно,
— простой опросник,
— конвертер валют,
— коллекция фотографий,
— список пользователей.

Ссылка на видео: https://youtu.be/eS0GL73tkmw

#reactjs


@react_tg

Сборник шпаргалок для фронтенд-разработчика

В этих шпаргалках собраны не просто методы, функции и базовый синтексис, но и их подробное объяснение с примерами.

— Шпаргалка по тегам HTML5
— Шпаргалка по методам JavaScript для работы с DOM
— Шпаргалка по работе с медиа в браузере
— Шпаргалка по HTTP-заголовкам, связанным с безопасностью
— Шпаргалка по доступности веб-приложений
— Шпаргалка по Internationalization API
— Шпаргалка по Temporal API и Dayjs

Сохраняйте себе в закладки, чтобы не потерять.

#js #html #фронтенд

DevSamples — полезная коллекции чужого кода

С её помощью вы можете найти кусок, который будет полезен именно вам в вашем проекте — его можно свободно скопировать и вставить

Основное внимание сервис уделяет исходным кодам для веб-разработчиков

Стоимость: #бесплатно

#web #css #шпаргалка

@react_tg

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

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

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

#react #фронтенд

@react_tg

​3 полезных ресурса для веб-разработки

1. Compressor.io — веб-приложение, которое уменьшает размер изображения без потери качества.

2. MockFlow — онлайн-инструмент для создания макетов и прототипов веб-сайтов и мобильных приложений. Не требует установки и прост в использовании: просто перетащите нужные формы и элементы на доску, а затем настройте их.

3. Flatiron — одна из крупнейших библиотек иконок для проектов.

#веб

​Креативное оформление списков

Мы очень часто используем списки, чтобы структурировать различную информацию. В этой статье вы найдёте подборку интересных вариантов оформления списков, которые вы можете использовать у себя на сайте, а также рассмотрите в каком случае будет наиболее удобен тот или иной вид списка:

https://web.dev/creative-list-styling/

React Labs: над чем работает команда React — март 2023 г.

1️⃣ React Server Components
2️⃣ Asset Loading
3️⃣ Static Server Rendering Optimizations
4️⃣ React Optimizing Compiler
5️⃣ Offscreen Rendering
6️⃣ Transition Tracing

Читать

@react_tg

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

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

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

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

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

#react #фронтенд

@react_tg

Полезная библиотека для понимания работы JS

js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:

https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

#js