Как писать сайты на JSX (без React) и собирать их через Vite: Minista в деле

👉 Мощная практика с Minista (JSX): https://stepik.org/a/228315 ✏️ Разбираемся, что такое Minista — фреймворк-обёртка над Vite, позволяющая писать сайты с использованием JSX без подключения React. Пошагово создаём проект, настраиваем конфигурацию и запускаем dev-сервер. Изучаем структуру проекта, разбираемся с global.jsx – обёрткой для всех страниц. Подробно разбираем синтаксис JSX: от простых элементов и пропсов до вложенности, списков, children и фрагментов. Учимся подключать изображения и SVG-иконки, использовать встроенные компоненты Image, Icon, Head. Настраиваем алиасы и конфиги. Подключаем стили, добавляем JS-логику и собираем проект в dist. Финально — делаем предпросмотр через npm run preview. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:55 | Что такое Minista ▶ 01:42 | Для кого подойдёт Minista ▶ 02:14 | Установка и запуск проекта ▶ 04:50 | Базовая структура проекта Minista ▶ 07:49 | Рекомендуемая структура для проекта Minista ▶ 10:35 | Синтаксис JSX — формат функций для компонентов ▶ 19:05 | Синтаксис JSX — фрагменты (пустые обёртки) ▶ 20:28 | Синтаксис JSX — вложение компонентов друг в друга ▶ 21:34 | Синтаксис JSX — отличие JSX-компонента от JSX-элемента ▶ 22:47 | Синтаксис JSX — атрибуты ▶ 24:37 | Синтаксис JSX — пропсы (параметры) для компонентов ▶ 32:30 | Синтаксис JSX — рендер списков в разметке, проп key ▶ 36:30 | Структура компонента для комфортной работы с Minista ▶ 40:14 | Маршрутизация по страницам (роутинг) ▶ 43:28 | Компонент Head ▶ 46:13 | Файл global.jsx — общая обёртка для каждой из страниц ▶ 53:35 | Компонент Image — работа с изображениями ▶ 56:36 | Вставка SVG-изображения инлайново как компонент ▶ 58:44 | Компонент Icon — работа с SVG-иконками ▶ 01:00:26 | Подключение скрипта для его работы в браузере ▶ 01:02:21 | Подключение стилей ▶ 01:04:43 | Алиасы ▶ 01:07:33 | Сборка проекта и предпросмотр ▶ 01:08:31 | Заключение 📚 Ссылки из видео: ➖ Документация Minista: https://minista.qranoko.jp/ ➖ NPM для начинающих: https://youtu.be/IsRl03T9VMo ➖ WebStorm – большой гайд: https://youtu.be/PLU2AuU6wlU ➖ HTML Продвинутая работа с изображениями: https://youtu.be/Nnst-gK38ow ➖ Код из видео: https://github.com/aleksanderlamkov/minista-app 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend ❤️ Boosty (поддержать автора): https://boosty.to/friendly-frontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке JSX, SCSS, JS, Vite, Minista (SSG), БЭМ: https://stepik.org/a/228315 📌 Автор: ➖ Личный сайт: https://aleksanderlamkov.ru/ ➖ Telegram: https://t.me/AleksanderLamkov ➖ Boosty: https://boosty.to/friendly-frontend ➖ GetMentor: https://getmentor.dev/mentor/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #jsx