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

👉 Зарегистрируйте или перенесите домен в Selectel с кешбэком 100%:
https://slc.tl/oldpd

🔥 Мощная практика с 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.

Реклама, АО «Селектел», erid: 2Vtzqw6erTq

🔴 Timeline:
▶ 00:00 | Введение
▶ 00:55 | Что такое Minista
▶ 01:42 | Для кого подойдёт Minista
▶ 02:14 | Установка и запуск проекта
▶ 04:50 | Базовая структура проекта Minista
▶ 08:34 | Рекомендуемая структура для проекта Minista
▶ 11:20 | Синтаксис JSX — формат функций для компонентов
▶ 19:50 | Синтаксис JSX — фрагменты (пустые обёртки)
▶ 21:13 | Синтаксис JSX — вложение компонентов друг в друга
▶ 22:19 | Синтаксис JSX — отличие JSX-компонента от JSX-элемента
▶ 23:32 | Синтаксис JSX — атрибуты
▶ 25:22 | Синтаксис JSX — пропсы (параметры) для компонентов
▶ 33:15 | Синтаксис JSX — рендер списков в разметке, проп key
▶ 37:15 | Структура компонента для комфортной работы с Minista
▶ 40:59 | Маршрутизация по страницам (роутинг)
▶ 44:13 | Компонент Head
▶ 46:58 | Файл global.jsx — общая обёртка для каждой из страниц
▶ 54:20 | Компонент Image — работа с изображениями
▶ 57:21 | Вставка SVG-изображения инлайново как компонент
▶ 59:29 | Компонент Icon — работа с SVG-иконками
▶ 01:01:11 | Подключение скрипта для его работы в браузере
▶ 01:03:06 | Подключение стилей
▶ 01:05:28 | Алиасы
▶ 01:08:18 | Сборка проекта и предпросмотр
▶ 01:09:16 | Заключение

📚 Ссылки из видео:
➖ Документация 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

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