React Without JSX, t7 To The Rescue!
Tags: react, javascript, t7
Published: 2017-04-07 14:49:28

---
title: React Without JSX, t7 To The Rescue!
published: true
description: How to use React with t7 instead of JSX.
cover_image: 
tags: react, javascript, t7
---

_TL;DR Here is a [repository](https://github.com/kay-is/react-t7-example) with a working example. :)_

## Why Not JSX

When using [React](https://facebook.github.io/react/), the default way to do things is [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html). It's a nice syntax extension for JavaScript and helps to get rid of the whole `React.createElement()` cruft you would end up without it. It compiles down to simple function calls and is not as much magic as one would expect.

Problem with this approach, you need to pre-process your JavaScript before you can deliver it to your clients. While most developers who use JavaScript do this anyway, because of [Flow](https://flow.org/) or fancy ES20thingamabob syntax extensions, this might not be your cup of tea. 

Luckily __JSX__ compiles down to simple function calls, so you can get away without it.

## How To Use React Without JSX

One way is to simply use the function that is called, namely `React.createElement`.

    // JSX
    const title = <h1>Hello, World!</h1>;

    // JS
    const title = React.createElement("h1", null, "Hello, world1");

It's the easiest way, but it comes at a cost: The code size gets out of hand rather quick, even with simple markup.

    // JSX
    const content = (
      <div>
       <p>A paragraph of text.</p>
       <p>Another paragraph, with different text</p>
      </div>
    );

    // JS
    const content = React.createElement("div", null,
      React.createElement("p", null, "A paragraph of text."),
      React.createElement("p", null, "Another paragraph of different text.")
    );

Also, you lose a feature of JSX (which I like rather much): Scanning your code for markup, because it doesn't stick out as much anymore.

## How To Use t7 Instead

Another way is a small library called [t7](https://github.com/trueadm/t7). It uses a rather young feature of JavaScript called _tagged template literals_. These are functions that can be called by simple creating a prefixed [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).

    // Template Literal With Place Holder
    const expression = 'World'
    const text = `Hello, ${expression}!`;

    // Tagged Template With Place Holder
    const expression = 'World'
    const text = somePrefix`Hello, ${expression}!`;

The difference between both is, that the second will pass the whole template content into a function called `somePrefix` that can do something with it.

__t7__ now is such a function. It implements a parser that can read __JSX__-like syntax inside a string template and convert it into regular function calls. For example to `React.createElement`.

    // JSX
    const expression = 'World'
    const text = <h1>Hello, {expression}!</h1>;

    // t7
    const expression = 'World'
    const text = t7`<h1>Hello, ${expression}!</h1>`;

_Notice that JSX uses `{}` for expressions and template literals use `${}`._

Nice, hu?

But this isn't all. __t7__ also allows you to create and register components, the bread and butter of every React application!

    // JSX
    const MyButton = props => (
      <div onClick={props.onClick} style={{background: "#ff0"}}>
        Hello, World!
      </div>
    );

    const Application = () => (
      <div>
        <MyButton onClick={() => alert("!")} />
      </div>
    );

    // t7
    t7.module(t7 => {
      const MyButton = props => t7`
        <div onClick=${props.onClick} style=${{background: "#ff0"}}>
          Hello, World!
        </div>
      `;
      t7.assign("MyButton", MyButton); 

      const Application = () => t7`
        <div>
          <MyButton onClick=${() => alert("!")} />
        </div>
      `;
    });

Components can be created almost like with __JSX__, but you have to register them with `t7.assign`, this call _has to be_ inside a `t7.module` callback and the component will only be available _inside_ this callback to prevent creating global components.

## Conclusion

__t7__ is a easy way to write markup _inside_ of JavaScript without the need of JSX and its extra compiler. It leverages new ES2015 features to accomplish this. The result is completely valid JavaScript and you still find your markup rather quick while scanning the source.