🖥 Replyke — встраиваемые комментарии для React

Инструмент работает все максимально просто: сами комментарии подключаются по системе plug&play, а настроить их можно прямо на веб-сайте проекта

Replyke предоставляет готовый к использованию компонент комментариев, который легко настраивается и интегрируется с существующими React-проектами

https://replyke.com/

#React #web

@react_tg

🖥 Лучшие бесплатные курсы React 2024

Здесь мы собрали самые топовые бесплатные курсы по React. Целый кладезь знаний.

▪ Читать

@react_tg

💡Frontend совет

Для определения min-width и width в CSS достаточно одной функции max

➡️ Демо: здесь

#css #tip

@react_tg

CopilotKit

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

CopilotKit принимает на вход описание вашего приложения и передаст его в свою инфраструктуру React для создания:
- ИИ-чатботов в приложении
- Текстовые области с поддержкой ИИ
- RAG, вызов функций и интеграция

Библиотека имеет встроенную поддержку LangChain, LangGraph и LangServe. Вы можете использовать их для расширения возможностей движка.

Также в библиотеку встроены нативные UI/UX-компоненты, которые вы можете использовать в своих приложениях:
- CopilotChat
- CopilotSidebar
- CopilotPopup
- CopilotTextarea

Библиотека имеет открытый исходный код. Вы можете использовать ее самостоятельно. Вы можете использовать ее с любым LLM, включая GPT-4.

Этот проект занял второе место на HackerNews и ProductHunt. Он был трендом на GitHub.

Эта библиотека работает с любом приложении React, но команда работает над ее расширением.

🐱 GitHub

@react_tg

💡Как использовать forwardRef с generic компонентами

Одно из ограничений forwardRef в том, что он отключает выведение типа для generic компонентов. Например:

const Table = <T,>(
  props: {
    data: T[];
    renderRow: (row: T) => React.ReactNode;
  },
  ref: React.ForwardedRef<HTMLTableElement>
) => {
  /** --snip-- */
};
 
const ForwardReffedTable = React.forwardRef(Table);

<Table
    data={["a", "b"]}
    renderRow={(row) => { // Тип выводится: row: string
      return <tr>{row}</tr>;
  }}
/>;

<ForwardReffedTable
    data={["a", "b"]}
    renderRow={(row) => { // Тип не выводится: row: unknown
      return <tr>{row}</tr>;
  }}
/>;

Чтобы исправить выведение типа для generic компонентов, можно создать утилитарную функцию для вызова forwardRef с правильными типами:

function fixedForwardRef<T, P = {}>(
  render: (props: P, ref: React.Ref<T>) => React.ReactNode
): (props: P & React.RefAttributes<T>) => React.ReactNode {
  return React.forwardRef(render) as any;
}

// Вызов forwardRef с правильным выведением типа:
const ForwardReffedTable = fixedForwardRef(Table); 

🔗 Подробнее

@react_tg

💻 Проверь свои скиллы — задача по написанию hook для загрузки данных

На первой итерации решение может выглядеть как-то так:

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((respData) => setData(respData));
  }, []);

  return data;
}

В этом коде не хватает зависимости. Если url изменится, то запроса данных не произойдет.

Дальше код может стать таким:

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    setData(null); // не забыть сбросить данные перед загрузкой
    fetch(url)
      .then((res) => res.json())
      .then((respData) => setData(respData));
  }, [url]); // <-- не забыть зависимость

  return data;
}

На этом этапе можно остановиться, и подумать, как улучшить этот hook.

Пропустим ещё несколько итераций, и финальный код, который можно считать неплохим решением, выглядит так:

function useFetch(url) {
   const [data, setData] = useState(null);
   const [isClick Me Load More, setIsClick Me Load More] = useState(false);
   const [error, setError] = useState(null);

   useEffect(() => {
      // флаг отмены
      let cancelled = false;

      setIsClick Me Load More(true);
      setData(null);
      setError(null);
      fetch(url)
         .then((res) => res.json())
         .then((respData) => {
            if (!cancelled) setData(respData);
         })
         .catch((e) => {
            if (!cancelled) setError(e);
         })
         .finally(() => {
            if (!cancelled) setIsClick Me Load More(false);
         });

      return () => {
         // выставим признак того, что запрос отменен
         cancelled = true;
      };
   }, [url]);

   return [data, isClick Me Load More, error];
}

Эта задачка позволяет проверить понимание устройства рендеринга React, как устроено хранение состояния, когда происходят перерисовки, как заставить компонент перерисоваться в ответ на асинхронное событие, как устроена "очистка (cleanup) эффекта", как работают сайд-эффекты.

@react_tg

