7 способов создать приложение React

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

Способ разработки нужно выбирать, исходя из конечной цели. Вы создаете полноценный веб-продукт или маркетинговый сайт? Будет ли сильная нагрузка на сервер? Сколько разработчиков будут участвовать в создании? Нужно ли использовать компоненты из других приложений? Как приложение будет создано и развернуто?

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

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

@react_tg

🖥 ​ Remotion — программное создание видео с React

Для создания видео вам больше не нужны сложные видеоредакторы. Достаточно использовать remotion в связке с React. Он позволяет создавать видеоролики в формате MP4. А чтобы посмотреть результат разработки видео, можно воспользоваться браузером — там доступен предварительный просмотр.

Подробнее о библиотеке тут:

➡️ Перейти

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

@react_tg

🖥 ​Создание блога с помощью React и RestDB

При создании приложений, требующих серверной части, мы тратим много времени на настройку сервера и базы данных, написание API, с помощью которых интерфейс может отправлять и получать данные на серверную часть и из неё. С помощью RestDB вы можете легко развернуть сервер и создать базу данных. 

В этой статье вы узнаете, как работает RestDB, создав приложение для блога с помощью React и используя RestDB для хранения статей:

➡️ Статья

@react_tg

🖥 react-use

react-use - это библиотека с коллекцией различных полезных React хуков.

Например:
useNetworkState — отслеживает состояние сетевого подключения браузера;
useOrientation — отслеживает состояние ориентации экрана устройства;
usePageLeave — срабатывает, когда мышь покидает границы страницы;

Более 100 хуков!

npm i react-use

🖥 GitHub

@react_tg

🖥 Animated Marker | Framer Motion — маркер на React, анимация реализована с помощью Framer Motion.

#маркер #animation #marker #react #FramerMotion

https://codepen.io/aderaaij/pen/mdyvVwR

@react_tg

📎 Большой список полезных ресурсов для 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