Фрагменты (Fragments) в React — это способ группировать несколько элементов без добавления лишнего DOM-узла. Это полезно, когда нужно вернуть из компонента несколько соседних элементов, но не хочется создавать дополнительный <div>.

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

return (
  <>
    <h1>Заголовок</h1>
    <p>Параграф текста</p>
  </>
);

Порталы (Portals) позволяют рендерить дочерние элементы компонента в DOM-узел, который находится вне иерархии родительского компонента. Это удобно для модальных окон, тултипов и других элементов, которые должны визуально выходить за пределы текущего контейнера.

Пример создания портала:

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

Таким образом, фрагменты помогают избежать лишних обёрток в DOM, а порталы — рендерить компоненты вне текущей иерархии DOM.

Расскажи про фрагменты и порталы в React.