🚀 Создание интерактивных графиков и диаграмм в React

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

🔹 Почему это важно?

Интерактивные графики:
- делают данные визуально привлекательными,
- помогают пользователям находить скрытые закономерности,
- поддерживают взаимодействие (наведение, клики, масштабирование).

🔹 Популярные библиотеки для визуализации в React

1. Recharts
Простая в использовании библиотека с широким выбором графиков. Подходит для большинства стандартных задач.

Пример использования:

import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';

const data = [
  { name: 'Янв', uv: 400 },
  { name: 'Фев', uv: 300 },
  { name: 'Март', uv: 500 },
];

const MyChart = () => (
  <LineChart width={400} height={300} data={data}>
    <CartesianGrid stroke="#f5f5f5" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Line type="monotone" dataKey="uv" stroke="#ff7300" />
  </LineChart>
);

export default MyChart;
     

2. Chart.js
Очень гибкая библиотека для создания сложных графиков. Подходит для интерактивных приложений.

Пример использования:

import { Line } from 'react-chartjs-2';

const data = {
  labels: ['Янв', 'Фев', 'Март'],
  datasets: [
    {
      label: 'Продажи',
      data: [400, 300, 500],
      borderColor: 'rgba(75, 192, 192, 1)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
    },
  ],
};

const MyChart = () => <Line data={data} />;

export default MyChart;
     

3. D3.js
Мощнейшая библиотека для сложных и кастомных визуализаций. Требует больше знаний, но позволяет реализовать практически любые идеи.

Пример использования:

import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';

const BarChart = () => {
  const chartRef = useRef();

  useEffect(() => {
    const data = [10, 20, 30, 40, 50];
    const svg = d3
      .select(chartRef.current)
      .attr('width', 400)
      .attr('height', 200);

    svg
      .selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('x', (_, i) => i * 50)
      .attr('y', (d) => 200 - d * 4)
      .attr('width', 40)
      .attr('height', (d) => d * 4)
      .attr('fill', 'teal');
  }, []);

  return <svg ref={chartRef}></svg>;
};

export default BarChart;

🔹 Фишки интерактивных графиков

- События взаимодействия: Вывод данных при наведении, фильтрация или детализация.
- Динамическое обновление: Применение real-time данных.
- Масштабирование и прокрутка: Особенно полезно для больших наборов данных.
- Анимации: Улучшают пользовательский опыт (например, при загрузке данных).

🔹 Что выбрать?

- Recharts: для быстрых и простых решений.
- Chart.js: для сложных, но стандартных графиков.
- D3.js: для кастомных визуализаций и нестандартных задач.

🎯 Заключение

Интерактивные графики помогут сделать ваше приложение не только красивым, но и полезным😊

ReactJs Daily | #pro

🚀 Динамические поля с React Hook Form и Controller

Если в вашем приложении нужно создавать формы с динамическими полями, то React Hook Form в сочетании с useFieldArray и Controller станет идеальным решением. Этот подход особенно полезен, когда вы работаете с управляемыми компонентами или сторонними библиотеками UI

🔹Что мы будем делать?

- Создадим форму с динамическими полями.
- Используем useFieldArray для управления массивом данных.
- Подключим контролируемые компоненты через Controller.

🔹Реализация

import React from 'react';
import { useForm, useFieldArray, Controller } from 'react-hook-form';

function DynamicForm() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      users: [{ name: '', age: '' }],
    },
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'users',
  });

  const onSubmit = (data) => {
    console.log(data); 
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <div key={field.id} style={{ marginBottom: '10px' }}>
          <Controller
            name={`users.${index}.name`}
            control={control}
            render={({ field }) => (
              <input {...field} placeholder="Имя" />
            )}
          />
          <Controller
            name={`users.${index}.age`}
            control={control}
            render={({ field }) => (
              <input {...field} placeholder="Возраст" type="number" />
            )}
          />
          <button type="button" onClick={() => remove(index)}>
            Удалить
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append({ name: '', age: '' })}>
        Добавить поле
      </button>
      <button type="submit">Отправить</button>
    </form>
  );
}

export default DynamicForm;

🔹 Как это работает?

1. useFieldArray
- Позволяет управлять массивами данных, например, добавлять или удалять элементы.
- fields — текущие элементы массива.
- append — добавляет новый объект в массив.
- remove — удаляет элемент по индексу.

2. Controller
- Используется для интеграции управляемых компонентов.
- Автоматически связывает value, onChange и другие свойства с вашим компонентом.

3. Динамические поля
- С каждым вызовом append добавляется новый объект с полями, соответствующими вашему массиву.
- При удалении элемент удаляется из массива и формы.

🔹 Преимущества подхода

- Простота работы с массивами данных.
- Гибкость: подходит для любых сторонних компонентов.
- Производительность: React Hook Form оптимизирован для минимизации ререндеров.

🎯 Заключение

