📎 Большой список полезных ресурсов для React разработчиков.

Сохраняйте себе,чтобы не потерять.

➡️ Список

@react_tg

🖥 refine — open-source headless React-фреймворк для CRUD-приложений. С ним вы можете быстро создать админку или дашбоард, при этом код останется гибким для изменений.✨

refine бесшовно связывается с UI-фреймворками и поставляется с готовыми интеграциями для Ant Design System, Material UI, Mantine и Chakra UI 🚀

🖥 Github

@react_tg

🖥 Создание плавной анимации в React с помощью Framer-Motion

Framer-motion – это популярная библиотека анимации для React, которая позволяет легко создавать плавные анимации на основе жестов.

🖥 Github
➡️ Смотреть пример

#junior #react

@react_tg

🖥 ​react-compress – библиотека, которая позволяет уменьшить размер JS бандла при компиляции проекта.

​react-compress был создан с Brotli и Gzip для пользователей React, которые хотят повысить производительность веб-сайта и уменьшить количество кода JS бандла без усилий.

npm i react-compress --save-dev
---
yarn add react-compress -D

#react
@react_tg

🖥 25 бесплатных ресурсов для изучения React онлайн.


Представляем 25 ресурсов, полезных для изучения React.

В сети огромное количество платных курсов для знакомства с библиотекой React, однако при должной целеустремленности все можно освоить и без финансовых вложений. Рассказываем, как именно.

➡️ Список ресурсов

#react

@react_tg

🖥 Создание готового к производству приложения React с помощью Next.js и Dokku

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

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

➡️ Читать дальше

@react_tg

🖥 Maps и React

React-mapbox-gl — это библиотека, которая позволяет вам использовать Mapbox GL JS, библиотеку JavaScript для интерактивных, настраиваемых векторных карт, в приложении React. Он предоставляет набор компонентов React, упрощающих работу с Mapbox GL JS декларативным способом, позволяя вам указывать поведение и стиль карты в качестве свойств компонента React.

Чтобы начать работу с react-mapbox-gl, вам понадобится токен доступа Mapbox, который вы можете получить, зарегистрировав учетную запись Mapbox. Получив токен доступа, вы можете установить библиотеку с помощью npm или yarn:

npm install react-mapbox-gl mapbox-gl
или

yarn add react-mapbox-gl mapbox-gl

➡️ Читать дальше
🖥 Github

#react
@react_tg

🖥 App Menu With Lock Screen

Адаптивное меню приложения с экраном блокировки, реализованное с помощью React.

#меню #react

📎 Code

@react_tg

🖥 Шпаргалки для опытных разработчиков React, начинающих работу с TypeScript

🖥 Github
✔️ Docs

@react_tg

🔥 Полезные библиотеки React

@th3rdwave/react-navigation-bottom-sheet - Bottom sheet navigator for React Navigation.

🖥 Github

@react_tg

🖥 12 хуков React, которые должен знать каждый разработчик

Хуки React  —  это многократно используемые части кода. Хуки позволяют инкапсулировать побочные эффекты, компоновать и повторно использовать логику.

Для большинства сценариев использования существуют хуки React. Зачем изобретать колесо, если есть такое огромное количество хуков с открытым исходным кодом, доступные уже сегодня?

✔️ Читать дальше

@react_tg

🖥 React-draggable - это полезный компонент для создания перетаскиваемых элементов. 

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

$ npm install react-draggable

▪GIthub
▪Demo

@react_tg

🖥 Использование localStorage с React Hooks

Сегодня мы узнаем, как хранить данные с помощью localStorage, а также о некоторых способах их смешивания в вашем приложении React. Итак, когда нам нужно использовать локальное хранилище? Короткий и простой ответ касается сохранения данных, но это не означает, что все данные вашего приложения должны сохраняться. Нам нужны некоторые критерии для хранения порций информации.

➡️ Читать дальше

@react_tg

🖥 7 полезных библиотек React, которыми вы возможно ещё не пользовались

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

➡️ Читать дальше

@react_tg

🏓 Apexcharts.js

Современные SVG Charts - графическая библиотека для создания интерактивных графиков и визуализаций с помощью простого API.

🔥Фишки:

— Множество готовых к использованию графиков
— Графики адаптируются под разные типы устройств
— Возможность пользовательской настройки

🖥 GitHub:
✔️ Project

#библиотеки #js #react

@react_tg

⭐️ 100 проектов для веб-разработчика, которые помогут в прокачке навыков.

Более 100 копий и альтернатив популярных сайтов с открытым исходным кодом, таких как Airbnb, Amazon, Instagram, Netflix, TikTok, Spotify, WhatsApp, YouTube и т. д. Настоящий кладез проектов для веб-разработчика. Список содержит исходный код, учебные пособия, демонстрационные ссылки, технический стек. Многие из проектов реализованы на React.

✔️ Список
🖥 Clonewars

@react_tg

🖥 Лучшие рекомендации для React разработчиков в 2023 году

React – популярная библиотека JavaScript для создания пользовательских интерфейсов. В последние годы она приобрела еще большую популярность благодаря своей универсальности и возможности использования как для веб-разработки, так и для мобильных приложений. Если вы планируете использовать React в своих проектах в 2023 году, важно следовать рекомендациям, чтобы ваш код был производительным и простым для понимания. Вот некоторые рекомендации, которые следует учитывать при работе с React в 2023 году.

➡️ Читать дальше

@react_tg

🖥 Minimal TypeScript Crash Course For React

Ускоренный бесплатный курс TypeScript для React
С интерактивными упражнениями по коду

На сегодняшний день почти все вакансии React требуют знания TypeScript, советуем пройти этот бесплатный курс для прокачки навыков.

✔️ Курс
🔥 Шпаргалки по React + TypeScript

@react_tg

✅ Lottie by Airbnb — легко добавляйте высококачественную анимацию в любое собственное приложение

Это библиотека для iOS, Android и React Native, которая визуализирует анимацию After Effects в реальном времени, позволяя приложениям использовать анимацию так же легко, как и статические изображения.

Чтобы начать, установите Bodymovin - это плагин для After Effects, который может экспортировать анимацию в формате данных json для использования Lottie.

🖥 Github

@react_tg

🖥 Оптимизация разработки на React.js: Советы и рекомендации экспертов

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

➡️ Читать дальше

@react_tg

🖥 Руководство по применению паттерна Event Bus в архитектуре React

Кратко о целях

- С нуля напишем паттерн передачи событий Event Bus (пер. шина событий), содержащий всего 60 строк!
- Рассмотрим наилучший способ применения Event Bus в React.
- Используем Event Bus в демо-примере с Google Maps API.

Как-то в процессе работы я натолкнулся на один интересный пример с Event Bus  — упрощенный модуль, организующий процесс логирования для аналитики в веб-приложениях глобального масштаба. Он придает большой базе кода предельную ясность. В статье представлены результаты изучения этого эффективного паттерна проектирования.

Приступим!

➡️ Читать дальше

@react_tg