🖥 Создание готового к производству приложения 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

🔥 Лучшие бесплатные книги для изучения React в 2023 году

Данная статья посвящена книгам, благодаря которым вы сможете начать своё погружение в библиотеку React прямо сейчас, в 2023 году.

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

@react_tg

🖥 Как использовать ChatGPT в ReactJS

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

Этот AI пишет стихи, знакомится с девушками на Tinder и даже пишет код и исправляет ошибки в чужом коде.

В этой статье мы разберемся - как интегрировать ChatGPT в ваше React приложение.

➡️ Статья

@react_tg

🖥 Создадем проект на React, Vite и TypeScript

В статье мы создадим проект, с использованием React + Vite + TypeScript, плюс кл всему мы поработаем с набором плагинов https://nx.dev/.

➡️ Статья
✔️ Nx

@react_tg