React Hook Form это удобный и мощный инструмент для работы с полями. Это упрощает работу с управляемыми компонентами и добавляет гибкость вашему коду. Попробуйте интегрировать эту функциональность в своих проектах!

ReactJs Daily | #begginers

🚀 Как сделать React-приложение оффлайн-совместимым

Хотите, чтобы ваше React-приложение работало даже без интернета? Это возможно благодаря Service Workers и стратегии кэширования. Оффлайн-совместимость важна для улучшения пользовательского опыта, особенно если ваши пользователи работают в условиях нестабильного соединения.

🔹Основные шаги

1. Используйте Create React App
CRA имеет встроенную поддержку Service Worker, которая активируется при продакшен-сборке.

- Убедитесь, что файл service-worker.js настроен.
- В index.js закомментируйте строку:

serviceWorker.register();

После этого приложение автоматически кэширует статические файлы.

2. Кэширование данных
Для динамических данных используйте библиотеки, такие как:
- Workbox: мощный инструмент для управления кэшированием.
- localStorage/IndexedDB: хранение данных для оффлайн-доступа.

Пример кэширования API-ответов с Workbox:

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.origin === 'https://api.example.com',
  new StaleWhileRevalidate()
);

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

try {
  const response = await fetch('/api/data');
  const data = await response.json();
  setData(data);
} catch (error) {
  setData(localStorage.getItem('offlineData'));
}

4. Добавьте уведомление об оффлайн-режиме
Используйте событие navigator.onLine для отслеживания статуса подключения.

useEffect(() => {
  const updateStatus = () => {
    setIsOnline(navigator.onLine);
  };

  window.addEventListener('online', updateStatus);
  window.addEventListener('offline', updateStatus);

  return () => {
    window.removeEventListener('online', updateStatus);
    window.removeEventListener('offline', updateStatus);
  };
}, []);

🔹 Советы

- Используйте Progressive Web App (PWA) для полного оффлайн-опыта.
- Минимизируйте размер кэшируемых данных для ускорения загрузки.
- Регулярно обновляйте кэш, чтобы пользователи получали актуальные данные.

🎯 Заключение

Оффлайн-совместимость — это шаг к созданию более надежного и удобного приложения. С помощью Service Workers и стратегий кэширования вы можете обеспечить плавную работу даже при отсутствии сети.

ReactJs Daily | #pro

🚀 React Table (TanStack Table): мощный инструмент для работы с таблицами

Привет, друзья! 👋 Если вы работаете с таблицами в React-приложении, вам точно стоит обратить внимание на React Table (ныне TanStack Table). Это гибкая и производительная библиотека для создания динамических и интерактивных таблиц с минимальным кодом.

🔹 Почему TanStack Table?

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

🔹 Установка

Для начала установим библиотеку:

npm install @tanstack/react-table

🔹 Пример базовой таблицы

import React, { useState } from "react";
import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table'

const defaultData = [
  {
    firstName: 'tanner',
    lastName: 'linsley',
    age: 24,
    visits: 100,
    status: 'In Relationship',
    progress: 50,
  },
  {
    firstName: 'tandy',
    lastName: 'miller',
    age: 40,
    visits: 40,
    status: 'Single',
    progress: 80,
  },
  {
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  },
]

const columnHelper = createColumnHelper()

const columns = [
  columnHelper.accessor('firstName', {
    cell: info => info.getValue(),
  }),
  columnHelper.accessor(row => row.lastName, {
    id: 'lastName',
    cell: info => <i>{info.getValue()}</i>,
    header: () => <span>Last Name</span>,
  }),
  columnHelper.accessor('age', {
    header: () => 'Age',
    cell: info => info.renderValue(),
  }),
  columnHelper.accessor('visits', {
    header: () => <span>Visits</span>,
  }),
  columnHelper.accessor('status', {
    header: 'Status',
  }),
  columnHelper.accessor('progress', {
    header: 'Profile Progress',
  }),
]

