Замена JSX шаблонными литералами

За последние несколько месяцев доступность простого в использовании встроенного JSX без процесса сборки уменьшилась. Сначала React удалил прямую поддержку, а затем Babel удалил поддержку из своей клиентской библиотеки. Есть множество причин для запуска процесса сборки основных веб- и мобильных приложений; однако бывают случаи, когда это неудобно или неудобно.

Благодаря использованию TLX, литералы шаблонов могут использоваться в качестве замены JSX с помощью React, Preact и других библиотек. В этой статье показано, как это сделать.

Начнем с простого "Hello World". Ниже приведен HTML-код с закомментированным JSX и эквивалентный TLX.

<html>
<head>
<script src="../browser/tlx-core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/preact.min.js">
</script>
</head>
<body>
<div id="helloworld"></div>
<script>
const el = document.getElementById("helloworld"),
  message = "Hello World";
//preact.render((<div>{message}</div>),el);
preact.render(tlx`<div>${message}</div>`,el);</script>
</body>
</html>

Красиво, просто, просто замените круглые скобки JSX обратными галочками, поставьте $ перед фигурными скобками и вставьте вызов tlx!

«Да», - скажете вы, - «Но пример прост. Что, если мне нужно добавить логику в TLX? » См. Классический пример Todo ниже.

<html>
<head>
<script src="../browser/tlx-core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/preact.min.js"></script>
</head>
<body>
<div id="todos"></div>
<script>
const todos = ["task one","task two"],
  addItem = (event) => {
    todos.push(event.target.value);
    runTodo();
  },
  removeItem = (event) => {
    const i = todos.indexOf(event.target.innerText);
    todos.splice(i,1);
    runTodo();
    return false;
  },
  runTodo = () => {
    const el = document.getElementById("todos");
    while(el.lastChild) el.removeChild(el.lastChild);
 /* preact.render(
       (<div>
         <p>My Tasks</p>
         <form>
         <input type="text" onChange="{addItem}">
         <ul>{todos.map(item =>
           (<li>
            <a href="javascript:" onClick="{removeItem}">
            {item}
            </a>
            </li>))}
         </ul>
         </form>
       </div>),
     el); */
    preact.render(tlx`<div>
         <p>My Tasks</p>
         <form>
         <input type="text" onChange="${addItem}">
         <ul>${todos.map(item =>
           tlx`<li>
            <a href="javascript:" onClick="${removeItem}">
            ${item}
            </a>
            </li>`)}
         </ul>
         </form>
       </div>`,
   el);
 };
runTodo();
</script>
</body>
</html>

Как видите, правила замены остаются прежними, и вы можете ссылаться на функции или вставлять сложную логику, как если бы вы делали это с JSX!

Вот небольшая история и дополнительная информация. Три года назад разработчики React опубликовали свои мысли о шаблонных литералах http://facebook.github.io/jsx/#why-not-template-literals. Два года назад на GitHub @choojs ответил гиперксом, https://github.com/choojs/hyperx, библиотекой, которой уделялось слишком мало внимания. Если все, что вам нужно, это замена JSX, вам не нужно идти дальше. Однако, если вы хотите большего, изучите TLX. Это форк hyperx с существенными улучшениями, которые могут дополнительно поддерживать:

собственная функция рендеринга,
интерполяция шаблонных литералов прямо в HTML (отлично подходит для SEO),
Директивы атрибутов HTML, такие как Vue (включая пользовательские),
компоненты первого класса, такие как React или Vue.

Следите за последующими статьями, посвященными каждой из вышеперечисленных функций.

См. TLX на Github, https://github.com/anywhichway/tlx, для получения дополнительной информации.

Замена JSX шаблонными литералами

Вопросы по теме