🔥 Лучшие бесплатные книги для изучения 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
Одним из наиболее часто задаваемых вопросов разработчиками при создании современных приложений на React является управление состоянием. В этом руководстве вы узнаете, как использовать MobX в качестве библиотеки управления состоянием для React-приложений. Мы будем использовать её для управления состоянием, что поможет нам понять концепцию работы MobX.
▪Читать
▪Зеркало
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥3❤1
7️⃣ правил ESLint, рекомендуемых для проектов TypeScript/React
Комбинация ESLint и Prettier не только значительно сокращает время разработки, но и позволяет вам оптимизировать приложение.
Вот 7 рекомендуемых конфигураций ESLint, которые значительно улучшат ваш проект на React.
▪Читать
@react_tg
Комбинация ESLint и Prettier не только значительно сокращает время разработки, но и позволяет вам оптимизировать приложение.
Вот 7 рекомендуемых конфигураций ESLint, которые значительно улучшат ваш проект на React.
▪Читать
@react_tg
👍15❤1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Квиз по CSS, сделанный с помощью SCSS и библиотек React.js и GSAP.js
#codepen #css #js
https://codepen.io/knyttneve/pen/abybEey
react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍5❤1
React в приложениях Angular может понадобится в двух случаях.
- В экосистеме React есть компонент, на разработку которого, вероятно, уйдут недели, например компонент Timeline.
- Сотрудничество с компанией, использующей React, которой необходимо интегрировать его в существующее приложение.
В этой статье я расскажу, как интегрировать React в обоих сценариях. Начнем с самого простого случая, когда нужно использовать компонент React.
▪Читать
react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥3❤1
Из-за своей гибкой парадигмы React имеет несколько подходов проектирования проекта.
Решения, которые мы принимаем на этапе проектирования и архитектуры проекта, могут либо сократить временные затраты на разработку простого надежного решения, либо затруднить её из-за усложнения реализации.
▪Читать
react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥2❤1