function App() {
  const [data, _setData] = useState(() => [...defaultData])

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <div>
      <table>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id}>
              {row.getVisibleCells().map(cell => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default App;

🔹 Основные возможности

1. Сортировка
Сортировка доступна из коробки

2. Фильтрация
React Table поддерживает текстовую фильтрацию, выбор из списка и многое другое.

3. Пагинация
Библиотека позволяет легко работать с большими объемами данных через серверную или клиентскую пагинацию.

4. Виртуализация
Для очень больших таблиц можно использовать виртуализацию, чтобы отрисовывать только видимые строки.

🎯 Заключение

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

ReactJs Daily | #begginers

📌 Навигация по каналу ReactJs Daily 🚀

Вот основные категории, чтобы вы быстро находили нужное:

1️⃣ Базовые темы – для новичков: #beginners
2️⃣ Продвинутые темы – глубже в React: #pro
3️⃣ Полезные советы – короткие лайфхаки: #shortinfo
4️⃣ Next.js – современный фреймворк: #nextjs
5️⃣ Тестирование – от основ до практики: #testing
6️⃣ Новости – все обновления и тренды: #news
7️⃣ React 19 – все о новой версии React: #react19

⚡️ Как пользоваться:
Просто нажмите на любой хэштег в сообщении, чтобы увидеть все посты по этой категории.

Заглядывайте в разделы, изучайте материалы, делитесь с друзьями и продолжайте прокачивать свои React-навыки! 💡

🚀 Монорепозитории vs Микрофронтенды: что выбрать для масштабирования?

Привет, друзья! Сегодня поговорим о двух популярных подходах к организации кода: монорепозиториях и микрофронтендах. Эти архитектуры часто сравнивают, но каждая из них имеет свои плюсы, минусы и идеальные сценарии применения.

🔹 Что такое Монорепозитории?

Монорепозиторий — это единое хранилище, в котором размещен весь код приложения. Этот подход обеспечивает:
- Единое место для всего кода: легко управлять общими компонентами и утилитами.
- Согласованность: единые правила, линтеры и инструменты для всех модулей.
- Простота рефакторинга: изменения в одном месте применяются ко всему проекту.

Но есть нюансы:
- Может замедляться сборка по мере роста репозитория.
- Требует хороших инструментов CI/CD для управления масштабом.

🔹 Микрофронтенды: модульность в действии

Микрофронтенды — это способ разделения фронтенда на независимые модули. Каждый модуль:
Автономен: отдельные команды могут использовать разные технологии.
Меньше зависимости: легко обновлять или изменять функциональность, не затрагивая остальное приложение.
Модульное развертывание: отдельные части можно деплоить независимо.

Но есть и сложности:
Дублирование зависимостей между модулями увеличивает размер бандла.
Интеграция модулей требует продуманного подхода к совместимости и UX.

🔹 Как выбрать?

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

Например:
- Если вы стартап или небольшая команда — начинайте с монорепозитория.
- Для масштабного корпоративного приложения, где над модулями работают десятки команд, лучше подойдут микрофронтенды.

🎯 Заключение

Выбор архитектуры зависит от ваших задач и команды. Главное — оценить масштаб, требования и ресурсы 😊

ReactJs Daily | #begginers

🚀 Хук useOptimistic: Оптимизация UI с прогнозом изменений

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

🔹Что такое useOptimistic?

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

🔹Когда его использовать?

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

🔹Пример использования

import { useOptimistic, useState, useRef } from "react";
import { deliverMessage } from "./actions.js"; //Promise отправки

function Thread({ messages, sendMessage }) {
  const formRef = useRef();
  async function formAction(formData) {
    addOptimisticMessage(formData.get("message"));
    formRef.current.reset();
    await sendMessage(formData);
  }
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true
      }
    ]
  );

  return (
    <>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Sending...)</small>}
        </div>
      ))}
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
    </>
  );
}

export default function App() {
  const [messages, setMessages] = useState([
    { text: "Hello there!", sending: false, key: 1 }
  ]);
  async function sendMessage(formData) {
    const sentMessage = await deliverMessage(formData.get("message"));
    setMessages((messages) => [...messages, { text: sentMessage }]);
  }
  return <Thread messages={messages} sendMessage={sendMessage} />;
}

В этом примере, когда пользователь вводит сообщение в форму и нажимает кнопку "Send", хук useOptimistic позволяет сообщению сразу появиться в списке с меткой "Sending...", даже до того, как сообщение на самом деле будет отправлено на сервер. Этот «оптимистичный» подход создает впечатление скорости и отзывчивости. Затем форма пытается отправить сообщение в фоновом режиме. Как только сервер подтверждает, что сообщение было получено, метка "Sending..." удаляется.

🔹 Преимущества использования?

1. Отзывчивость интерфейса — изменения происходят немедленно, без задержки.
2. Поддержка асинхронных операций — позволяет обрабатывать операции с сервером без блокировки UI.
3. Гибкость — легко настраиваемая логика для отката изменений в случае ошибки.

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

🎯 Заключение

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

В настоящее время хук useOptimistic доступен только в Canary.

ReactJs Daily | #shortinfo

🚀 TanStack Router: мощный инструмент для маршрутизации в React

Привет, друзья! Продолжаем знакомиться с библиотеками от TanStack. Мы уже обсуждали Query и Table, а сегодня поговорим о TanStack Router — инновационном решении для маршрутизации.

🔹 Почему TanStack Router?

- Гибкость: идеально подходит для сложных и вложенных маршрутов.
- SSR и SSG: встроенная поддержка серверного рендеринга и статической генерации страниц.
- Типизация: нативная интеграция с TypeScript упрощает разработку.
- Асинхронность: маршруты могут загружать данные перед отображением, что ускоряет рендеринг страниц.

