0Pricing
Vue Academy · Урок

JSX во Vue 3 с Vite

@vitejs/plugin-vue-jsx, прагма JSX, функциональные компоненты и компромиссы JSX по сравнению с шаблонами

«JSX во Vue 3 с Vite» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

JSX во Vue 3

JSX позволяет писать синтаксис, похожий на разметку, внутри JavaScript; этот синтаксис компилируется в вызовы h. Vue 3 поддерживает JSX с помощью специального плагина Babel, подключенного к Vite.

Установка плагина

Официальный пакет — @vitejs/plugin-vue-jsx. Установите его как зависимость для разработки вместе с обычным плагином Vue.

npm install -D @vitejs/plugin-vue-jsx

Настройка vite.config.ts

Добавьте vueJsx() в массив plugins файла vite.config.ts. Плагин должен быть указан в этом массиве, чтобы Vite преобразовывал файлы JSX.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [vue(), vueJsx()]
});

Расширение файла .tsx

Компоненты, написанные на JSX, используют расширение .tsx (или .jsx). Плагин обрабатывает только файлы с этими расширениями.

// Greeting.tsx
export default () => <div>Hello</div>;

Функциональный компонент

Самый простой компонент — это стрелочная функция, возвращающая элемент JSX. Класс и текст выглядят так же, как в HTML.

const Comp = () => <div class="box">text</div>;

export default Comp;

class, а не className

В отличие от React, Vue JSX использует class, а не className. То же относится к for в метках.

const Card = () => (
  <div class="card">
    <label for="name">Name</label>
  </div>
);

Динамические значения

Вставляйте выражения в фигурных скобках. Реактивные ссылки внутри тела рендеринга читаются через .value.

import { ref } from "vue";

export default () => {
  const count = ref(0);
  return () => <span>Count: {count.value}</span>;
};

Обработчики событий с camelCase

Обработчики используют префикс on в camelCase: onClick, onInput, onMouseenter. Обработчик является функцией.

const Button = () => (
  <button onClick={() => alert("hi")}>
    Click
  </button>
);

Условная отрисовка

В JSX нет v-if. Используйте тернарные или логические выражения, чтобы создавать элементы по условию.

const View = (props) => (
  <div>
    {props.loading ? <p>Loading...</p> : <p>Done</p>}
  </div>
);

Отрисовка списков

Заменяйте v-for на map. Указывайте key для каждого элемента так же, как в шаблонах.

const List = (props) => (
  <ul>
    {props.items.map((item) => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

Использование defineComponent для свойств

Для типизированных свойств и управления жизненным циклом оберните логику в defineComponent. Функция setup возвращает функцию рендеринга, которая возвращает JSX.

import { defineComponent } from "vue";

export default defineComponent({
  props: { title: String },
  setup(props) {
    return () => <h1>{props.title}</h1>;
  }
});

Быстрая проверка

Какой плагин включает JSX в проекте Vue 3 на Vite и куда его нужно добавить?

Итоги

JSX во Vue 3 включается добавлением vueJsx() из @vitejs/plugin-vue-jsx в массив плагинов Vite и написанием компонентов в файлах .tsx. Используйте class, а не className, обработчики onClick в camelCase и defineComponent, когда нужны типизированные свойства.

Часто задаваемые вопросы

Урок «JSX во Vue 3 с Vite» бесплатный?

Да — полный текст урока «JSX во Vue 3 с Vite» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «JSX во Vue 3 с Vite»?

@vitejs/plugin-vue-jsx, прагма JSX, функциональные компоненты и компромиссы JSX по сравнению с шаблонами Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «JSX во Vue 3 с Vite»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Подробный разбор функции h()
  2. JSX во Vue 3 с Vite
  3. Динамические компоненты с функциями render
  4. Шаблон компонентов высшего порядка (HOC)
← Назад к Vue Academy