2. Порталы (createPortal)

Для доступа к видео оформите подписку на курс

2. Порталы (createPortal)

​⌚Таймкоды:
00:00 Portal описание проблемы
06:56 createPortal

Оценить качество материала и подачу материала автором видео:

Front-end

Трудоустройтесь middle front-end разработчиком на React JS (TypeScript) за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Front-end

Back-end

Трудоустройтесь middle back-end разработчиком за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Back-end

Карьерный бустер

Получите коммерческий опыт на реальных стартапах, прокачайте tech & soft навыки, научитесь работать в команде, проходить собеседования и получите первую работу в IT!

Перейти на курс
Карьерный бустер

Основы Front-end

Сделайте первый шаг в IT, освоив базовые знания разработки и научившись создавать небольшие проекты на JavaScript

Перейти на курс
Основы Front-end

Основы Back-end

Сделайте первый шаг в IT, освоив базовые знания разработки. Без опыта. Без математики. Только практика: JavaScript, SQL, Node JS, база данных

Перейти на курс
Основы Back-end

Модальное окно

Модальное окно — это графический элемент интерфейса, который отображается поверх основного содержимого веб-страницы или приложения и требует взаимодействия с пользователем перед тем, как он сможет вернуться к основной странице. Модальное окно временно блокирует доступ к основной части интерфейса, пока пользователь не выполнит какое-либо действие (например, нажмет кнопку "Закрыть" или "ОК").

Базовое модальное окно

Создадим модальное окно

src/components/Modal/Modal.tsx
import s from "./Modal.module.css"
 
type Props = {
  open: boolean
  onClose?: () => void
}
 
export const Modal = ({ onClose, open }: Props) => {
  return (
    <>
      {open && (
        <div className={s.overlay}>
          <div className={s.content}>
            <h3 className={s.title}>Cart</h3>
            <hr />
            <ul>
              <li>1 товар</li>
              <li>2 товар</li>
              <li>3 товар</li>
            </ul>
            <button className={s.closeIcon} onClick={onClose}>
              x
            </button>
          </div>
        </div>
      )}
    </>
  )
}

...

Для доступа к полной версии конспекта оформите подписку на курс

Современная UI-Разработка: компоненты, порталы и Storybook

Видеоурок - 2 видео из 5