Если вы хотите создавать ванильные приложения JavaScript, JSX будет полезным инструментом. Вите делает это легко.

Некоторое время можно было использовать JSX без React, но настройка инструментов была неудобной. В этой статье от 2020 года показан способ реализовать это самостоятельно, но с тех пор варианты расцвели. Мощный инструмент Vite означает, что мы можем полностью избежать сложностей Webpack и Babel.

JSX предлагает множество возможностей для обычного разработчика JavaScript, потому что это очень удобный способ представления HTML в JavaScript, позволяющий легко возвращать элементы DOM непосредственно из функций JavaScript, например:

const data = { name: 'Luna the Cat', age: 2 }
return (
  <img src="/img/cat2.jpg" alt="cat">
  <p>This is {data.name} who is {data.age} years old.</p> )

Это означает, что вы можете объединить все функции и HTML, которые работают с определенным компонентом страницы, в одном файле .jsx, что является действительно полезным способом работы. Это также может быть большим подспорьем в ситуациях рендеринга на стороне сервера.

Если вы не знакомы с Vite, я бы сказал, что пришло время его проверить. Это значительно сокращает конфигурацию, необходимую для настройки современных сценариев со всеми видами кода, и упрощает реализацию JSX без React.

Чтобы это работало — и иметь полностью работающий сервер разработки с горячей перезагрузкой модулей, с которым вы можете начать работать менее чем за 5 минут — вот что вам нужно сделать:

npm init @vitejs/app

Когда он запрашивает имя проекта, введите

vite-jsx

Когда вас попросят выбрать фреймворк, выберите «vanilla» (NB: это означает отсутствие фреймворка — ура!)

Затем он спрашивает, хотите ли вы JavaScript или TypeScript, и это зависит от вас, но я выбираю JavaScript.

Теперь просто:

cd vite-jsx
npm install
code .

и ваш проект откроется в vscode.

Чтобы использовать JSX для ванильного JavaScript, вам просто нужно внести пару изменений в проект. Во-первых, установите этот пакет, что фактически преобразует JSX в DOM.

npm install start-dom-jsx

Vite настолько уверен в отсутствии конфигурации, что в ванильном шаблоне даже нет файла конфигурации. Но для этого он нам нужен.

touch vite.config.js

Отредактируйте файл, он просто должен содержать эти строки, которые настраивают ESBuild для использования более новой версии преобразования JSX:

export default {
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
}

И на этом мы действительно закончили. Когда вы создаете файл JSX, просто убедитесь, что вместо импорта React у вас есть это в верхней части файла:

import { h } from 'start-dom-jsx'

Если вы также хотите использовать фрагменты, вам необходимо иметь

import { h, Fragment } from 'start-dom-jsx'

Теперь вы можете написать файл .jsx. Вы можете просто рассматривать его как JavaScript и импортировать в файл main.js следующим образом:

import component from './cool-component.jsx'

или используйте его любым другим способом, который вы считаете нужным, потому что это ванильный JavaScript, и возможность использовать JSX без React дает вам возможность заставить его работать по-своему. Если вам нравится такой подход, но вы хотите использовать более похожий на React фреймворк для поддержки своей работы, взгляните на Preact — для этого также доступен пресет Vite.

Вы можете просмотреть очень простой демонстрационный проект на github.