⚡️ ReactRover позволяет развертывать React-приложения одним щелчком мыши

Особенности:
🔵Поддержка Vite и CRA
🔵Функциональность пользовательского имени сайта
🔵Поддержка переменных окружения
🔵Ведение журналов в реальном времени
🔵Аутентификация пользователей

🖥 GitHub

@react_tg

💡Обрабатывай асинхронные ошибки как профи

Асинхронные операции, такие как получение данных из внешних API или обработка взаимодействия с пользователем требуют аккуратной обработки ошибок.

🔵Try-Catch с Async/Await
— надежное решение для обработки ошибок в асинхронном коде. Инкапсулируя асинхронные операции внутри try блока, разработчики получают возможность корректно перехватывать и обрабатывать ошибки, которые могут возникнуть во время выполнения.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error; // Re-throw the error to propagate it further
  }
}

здесь try-catch блок обрабатывает наш асинхронный код, что позволяет нам фиксировать и регистрировать ошибки, возникающие во время выборки данных. Повторно выдавая ошибку, мы гарантируем ее распространение дальше по стеку вызовов, что облегчает комплексную обработку ошибок во всем приложении.

🔵Promise.catch()
Promise.catch() метод служит надежным защитником от асинхронных ошибок, предлагая краткое решение для обработки отклонений. Добавляя предложение .catch() в нашу цепочку обещаний, разработчики могут перехватывать и обрабатывать ошибки, возникающие во время выполнения асинхронных операций.

fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => {
    // Process the data
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
    // Display a user-friendly error message
    alert('An error occurred while fetching data.');
  });

здесь .catch() перехватывает любые ошибки, возникающие во время обработки данных, позволяя разработчикам регистрировать ошибки в целях отладки и предоставлять пользователям понятное сообщение.

В общем, обработка ошибок, особенно асинхронных, в приложениях React требует многогранного подхода.
🔤А какой вариант обработки ошибок близок именно вам? Было бы интересно услышать

@react_tg

🖥 Обработка имён классов в React 🖥

Интерактивные элементы UI имеют более одного состояния отображения. Например, модальное окно может быть открыто или закрыто, а переключатель — включён или выключен. Обычно эти состояния меняют с помощью классов.

Работая напрямую с DOM, мы можем использовать classList, который содержит удобные методы для добавления и удаления классов. В React из коробки нет никаких удобств. Свойство className — это всего лишь строка, а строки неудобны для обработки:

class Button extends React.Component {
  render () {
    const { isPressed, isHovered, label } = this.props;
    let btnClass = 'btn';
    if (isPressed) {
      // Приходится конкатенировать классы
      btnClass += ' btn-pressed';
    } else if (isHovered) {
      btnClass += ' btn-over';
    }
    return <button className={btnClass}>{label}</button>;
  }
};

Для решения этой задачи создатели React рекомендуют использовать пакет 'classnames'. Принцип его работы прост. Вместо манипулирования строчкой напрямую, мы формируем правильный объект, который уже будет преобразован в строку:

import cn from 'classnames';

class Button extends React.Component {
  render () {
    const { isPressed, isHovered, label } = this.props;
    // Значение — это `true` или `false`
    // При значении `true` класс включен, при `false` — выключен
    // `'btn'` — это класс, который будет подставлен в любом случае
    const btnClass = cn('btn', {
      'btn-pressed': isPressed,
      'btn-over': !isPressed && isHovered,
    });
    return <button className={btnClass}>{label}</button>;
  }
};

Подставим конкретные значения:

const btnClass = cn('btn', {
  'btn-pressed': false,
  'btn-over': true,
});

console.log(btnClass); // 'btn btn-over'

Функция cn() принимает на вход любое количество аргументов. Если аргумент имеет строковой тип, то он считается обязательным классом. Если это объект, тогда работает логика, описанная выше:

const btnClass = cn('btn', 'another-class', {
  'btn-pressed': isPressed,
  'btn-over': !isPressed && isHovered,
});

@react_tg

🖥 Решение проблемы с получением значения поля в ReactJS

Если в двух словах, то для надежного получения значения из поля ввода в React используйте управляемые компоненты. Привяжите значение поля к состоянию с помощью атрибута value и обновляйте его при помощи обработчика события onChange. Принцип работы приведен ниже:

class InputComponent extends React.Component {
  state = { value: '' };

  handleValueChange = (event) => this.setState({ value: event.target.value });

  render() {
    // Заметьте взаимодействие состояния и поля ввода — вот так все и работает!
    return <input value={this.state.value} onChange={this.handleValueChange} />;
  }
}

В этом коде создается текстовое поле ввода, значение которого привязано к состоянию компонента.

@react_tg