Шаблоны vs JSX

<template>
    <div class="card">
        <h1 v-if="showTitle">{{ title }}</h1>
        <ul>
            <li v-for="item in items" :key="item.id">
                {{ item.name }}
            </li>
        </ul>
        <button @click="handleClick">Клик</button>
    </div>
</template>

return (
    <div className="card">
        {showTitle && <h1>{title}</h1>}
        <ul>
            {items.map(item => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
        <button onClick={handleClick}>Клик</button>
    </div>
);

<p v-if="show">Текст</p>
<p v-else-if="loading">Загрузка</p>
<p v-else>Скрыто</p>

{show ? <p>Текст</p> : loading ? <p>Загрузка</p> : <p>Скрыто</p>}

<li v-for="item in items" :key="item.id">
    {{ item.name }}
</li>

{items.map(item => (
    <li key={item.id}>{item.name}</li>
))}

<button @click="handleClick">Клик</button>
<button @click.stop="handleClick">Клик</button>
<form @submit.prevent="submit">

<button onClick={handleClick}>Клик</button>
<button onClick={e => { e.stopPropagation(); handleClick(); }}>Клик</button>
<form onSubmit={e => { e.preventDefault(); submit(); }}>

<input v-model="name">

<input
    value={name}
    onChange={e => setName(e.target.value)}
/>

<div :class="{ active: isActive, disabled: !isEnabled }">

<div className={clsx({ active: isActive, disabled: !isEnabled })}>

<div :style="{ color: 'red', fontSize: '16px' }">

<div style={{ color: 'red', fontSize: '16px' }}>

<UserCard />
<user-card />

<UserCard />

<template>
    <Card>
        <template #header>Заголовок</template>
        Основной контент
    </Card>
</template>

<Card
    header={<h1>Заголовок</h1>}
>
    Основной контент
</Card>

<template>
    <h1>Заголовок</h1>
    <p>Текст</p>
</template>

<>
    <h1>Заголовок</h1>
    <p>Текст</p>
</>

<div v-html="content"></div>

<div dangerouslySetInnerHTML={{ __html: content }} />

@click="handleClick(arg)"
@click="count++"

onClick={() => handleClick(arg)}
onClick={() => setCount(count + 1)}