‌
3. RadixUI

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

3. RadixUI

⌚Таймкоды:
00:00 Radix теория
07:53 Dialog практика
17:22 Dialog анатомия
27:04 Delete post modal
34:02 Универсальная модалка
49:50 Промежуточные итоги

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

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

Portal

Чтобы продемонстрировать для чего нужен портал, реализуем стандартную задачу. Добавим в наше приложение header, который всегда будет в зафиксированном положение. Компонент Header.tsx отрисуем в App.tsx. В Header.tsx отрисуем компонент Cart.tsx

src/components/Header/Header.tsx
export const Header = () => {
  return (
    <div className={s.headerWrapper}>
      <div className={s.container}>
        <h3>logotype</h3>
        <Cart />
      </div>
    </div>
  )
}
Header.module.css
.headerWrapper {
  background-color: lightgray;
  margin-bottom: 20px;
  position: fixed;
  height: 60px;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
}
 
.container {
  display: flex;
  width: 1440px;
  justify-content: space-between;
  margin: 0 auto;
  align-items: center;
}

...

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

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

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