🔹 Ключевые особенности:

1️⃣ Декларативные маршруты: маршруты описываются как дерево, что удобно для вложенности.
2️⃣ Оптимизация производительности: обновляются только те компоненты, которые зависят от изменения маршрута.
3️⃣ Универсальность: работает как в клиентских, так и в серверных приложениях.

🔹 Пример настройки:

import { createReactRouter, createRouteConfig } from "@tanstack/react-router";

// Конфигурация маршрутов
const routeConfig = createRouteConfig().addChildren([
  { path: "/", component: HomePage },
  { path: "/about", component: AboutPage },
  { path: "/contact", component: ContactPage },
]);

// Создание маршрутизатора
const router = createReactRouter({ routeConfig });

// Использование маршрутизатора
import { RouterProvider } from "@tanstack/react-router";

function App() {
  return <RouterProvider router={router} />;
}

🔹 Когда использовать?

TanStack Router особенно полезен, если вы разрабатываете:
- SPA с динамическими страницами.
- Приложения с поддержкой SSR или SSG (например, в сочетании с Next.js).
- Проекты с высокими требованиями к производительности.

🎯 Заключение

TanStack Router — это мощное решение для тех, кто ищет гибкость и производительность в маршрутизации. Если вам уже нравится экосистема TanStack, обязательно попробуйте этот инструмент!

ReactJs Daily | #shortinfo

🚀 Vite: Быстрый и современный инструмент для разработки

Всем привет! Сегодня расскажем о Vite — инструменте, который сделал революцию в мире фронтенд-разработки. Если вы хотите работать быстрее и без лишних настроек, Vite — то, что нужно.

🔹 Что такое Vite?
Vite — это инструмент для сборки и разработки современных приложений. Название происходит от французского слова vite ("быстро"), и он полностью оправдывает своё название. Его ключевые особенности:
- Использование ES-модулей для быстрого старта.
- Невероятно быстрая замена модулей (HMR).
- Оптимизация для современных браузеров.

🔹 Почему стоит выбрать Vite?

1️⃣ Мгновенный запуск проекта. В отличие от Webpack, он не сканирует весь проект, а загружает только используемые модули.
2️⃣ Скорость обновления. Hot Module Replacement (HMR) позволяет обновлять изменения за миллисекунды.
3️⃣ Поддержка TypeScript, JSX и CSS-модулей из коробки.
4️⃣ Масштабируемость. Подходит как для небольших проектов, так и для крупных приложений.

🔹 Как начать работу?

Запустить проект с Vite проще простого:

npm create vite@latest my-project  
cd my-project  
npm install  
npm run dev  

Vite моментально поднимет сервер разработки, и вы сразу увидите своё приложение в браузере.

🔹 Поддержка фреймворков

Vite поддерживает большинство популярных фреймворков:
- React
- Vue
- Svelte
- Preact
- Lit

🔹 Что делает Vite особенным?

Vite разделяет процесс разработки на две части:
- Сервер разработки: использует нативные ES-модули, что ускоряет запуск и обновление.
- Сборка для продакшена: основана на Rollup, что обеспечивает высокую производительность и минимальный размер файлов.

🔹 Когда использовать Vite?

Если вы создаёте:
- Маленькие проекты: Vite позволяет сократить время настройки.
- Большие приложения: благодаря быстрой сборке и HMR, работа становится комфортной даже с большими кодовыми базами.

🎯 Заключение

Vite — это выбор разработчиков, которые ценят своё время и хотят использовать самые современные технологии. Попробуйте Vite, и вы больше не захотите возвращаться к старым инструментам!

ReactJs Daily | #begginers

🚀 React-Scan: Оптимизация производительности React-приложений

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

🔹 Что такое React-Scan?

React-Scan помогает находить компоненты, которые вызывают избыточные рендеры. Этот инструмент автоматически анализирует приложение, чтобы понять, где вы теряете производительность, и даёт рекомендации для исправления.

🔹 Как это работает?

1️⃣ Сканирование компонентов:
React-Scan анализирует дерево компонентов и определяет узкие места, такие как лишние обновления компонентов.

2️⃣ Мемоизация и оптимизация:
Показывает, где стоит использовать React.memo, useMemo или useCallback для предотвращения ненужных рендеров.

3️⃣ Подсказки по состоянию:
Инструмент помогает обнаружить неправильное использование контекста, пропсов или состояния, из-за чего могут рендериться не только нужные, но и соседние компоненты.

🔹 Ключевые преимущества:

Простота: React-Scan легко интегрируется в существующий проект.
Детальный анализ: Даёт точные рекомендации, позволяя быстрее устранять проблемы.
Эффективность: Снижает нагрузку на приложение, что особенно важно для больших приложений с сложной структурой.

🔹 Пример использования:

React-Scan устанавливается как библиотека, а его вывод интегрируется в devtools, предоставляя графическое отображение рендеров компонентов и их времени выполнения.

