💡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 [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);

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

      setIsLoading(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) setIsLoading(false);
         });

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

   return [data, isLoading, 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

🖥 NLUX — библиотека ReactJS для создания разговорных пользовательских интерфейсов

В современном мире взаимодействие с компьютерами и приложениями становится все более естественным и удобным благодаря использованию разговорных интерфейсов и искусственного интеллекта. Однако, интеграция такого функционала в веб-приложения может стать вызовом для разработчиков.
В этом может помочь библиотека NLUX (Natural Language User Experience), предоставляющая инструменты для создания разговорных пользовательских интерфейсов в приложениях на ReactJS.

NLUX революционизирует интеграцию разговорного искусственного интеллекта в приложения на ReactJS. Представляя собой двойное предложение, то есть не только компоненты/хуки React, но и автономную библиотеку для JavaScript, библиотека NLUX разработана для внедрения функциональности чат-ботов, управляемых искусственным интеллектом, в веб-приложения.

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

📁 Подробнее про NLUX на Хабре

🖥 GitHub

@react_tg

🖥 5 вещей, которые сделают ваш React проект лучше

*️⃣Используйте JSX-сокращения
Допустим, вам нужно управлять видимостью компонента Navbar с помощью пропса showTitle:
Плохо

return (
  <Navbar showTitle={true} />
);    

Хорошо

return(
  <Navbar showTitle />  
);  

*️⃣Используйте тернарные операторы
Отличный способ для выбора между двумя компонентами по некоторому условию
Плохо

const { role } = user;

if(role === ADMIN) {
  return <AdminUser />
}else{
  return <NormalUser />
}  

Хорошо

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />   

*️⃣Используйте преимущества объектных литералов
Если у вас выбор между тремя и более компонентами, литералы объектов могут сделать код более читаемым – используйте их вместо сложных условий.
Плохо

const {role} = user

switch(role){
  case ADMIN:
    return <AdminUser />
  case EMPLOYEE:
    return <EmployeeUser />
  case USER:
    return <NormalUser />
}  

Хорошо

const {role} = user

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser
};

const Component = components[role];

return <Component />;  

*️⃣Используйте фрагменты
Нет никакого преимущества в использовании div вместо Fragment. Зачем нам лишний элемент в DOM?
Плохо

return (
  <div>
     <Component1 />
     <Component2 />
     <Component3 />
  </div>  
)   

Хорошо

return (
  <>
     <Component1 />
     <Component2 />
     <Component3 />
  </>  
)    

*️⃣Не определяйте функцию внутри рендера
Лучше не смешивать логику и рендер внутри компонента.
Плохо

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>    // NOTICE HERE
      This is a bad example 
    </button>  
)  

Хорошо

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
  <button onClick={submitData}>  
    This is a good example 
  </button>  
)   

📎 Ещё больше полезных советов

@react_tg

🖥 Boa — экспериментальный лексер, парсер и компилятор Javascript

Тут на днях года состоялся релиз Boa v0.18 — экспериментального лексера, парсера и компилятора Javascript, а также движка ECMAScript, написанного на языке программирования Rust.

🔥 Новая версия Boa позволяет легко встраивать JS-движок в различные проекты, и а также использовать его из WebAssembly и командной строки.

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

«Поскольку Boa используется все большим количеством проектов, важно, чтобы мы могли предоставить стабильный и надёжный API. Нам кажется, что мы ещё не достигли этого результата, но после обсуждения с командой мы решили нацелиться на выпуск версии 1.0 в ближайшем будущем. Это станет для нас важной вехой, и мы надеемся, что к тому времени у нас будет много новых функций и улучшений», — пояснили разработчики проекта.

Впервые проект Boa был представлен на конференции JSConf EU 2019 разработчиком Джейсоном Уильямсом.

🖥Исходный код проекта выложен на GitHub под лицензией MIT
4.6К⭐️

@react_tg

🖥 Создание PDF с помощью React

🌟 Относительно недавно разработчики Onedoc выпустили UI Kit под названием React Print. Он предназначен для создания PDF-файлов с помощью React и TypeScript.
С его помощью можно подготавливать шаблоны счетов, брошюр и любых других документов.

Пользуйтесь)

🖥 GitHub

@react_tg