This media is not supported in your browser
VIEW IN TELEGRAM
Современные SVG Charts - графическая библиотека для создания интерактивных графиков и визуализаций с помощью простого API.
🔥Фишки:
— Множество готовых к использованию графиков
— Графики адаптируются под разные типы устройств
— Возможность пользовательской настройки
✔️ Project
#библиотеки #js #react
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥7❤2
Более 100 копий и альтернатив популярных сайтов с открытым исходным кодом, таких как Airbnb, Amazon, Instagram, Netflix, TikTok, Spotify, WhatsApp, YouTube и т. д. Настоящий кладез проектов для веб-разработчика. Список содержит исходный код, учебные пособия, демонстрационные ссылки, технический стек. Многие из проектов реализованы на React.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26❤3👍3
React – популярная библиотека JavaScript для создания пользовательских интерфейсов. В последние годы она приобрела еще большую популярность благодаря своей универсальности и возможности использования как для веб-разработки, так и для мобильных приложений. Если вы планируете использовать React в своих проектах в 2023 году, важно следовать рекомендациям, чтобы ваш код был производительным и простым для понимания. Вот некоторые рекомендации, которые следует учитывать при работе с React в 2023 году.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15👎8🥱2❤1🔥1👏1
Ускоренный бесплатный курс TypeScript для React
С интерактивными упражнениями по коду
На сегодняшний день почти все вакансии React требуют знания TypeScript, советуем пройти этот бесплатный курс для прокачки навыков.
✔️ Курс
🔥 Шпаргалки по React + TypeScript
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Это библиотека для iOS, Android и React Native, которая визуализирует анимацию After Effects в реальном времени, позволяя приложениям использовать анимацию так же легко, как и статические изображения.
Чтобы начать, установите Bodymovin - это плагин для After Effects, который может экспортировать анимацию в формате данных json для использования Lottie.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍5❤2
Это руководство познакомит вас с основными проблемами каждого разработчика React. Вам просто необходимо знать о них для того, чтобы быть в курсе, как справиться с этими проблемами. Советы из статьи, помогут вам в разработке ваших компонентов и организации вашего проекта. После этого введения, вам будут представлены рекомендации для ReactJS разраюотки, которые включают теоретические и практические советы и примеры кода.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍2❤1🤩1
Кратко о целях
- С нуля напишем паттерн передачи событий Event Bus (пер. шина событий), содержащий всего 60 строк!
- Рассмотрим наилучший способ применения Event Bus в React.
- Используем Event Bus в демо-примере с Google Maps API.
Как-то в процессе работы я натолкнулся на один интересный пример с Event Bus — упрощенный модуль, организующий процесс логирования для аналитики в веб-приложениях глобального масштаба. Он придает большой базе кода предельную ясность. В статье представлены результаты изучения этого эффективного паттерна проектирования.
Приступим!
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥3❤1
🔥 Лучшие бесплатные книги для изучения React в 2023 году
Данная статья посвящена книгам, благодаря которым вы сможете начать своё погружение в библиотеку React прямо сейчас, в 2023 году.
➡️ Читать дальше
@react_tg
Данная статья посвящена книгам, благодаря которым вы сможете начать своё погружение в библиотеку React прямо сейчас, в 2023 году.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥5❤1
This media is not supported in your browser
VIEW IN TELEGRAM
✔️Анимированный QR-код — созданный с помощью Pug, Stylus и библиотек React.js и GSAP.js. Интересная реализация.
https://codepen.io/jh3y/pen/NWwROzx
@react_tg
https://codepen.io/jh3y/pen/NWwROzx
@react_tg
🔥11👍4❤2
ChatGPT — это чат-бот с искусственным интеллектом, разработанный компанией OpenAI и способный работать в диалоговом режиме, поддерживаюший запросы на естественных языках. ChatGPT — большая языковая модель, для тренировки которой использовались методы обучения с учителем и обучения с подкреплением,
Этот AI пишет стихи, знакомится с девушками на Tinder и даже пишет код и исправляет ошибки в чужом коде.
В этой статье мы разберемся - как интегрировать ChatGPT в ваше React приложение.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥20👍6❤1👎1🌭1
В статье мы создадим проект, с использованием React + Vite + TypeScript, плюс кл всему мы поработаем с набором плагинов https://nx.dev/.
✔️ Nx
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥4❤1
🪨 Разбор подводных камней React, с которыми сталкиваются разработчики
Я обучал начинающих разработчиков и не понаслышке знаю, с какими проблемами они обычно сталкиваются.
Предлагаю заняться разбором самых распространенных ошибок, что будет полезно как новичкам, так и более опытным разработчикам, желающим расширить свои знания.
▪ Читать дальше
@react_tg
Я обучал начинающих разработчиков и не понаслышке знаю, с какими проблемами они обычно сталкиваются.
Предлагаю заняться разбором самых распространенных ошибок, что будет полезно как новичкам, так и более опытным разработчикам, желающим расширить свои знания.
▪ Читать дальше
@react_tg
🔥20👍10❤3
This media is not supported in your browser
VIEW IN TELEGRAM
🚀 Responsive React Dashboard with Tailwind - отзывчивый UI панели управления. Стильная и красивая реализация в тёмной теме.
https://codepen.io/dilums/pen/ZEBowxX
@react_tg
https://codepen.io/dilums/pen/ZEBowxX
@react_tg
❤4👍4🔥4👎2
🌐 Go.js – библиотека JavaScript для создания интерактивных диаграмм
Эта библиотека позволяет создавать графики и диаграммы с помощью языков JavaScript и TypeScript. С помощью Go.js можно создавать блок-схемы, различные типы диаграмм, а также инструменты проектирования и планирования.
Ввод данных в Go.js осуществляется с помощью инструментов, которые можно настроить и расширить, чтобы предоставить вашим пользователям необходимое взаимодействие. Go.js реализует ряд распространенных команд и горячих клавиш, которые можно выбирать самостоятельно.
Другие важные особенности Go.js – это привязка и синхронизация данных, а также совместимость с такими популярными фреймворками, как Vue, React и Angular.
▪ Go.js React
▪ Go.js
@react_tg
Эта библиотека позволяет создавать графики и диаграммы с помощью языков JavaScript и TypeScript. С помощью Go.js можно создавать блок-схемы, различные типы диаграмм, а также инструменты проектирования и планирования.
Ввод данных в Go.js осуществляется с помощью инструментов, которые можно настроить и расширить, чтобы предоставить вашим пользователям необходимое взаимодействие. Go.js реализует ряд распространенных команд и горячих клавиш, которые можно выбирать самостоятельно.
Другие важные особенности Go.js – это привязка и синхронизация данных, а также совместимость с такими популярными фреймворками, как Vue, React и Angular.
npm install --save gojs-react▪ Go.js React
▪ Go.js
@react_tg
🔥8👍3❤2
📌Гексагональная архитектура в React
Автор рассказывает о интересной концепции и ее применении в React приложениях.
Основной идеей гексагональной архитектуры или чистой архитектуры и всех других подобных парадигм является концепция отделения предметной области от логики инфраструктуры. Другими словами, установление границ между специфическими бизнес функциями.
▪Гексагональная архитектура в React
▪Hexagonal Architecture
@react_tg
Автор рассказывает о интересной концепции и ее применении в React приложениях.
Основной идеей гексагональной архитектуры или чистой архитектуры и всех других подобных парадигм является концепция отделения предметной области от логики инфраструктуры. Другими словами, установление границ между специфическими бизнес функциями.
▪Гексагональная архитектура в React
▪Hexagonal Architecture
@react_tg
👍8🔥3❤1🤡1
This media is not supported in your browser
VIEW IN TELEGRAM
Мы уже писали про chatgpt ранее, теперь посмотрим как его работа выглядит на практике.
Чат-бот лихо пишет приложения из текстового описания на английском. Киберпанк в деле.
▪Emacs-gpt
▪Коллекция проектов на гите по скрещиванию Chatgpt и React.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
❤11🔥5👍3
🚀 Как сократить время начальной загрузки веб-приложения
В этой статье речь пойдет о способах оптимизации времени начальной загрузки веб-приложений. При посещении сайта на удовлетворенность конечного пользователя существенно влияет время ожидания до первого взаимодействия с контентом.
Иногда бывает трудно добиться значимой оптимизации для масштабных/развивающихся приложений. Однако, внимательно изучив код и используя проверенные методы оптимизации производительности, можно повысить эффективность приложения при загрузке. Рассмотрим несколько подходов.
📌 Читать
@react_tg
В этой статье речь пойдет о способах оптимизации времени начальной загрузки веб-приложений. При посещении сайта на удовлетворенность конечного пользователя существенно влияет время ожидания до первого взаимодействия с контентом.
Иногда бывает трудно добиться значимой оптимизации для масштабных/развивающихся приложений. Однако, внимательно изучив код и используя проверенные методы оптимизации производительности, можно повысить эффективность приложения при загрузке. Рассмотрим несколько подходов.
📌 Читать
@react_tg
👍16❤2🔥2
React JS
📌Гексагональная архитектура в React Автор рассказывает о интересной концепции и ее применении в React приложениях. Основной идеей гексагональной архитектуры или чистой архитектуры и всех других подобных парадигм является концепция отделения предметной области…
В сегодняшней статье мы шаг за шагом создадим небольшое, но многофункциональное адаптивное приложение React с нуля быстрым и удобным для разработчиков способом, используя Material UI.
▪Читать
▪Зеркало
▪Код
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14❤2👍2👎1
React и React Native помогают сблизить веб и мобильную разработку, улучшая опыт как пользователей, так и разработчиков.
Некоторые продвинутые команды уже создают полноценную кроссплатформенную систему проектирования с помощью React и React Native (видеоурок).
▪Читать
▪Код
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10❤4👍4
This media is not supported in your browser
VIEW IN TELEGRAM
🎨 React HSL Slider
Слайдер выбора цвета, реализован с помощью React. Использует цвета из библиотеки w3color.js
#слайдер #React #w3color
https://codepen.io/jh3y/pen/gOwegKr
@react_tg
Слайдер выбора цвета, реализован с помощью React. Использует цвета из библиотеки w3color.js
#слайдер #React #w3color
https://codepen.io/jh3y/pen/gOwegKr
@react_tg
🔥20👍5❤2
Framer Motion — это библиотека анимации React с открытым исходным кодом, которая предоставляет пользователям несложный API для создания анимации, управления свойствами анимации и обработки пользовательских действий.
В этой статье с кодом, вы узнаете как легко добавить его в приложение React и создать красивую анимацию за несколько шагов.
npm create-react-app framer▪ Читать
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥3❤1