🔹 Когда использовать?

Проблемы с производительностью.
Большое количество компонентов или сложные вычисления.
Приложения с интенсивным использованием состояния и пропсов.

🎯 Заключение

React-Scan — это ваш помощник в создании быстрых и отзывчивых приложений. Он поможет превратить медленное приложение в высокопроизводительное за счёт устранения избыточных рендеров и грамотной оптимизации.

you can technically scan ANY website on the web:

npx react-scan@latest https://react.dev

Изучить подробнее 👍

ReactJs Daily | #shortinfo

🚀 Sentry для React: мониторинг ошибок и улучшение производительности

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

🔹 Установка и настройка

Установите Sentry:

npm install @sentry/react @sentry/browser

Инициализируйте в основном файле приложения, например, в index.js:

import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: 'https://<your-dsn>@o123456.ingest.sentry.io/123456',
  integrations: [new Sentry.BrowserTracing()],
  tracesSampleRate: 1.0, // Процент выборки данных
});

🔹 Интеграция с Error Boundary

Чтобы улавливать ошибки в компонентах, используйте withErrorBoundary:

import React from 'react';
import * as Sentry from '@sentry/react';

const ErrorFallback = () => <h1>Упс! Произошла ошибка.</h1>;

const MyComponent = Sentry.withErrorBoundary(Component, {
  fallback: <ErrorFallback />,
});

export default MyComponent;

Теперь ошибки внутри будут отправляться в Sentry, а пользователи увидят fallback-интерфейс.

🔹 Отслеживание ошибок и событий

Можно явно захватывать ошибки или события:

import * as Sentry from '@sentry/react';

try {
  throw new Error("Пример ошибки");
} catch (error) {
  Sentry.captureException(error); // Отправляет отчет в Sentry
}

Sentry.captureMessage("Ключевое событие", "info");

🔹 Преимущества Sentry

1️⃣ Мгновенное уведомление об ошибках. Получайте уведомления через email, Slack и другие каналы.
2️⃣ Детальная аналитика. Логи, сессии пользователей и версия приложения помогают быстрее находить проблему.
3️⃣ Производительность. Sentry показывает медленные участки приложения, позволяя оптимизировать их.
4️⃣ Удобная интеграция. Подходит как для простых приложений, так и для сложных архитектур.

🎯 Заключение

Sentry упрощает мониторинг, обработку ошибок и анализ производительности в React-приложениях. Используйте этот инструмент, чтобы минимизировать баги и сделать приложение стабильным.

ReactJs Daily | #shortinfo

🚀 Tailwind CSS в React: плюсы, минусы и использование

Привет, друзья! 👋 Сегодня поговорим про Tailwind CSS — мощный инструмент для стилизации, который использует утилитарный подход.

🔹 Что это такое?

Tailwind CSS — это фреймворк, в котором вы создаёте стили с помощью готовых классов. Каждый класс отвечает за конкретный стиль: отступы, цвета, тени и многое другое. Это делает разработку быстрой и гибкой.

🔹 Преимущества Tailwind CSS

1️⃣ Быстрое создание UI:
Вы можете стилизовать React-компоненты прямо в JSX:

<button className="bg-blue-500 text-white px-4 py-2 rounded">
  Кнопка
</button>

2️⃣ Консистентный дизайн:
Благодаря встроенным переменным для отступов, цветов и шрифтов дизайн становится единообразным.

3️⃣ Минимизация CSS:
Tailwind удаляет неиспользуемые стили на этапе сборки, оптимизируя итоговый файл.

4️⃣ Легкая настройка:
С помощью tailwind.config.js вы можете добавить свои цвета, шрифты и другие параметры.

🔹 Недостатки Tailwind CSS

1️⃣ Загромождение JSX-кода:
Множество классов могут затруднять чтение:

<div className="bg-white p-6 shadow-md rounded-md flex items-center">
  <span className="text-gray-700 font-semibold">Пример</span>
</div>

2️⃣ Изучение:
Нужно время, чтобы освоить обширный набор классов и их комбинации.

3️⃣ Зависимость:
Переключиться на другой CSS-фреймворк сложно из-за плотной интеграции стилей в компоненты.

🔹 Tailwind в React: пример компонента

import React from "react";

export default function Card({ title, description }) {
  return (
    <div className="bg-gray-100 p-4 rounded shadow-lg">
      <h2 className="text-lg font-bold text-gray-800">{title}</h2>
      <p className="text-gray-600">{description}</p>
    </div>
  );
}

В этом примере используется утилитарный подход для быстрого создания стильного компонента.

🔹 Когда использовать Tailwind в React?

Если проект требует быстрого прототипирования.
Если нужно единообразие в дизайне без написания большого количества CSS.
Если вы работаете в команде, где важна предсказуемость стилей.

🎯 Заключение

