🌐 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
Коллекция паттернов проектирования React, советы и рекомендации по их использованию.
📌 Статья
react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👍4❤2🥰1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥7❤2
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/supah/pen/rNKraQJ
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥6❤4
Дан следующий код:
import { useState, useEffect, useRef } from "react";
function App() {
const [inputValue, setInputValue] = useState("");
const previousInputValue = useRef("");
return (
<>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<h2>Current Value: {inputValue}</h2>
<h2>Previous Value: {previousInputValue.current}</h2>
</>
);
}
Ответ:
function App() {
const [inputValue, setInputValue] = useState("");
const [prevInputValue, setPrevInputValue] = useState("");
const prevRef = useRef();
useEffect(() => {
prevRef.current = inputValue;
}, [inputValue]);
return (
<>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(prev => {
setPrevInputValue(prev); // Предыдущее состояние
return e.target.value; // Устанавливаем текущее
})}
/>
<h2>Current Value: {inputValue}</h2>
<h2>Previous Value: {prevInputValue}</h2>
<h2>Previous Value vs Ref: {prevRef.current}</h2>
</>
);
}Можно ли обойтись без использования
useEfect? 👍 если нравится такой формат вопрос.
Пишите свое решение в комментариях👇
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍37❤5🔥4
React Hooks подобны специям на вашей кухне, они придают аромат вашему блюду и делают его еще вкуснее.
Так же, как и специи, разные крючки используются по-разному и могут значительно повысить функциональность ваших компонентов. В этой статье мы рассмотрим пять наиболее часто используемых React Hooks и исследуем их применение и преимущества на примерах кода и реальных примерах использования.
▪Читать
▪Зеркало
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥3❤2🤩1