Как писать сайты на 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