Tailwind CSS — это мощный инструмент для ускорения разработки интерфейсов, особенно в больших командах. Однако его использование требует опыта и понимания утилитарного подхода.

ReactJs Daily | #begginers

🚀 Что такое RTK Query и зачем он нужен?

Всем привет! 👋 Сегодня поговорим про RTK Query — это мощный инструмент для управления состоянием и получения данных в приложениях на основе React, который входит в состав Redux Toolkit. Он значительно упрощает процесс работы с API и обеспечивает разработчиков множеством полезных возможностей.

🔹 Зачем использовать RTK Query?

1. Упрощение взаимодействия с API: RTK Query предоставляет простой и удобный способ для выполнения асинхронных запросов к REST или GraphQL API. Вам не нужно вручную обрабатывать действия, редюсеры и состояние загрузки — все это делается автоматически.

2. Эффективное кеширование: RTK Query автоматически кэширует результаты запросов и работает с ними, чтобы минимизировать количество ненужных запросов к серверу. Это улучшает производительность приложения и обеспечивает мгновенное отображение данных.

3. Генерация типов TypeScript: Если вы используете TypeScript, RTK Query позволяет автоматически генерировать типы для запросов и ответов, что обеспечивает большую безопасность типизации.

4. Интеграция с Redux: Поскольку RTK Query разработан как часть Redux Toolkit, он легко интегрируется с уже существующими Redux-приложениями и позволяет использовать привычные парадигмы управления состоянием.

5. Поддержка "периодического обновления": RTK Query предоставляет возможность настраивать периодическое обновление данных, что позволяет держать информацию актуальной без дополнительных операций со стороны разработчика.

🔹 Как начать использовать RTK Query?

Чтобы начать использовать RTK Query, вам нужно установить Redux Toolkit:

npm install @reduxjs/toolkit react-redux

Затем создайте «API slice», который определяет, как будет происходить взаимодействие с вашим API:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => 'posts',
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
    }),
  }),
});

export const { useGetPostsQuery, useAddPostMutation } = api;

После этого добавьте редюсер API в ваш Redux Store:

import { configureStore } from '@reduxjs/toolkit';
import { api } from './services/api';

