React JS

🚀 Responsive React Dashboard with Tailwind - отзывчивый UI панели управления. Стильная и красивая реализация в тёмной теме.

https://codepen.io/dilums/pen/ZEBowxX

@react_tg

❤4👍4🔥4👎2

5.03K viewsedited 09:41

React JS

🌐 Go.js – библиотека JavaScript для создания интерактивных диаграмм

Эта библиотека позволяет создавать графики и диаграммы с помощью языков 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

5.62K views07:50

React JS

📌Гексагональная архитектура в React

Автор рассказывает о интересной концепции и ее применении в React приложениях.

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

▪Гексагональная архитектура в React
▪Hexagonal Architecture

@react_tg

👍8🔥3❤1🤡1

5.8K viewsedited 12:54

React JS

0:43

This media is not supported in your browser

VIEW IN TELEGRAM

🖥

Пользователь реддита подключил ChatGTP к фреймворку React.

Мы уже писали про chatgpt ранее, теперь посмотрим как его работа выглядит на практике.

Чат-бот лихо пишет приложения из текстового описания на английском. Киберпанк в деле.

▪Emacs-gpt
▪Коллекция проектов на гите по скрещиванию Chatgpt и React.

@react_tg

Please open Telegram to view this post

VIEW IN TELEGRAM

❤11🔥5👍3

5.85K views10:50

React JS

🚀 Как сократить время начальной загрузки веб-приложения

В этой статье речь пойдет о способах оптимизации времени начальной загрузки веб-приложений. При посещении сайта на удовлетворенность конечного пользователя существенно влияет время ожидания до первого взаимодействия с контентом.

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

📌 Читать

@react_tg

👍16❤2🔥2

5.03K views12:02

React JS

📌Гексагональная архитектура в React Автор рассказывает о интересной концепции и ее применении в React приложениях. Основной идеей гексагональной архитектуры или чистой архитектуры и всех других подобных парадигм является концепция отделения предметной области…

🖥

Пишем приложение на React менее чем за 30 минут

В сегодняшней статье мы шаг за шагом создадим небольшое, но многофункциональное адаптивное приложение React с нуля быстрым и удобным для разработчиков способом, используя Material UI.

▪Читать
▪Зеркало
▪Код

@react_tg

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥14❤2👍2👎1

5.56K views09:27

React JS

🖥

Совместное использование кода в приложениях React и React Native.

React и React Native помогают сблизить веб и мобильную разработку, улучшая опыт как пользователей, так и разработчиков.

Некоторые продвинутые команды уже создают полноценную кроссплатформенную систему проектирования с помощью React и React Native (видеоурок).

▪Читать
▪Код

@react_tg

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥10❤4👍4

5.79K views08:48

React JS

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

🔥20👍5❤2

5.31K views08:01

React JS

🖥

Создание анимации в React с помощью Framer Motion

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

4.79K viewsedited 08:06

React JS

🖥

Управление состоянием в React с помощью MobX 2023

Одним из наиболее часто задаваемых вопросов разработчиками при создании современных приложений на React является управление состоянием. В этом руководстве вы узнаете, как использовать MobX в качестве библиотеки управления состоянием для React-приложений. Мы будем использовать её для управления состоянием, что поможет нам понять концепцию работы MobX.

▪Читать
▪Зеркало

@react_tg

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8🔥3❤1

4.89K views19:07

React JS

7️⃣ правил ESLint, рекомендуемых для проектов TypeScript/React

Комбинация ESLint и Prettier не только значительно сокращает время разработки, но и позволяет вам оптимизировать приложение.

Вот 7 рекомендуемых конфигураций ESLint, которые значительно улучшат ваш проект на React.

▪Читать

@react_tg

👍15❤1🔥1

5.21K views10:01

React JS

0:15

This media is not supported in your browser

VIEW IN TELEGRAM

⭐

️ Quiz App with React + GSAP

Квиз по 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

4.78K views07:46

React JS

🖥

React resizable panels

Готовый Код Компонентов React для макетов панелей с настраиваемым размером.

🖥

Github

#group #layout #panel #react #resizable

react_tg

Please open Telegram to view this post

VIEW IN TELEGRAM

👍12🔥5❤1👎1

4.66K views08:30

React JS

9 полезных инструментов для разработки на React

В данной статье вы сможете узнать о 9-и инструментах React, которые вам стоит использовать для разработки веб-приложений.

▪Читать
▪Зеркало

react_tg

👍10👎3❤2🌭2🔥1

4.5K views08:47

React JS

🚀

Как использовать React в приложениях Angular

React в приложениях Angular может понадобится в двух случаях.

- В экосистеме React есть компонент, на разработку которого, вероятно, уйдут недели, например компонент Timeline.

- Сотрудничество с компанией, использующей React, которой необходимо интегрировать его в существующее приложение.
В этой статье я расскажу, как интегрировать React в обоих сценариях. Начнем с самого простого случая, когда нужно использовать компонент React.

▪Читать

react_tg

Please open Telegram to view this post

VIEW IN TELEGRAM

👍7🔥3❤1

4.16K views10:20

React JS

🖥

Общие шаблоны и нюансы использования React Query

Из-за своей гибкой парадигмы React имеет несколько подходов проектирования проекта.

Решения, которые мы принимаем на этапе проектирования и архитектуры проекта, могут либо сократить временные затраты на разработку простого надежного решения, либо затруднить её из-за усложнения реализации.

▪Читать

react_tg

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8🔥2❤1

4.28K views08:54

React JS

🖥

React Patterns

Коллекция паттернов проектирования React, советы и рекомендации по их использованию.

📌 Статья

🖥

Сайт

🖥

Github

react_tg

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥13👍4❤2🥰1

4.7K views09:42

React JS

This media is not supported in your browser

VIEW IN TELEGRAM

🖥

Sliding Image Track — реализация изящного cлайдера с эффектом параллакса.

📌 Код

react_tg

Please open Telegram to view this post

VIEW IN TELEGRAM

👍9🔥7❤2

4.21K views09:27

React JS

This media is not supported in your browser

VIEW IN TELEGRAM

🖥

Elastic Accordion GSAP — галерея с «эластичным» эффектом переключения.

https://codepen.io/supah/pen/rNKraQJ

@react_tg

Please open Telegram to view this post

VIEW IN TELEGRAM

👍18🔥6❤4

4.28K viewsedited 15:01

React JS

🖥

Дополнить программу так, чтобы в previousInputValue сохранялось предыдущее введенное значение, с помощью useRef?

Дан следующий код:

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

4.51K views10:50

About

Blog

Apps

Platform