Replacing JSX with Template Literals

2 min readNov 7, 2017

Over the last few months the availability of easy to use in-line JSX without a build process has been reduced. First React removed direct support and then Babel removed support from its client side library. There are plenty of reasons to run a build process for substantive web and mobile apps; however, there are also times when it is not convenient or need.

Through the use of TLX, template literals can be used as a replacement for JSX with React, Preact and other libraries. This article shows how.

Let’s start with something basic, “Hello World”. Below is the HTML with JSX commented out and the equivalent TLX.

<html>
<head>
<script src="../browser/tlx-core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/preact@8.2.6/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>

Pretty, simple, just replace the JSX parentheses with back-ticks, put a $ before curly braces and insert the call to tlx!

“Yeah”, you say, “But, the example is simple. What if I need to put logic in the TLX?” See a classic Todo example below.

<html>
<head>
<script src="../browser/tlx-core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/preact@8.2.6/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>

As you can see, the replacement rules remain the same and you can reference functions or insert complex logic just like you would with JSX!

Here is a little history and further information. Three years ago the developers of React posted their thoughts on template literals, http://facebook.github.io/jsx/#why-not-template-literals. Two years ago on GitHub @choojs responded with hyperx, https://github.com/choojs/hyperx, a library that has received far too little attention. If all you want is a JSX replacement, you need go no further. However, if you want more, explore TLX. It is a fork of `hyperx` with substantive enhancements to optionally support:

its own render function,
interpolation of template literals directly in HTML (great for SEO),
HTML attribute directives like Vue (including custom ones),
first class components like React or Vue.

Watch for follow-up articles addressing each of the above features.

See TLX on Github, https://github.com/anywhichway/tlx, for more information.

Replacing JSX with Template Literals

Written by AnyWhichWay