export const store = configureStore({
  reducer: {
    // Добавьте редюсеры вашего API
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
});

Теперь вы можете использовать хуки, предоставляемые RTK Query, в ваших компонентах:

import React from 'react';
import { useGetPostsQuery, useAddPostMutation } from './services/api';

const Posts = () => {
  const { data: posts, error, isLoading } = useGetPostsQuery();
  const [addPost] = useAddPostMutation();

  const handleAddPost = async () => {
    await addPost({ title: 'Новое название', content: 'Содержимое поста' });
  };

  if (isLoading) return <div>Загрузка...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Посты</h1>
      <button onClick={handleAddPost}>Добавить пост</button>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

🎯 Заключение

RTK Query — это отличный инструмент для разработчиков, который делает работу с асинхронными запросами простой и эффективной. Благодаря автоматизации многих рутинных задач, таким как кеширование и обработка загрузки, вы можете сосредоточиться на создании ценного функционала для своих пользователей.

ReactJs Daily | #begginers

🚀 React 19: Новое поколение React-приложений

5 декабря 2024 года вышла новая версия React 19, которая принесла много важных обновлений для повышения производительности, улучшения разработческого опыта и удобства поддержки приложений. Давайте разберем основные новшества.

🔹Ключевые изменения в React 19

1️⃣ React Compiler
Теперь React может оптимизировать код на этапе компиляции, а не выполнения. Это позволяет:
- Уменьшить размер JavaScript-бандлов.
- Ускорить загрузку и работу приложения.
Результат — быстрее и удобнее для пользователя.

2️⃣ Улучшенные серверные компоненты
Серверные компоненты стали еще мощнее:
- Лучшая поддержка паттернов загрузки данных.
- Снижение зависимости от JavaScript на клиенте.
Это особенно полезно для масштабных приложений.

3️⃣ Расширенные Error Boundaries
Больше подробностей об ошибках и улучшенные механизмы их обработки делают дебаггинг проще и понятнее.

4️⃣ Автоматическая координация HTML
Теперь React лучше согласовывает серверный HTML и клиентские компоненты, что сокращает проблемы гидратации и повышает производительность.

5️⃣ Отслеживание переходов состояния
Становится легче отслеживать сложные переходы состояния, что важно для оптимизации сложных интерфейсов.

🔧 Как перейти на React 19

Готовьтесь к переходу: В официальной документации представлено подробное руководство для перехода с React 18.
Проверяйте зависимости: Убедитесь, что ваши сторонние библиотеки совместимы с React 19.
Тестируйте: Если у вас сложное приложение, уделите внимание тестированию после обновления.

💡 Почему стоит обновиться?

React 19 создан, чтобы соответствовать современным требованиям веб-разработки:
Производительность: Новые механизмы оптимизации ускоряют работу приложения.
Удобство: Улучшенные инструменты делают разработку проще.
Современные подходы: Обновление гарантирует совместимость с актуальными инструментами экосистемы.

Подробное описание всех изменений доступно в официальном блоге React.

ReactJs Daily | #news

🚀 Новинка в React 19: ref как проп

С выходом React 19 появилась возможность передавать ref напрямую в функциональные компоненты как обычный пропс. Это упрощает использование ссылок и делает код более читаемым.

🔹Как было раньше

Раньше для передачи ссылки в функциональные компоненты использовался HOC forwardRef, что добавляло лишний код:

import React, { forwardRef } from "react";

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

<MyInput placeholder="Введите текст" ref={inputRef} />

🔹Как стало в React 19

Теперь ref можно передавать как обычный пропс:

function MyInput({ placeholder, ref }) {
  return <input placeholder={placeholder} ref={ref} />;
}

<MyInput ref={inputRef} placeholder="Введите текст" />

React автоматически обработает назначение ссылки, устраняя необходимость в использовании forwardRef. Это особенно удобно для новых проектов или компонентов.

🔄 Что изменится в будущем?

React планирует полностью удалить поддержку `forwardRef` в следующих версиях.
Для упрощения перехода разработчикам будет предоставлен инструмент codemod, который автоматически обновит существующий код.

📌 Важно

- Классы по-прежнему не поддерживают передачу ref как пропса, поскольку ref указывает на экземпляр компонента.

🎯 Заключение

Передача ref как пропса делает компоненты проще и чище, особенно для функциональных компонентов. Это изменение — шаг к более удобному и лаконичному написанию кода в React.

ReactJs Daily | #react19

🚀 Хук useFormStatus в React 19

С выходом React 19 разработчикам стал доступен новый мощный инструмент для управления состояниями форм — хук useFormStatus. Он значительно упрощает работу с формами, предоставляя удобный способ отслеживать состояния, связанные с отправкой данных.

🔹Что такое useFormStatus?

Этот хук возвращает объект с информацией о текущем состоянии формы:
- pending — указывает, находится ли форма в процессе отправки.
- data — объект с данными, которые отправляются.
- method — метод HTTP-запроса (GET или POST).
- action — ссылка на функцию, переданную в action у <form>.

🔹Пример использования

Допустим, у нас есть форма с кнопкой отправки. С помощью useFormStatus можно блокировать кнопку, пока форма отправляется, и отображать статус загрузки:

import { useFormStatus } from "react-dom";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Отправка..." : "Отправить"}
    </button>
  );
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

export default function App() {
  const submitAction = async (formData) => {
    const name = formData.get("name");
    console.log(`Отправляем данные: ${name}`);
    // Здесь можно выполнить асинхронный запрос
  };

  return <Form action={submitAction} />;
}

🔹Особенности и нюансы

1. Где использовать хук:
useFormStatus необходимо вызывать из компонента, который находится внутри <form>. Например:

 function Submit() {
   const { pending } = useFormStatus();
   return <button disabled={pending}>...</button>;
 }   

2. Данные формы:
С помощью свойства data можно получить данные, отправляемые формой. Это полезно для отображения подтверждения или предварительной информации:

 const { pending, data } = useFormStatus();
 return <p>{data ? `Отправляем: ${data.get("username")}` : ""}</p>;
   

3. Ограничения:
Хук отслеживает состояние только для <form>, которая является родителем компонента, где вызывается useFormStatus. Если форма и хук находятся в одном компоненте, состояние отслеживаться не будет.

🔹Преимущества использования

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


Попробуйте useFormStatus в своих проектах, чтобы оптимизировать работу с формами!

ReactJs Daily | #react19

🚀 Три лучших фреймворка для аутентификации: сравнение и примеры

Привет, друзья! 👋 Сегодня поговорим о трёх топовых фреймворках для аутентификации, которые помогут вам безопасно интегрировать регистрацию и вход в ваши веб-приложения. Рассмотрим, что каждый из них предлагает и как их можно использовать.

🔹Clerk

Clerk — это инструмент для управления пользователями, который помогает разработчикам легко добавлять функционал регистрации, входа и управления профилями. Вот что он предлагает:

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

Пример использования Clerk

import { SignIn, SignUp, Profile } from '@clerk/clerk-react';

function App() {
  return (
    <>
      <SignIn path="/signin" routing="path" />
      <SignUp path="/signup" routing="path" />
      <Profile path="/profile" routing="path" />
    </>
  );
}

Подробнее

🔹SupabaseAuth

Supabase — это альтернатива Firebase с открытым исходным кодом. SupabaseAuth помогает легко реализовать аутентификацию и авторизацию в вашем приложении:

- Поддержка различных методов аутентификации: Включает пароли, магические ссылки, одноразовые пароли (OTP), социальную авторизацию и единый вход (SSO).
- Работа с JSON Web Token (JWT): SupabaseAuth использует JWT для аутентификации, что облегчает интеграцию с Row Level Security (RLS).
- Интеграция с популярными провайдерами: SupabaseAuth поддерживает множество сторонних поставщиков для социальных сетей и телефонов.

Пример использования SupabaseAuth

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.SUPABASE_URL
const supabaseKey = process.env.SUPABASE_KEY
const supabase = createClient(supabaseUrl, supabaseKey)

async function signInWithEmail(email, password) {
  const { session, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  })

  if (error) throw error
  return session
}

Подробнее

🔹Better Auth

Better Auth — это фреймворк для аутентификации и авторизации, независимый от конкретных технологий. Он предлагает богатую функциональность и простоту использования:

- Богатый функционал: Включает множество функций для аутентификации и авторизации.
- Плагины для расширения функционала: Легко добавляйте новые возможности через плагины.
- TypeScript-поддержка: Полностью написан на TypeScript, что гарантирует типобезопасность.

Пример использования Better Auth

import { BetterAuth } from 'better-auth';

const auth = new BetterAuth({
  providers: ['google', 'github'],
  secret: process.env.BETTER_AUTH_SECRET,
});

auth.init();

await auth.login('google');

Подробнее

🎯 Заключение

Каждый из этих фреймворков предлагает уникальные возможности для безопасной и удобной аутентификации в ваших приложениях. Выбор зависит от ваших требований и предпочтений. Если вам нужна простая и быстрая интеграция, попробуйте Clerk или SupabaseAuth. Для максимальной гибкости и расширяемых возможностей обратите внимание на Better Auth. 🌟

ReactJs Daily| #begginers

🚀 Хук useTransition в React 19: оптимизация рендеринга без блокировок

Новый хук useTransition в React 19 позволяет помечать обновления состояния как "переходы" (Transitions), делая их неблокирующими. Это особенно полезно для улучшения пользовательского опыта в случаях, когда рендеринг занимает значительное время, например, при переключении вкладок, обновлении графиков или выполнении других вычислительных задач.

🔹Что делает `useTransition`?

1. Плавный UX: Обновления состояния, помеченные как "Transitions", не блокируют основной поток. Это значит, что другие более важные обновления, такие как ввод текста, будут обработаны быстрее.
2. Контроль статуса: Хук возвращает флаг isPending, который показывает, находится ли Transition в процессе выполнения.
3. Гибкость: Позволяет разработчику явно указывать, какие обновления должны быть выполнены в фоне.

🔹Основы использования

Пример простого использования:

import { useTransition, useState } from "react";

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState("about");

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <div>
      <button onClick={() => selectTab("about")}>О нас</button>
      <button onClick={() => selectTab("services")}>Услуги</button>
      {isPending && <p>Загрузка...</p>}
      <div>{tab === "about" ? "Контент 'О нас'" : "Контент 'Услуги'"}</div>
    </div>
  );
}

Как это работает:
- startTransition используется для оборачивания обновления состояния (setTab).
- isPending позволяет отобразить состояние загрузки, пока React выполняет переход.

🔹Как работает startTransition

startTransition принимает функцию (Action), которая должна содержать обновление состояния. Все состояния, обновляемые внутри этой функции, будут помечены как Transition.

Пример с асинхронным запросом:

function SubmitButton({ submitAction }) {
  const [isPending, startTransition] = useTransition();

  return (
    <button
      disabled={isPending}
      onClick={() => {
        startTransition(() => {
          submitAction();
        });
      }}
    >
      {isPending ? "Отправка..." : "Отправить"}
    </button>
  );
}

🔹Особенности и ограничения

1. Использование только в компонентах: useTransition работает только в компонентах или пользовательских хуках.
2. Асинхронные обновления: Если вы делаете асинхронный запрос внутри Transition, все обновления состояния после await должны быть снова обернуты в startTransition.
3. Перебивания: Transition можно прерывать более важными обновлениями, например, вводом текста в поле.
4. Обновление полей ввода: Transition не подходит для управления текстовыми полями.

🔹Преимущества использования

- Улучшает плавность интерфейсов.
- Уменьшает время реакции приложения на пользовательские действия.
- Позволяет эффективно управлять приоритетом обновлений.

🔹Когда применять

useTransition идеально подходит для задач, которые могут выполняться с небольшой задержкой, например:
- Переключение вкладок.
- Загрузка больших списков данных.
- Рендеринг сложных компонентов (например, диаграмм или таблиц).

🎯 Заключение

Хук useTransition — мощный инструмент, который помогает улучшить пользовательский опыт, сохраняя интерфейс отзывчивым. Попробуйте его в своем проекте, чтобы сделать взаимодействие с приложением максимально плавным и удобным!

ReactJs Daily| #react19