Everything you need to know about JSX

For the most part, writing JSX is just like writing HTML or JSTL. Here are the differences. (It may be helpful to know that most anything you read about JSX in the context of React will apply to jsxQuery as well.)

You can run any of these examples in the provided REPL. Just run $ npm run sandbox inside the repo directory, and your JSX will automatically get transformed as you enter it in the Terminal window.

Element Children

Nesting elements

As you'd expect, a JSX element accepts as children both strings and other JSX elements.

var header = <h1>Lorem ipsum <strong>dolor</strong> sit amet</h1>;
// equivalent to:
// jsxQuery.createElement("h1", null,
//   "Lorem ipsum ",
//   jsxQuery.createElement("strong", null, "dolor"),
//   " sit amet"
//   );

header.markup();
// "<h1>Lorem ipsum <strong>dolor</strong> sit amet</h1>"

Dynamic children

Since you can assign an Element object to a variable, you can pass that into a JSX expression. By doing this, you can accomplish the same thing as you would by nesting tags.

var dolor = <strong>dolor</strong>;
var header = <h1>Lorem ipsum {dolor} sit amet</h1>;

header.markup();
// "<h1>Lorem ipsum <strong>dolor</strong> sit amet</h1>"

Element Attributes

Dynamic attributes

When you want make a dynamic attribute value, the {} braces replace the "" quotes.

var google = 'http://google.com';
var googleLink = <a href={google} target="_blank">Google</a>;
// equivalent to:
// jsxQuery.createElement("a", { href: google, target:" _blank" }, "Google");

googleLink.markup();
// '<a href="http://google.com" target="_blank">Google</a>'

Boolean attributes

Boolean attributes are actually more straightforward in JSX than they are in HTML. You can still write them in the usual HTML way, but you can alternatively use JavaScript true and false and your attributes will render in a sensible fashion.

var disabledButton = <button disabled={true}>Go!</button>;
disabledButton.markup();
// '<button disabled>Go!</button>'

var enabledButton = <button disabled={false}>Stop!</button>;
enabledButton.markup();
// '<button>Stop!</button>'

Spread attributes

Since your JSX attributes get transformed into a regular JavaScript object, there's an easy way to combine them with an existing object. This is especially useful when you're dealing with a whole lot of attributes at once.

var inputAttributes = { disabled: true, type: 'submit', value: 'Enter your info' };
var input = <input id="your-info" {...inputAttributes} />

input.markup()
// '<input id="your-info" disabled type="submit" value="Enter your info" />'

This is a nod to the new spread operators that have been introduced starting with ES2015.

Avoiding JavaScript keywords

Because class and for are JavaScript keywords, replace them with className and htmlFor in your JSX.

var label = <label className="form-label" htmlFor="username">Username:</label>;

label.markup();
//'<label class="form-label" for="username">Username:</label>'

Dynamic text is escaped by default

Any text entered via a JSX expression (using {} curly braces) will be escaped by default. This is a security measure, done to prevent XSS attacks.

var ampersandLiteral = <span>Tom &amp; Jerry</span>
ampersandLiteral.markup()
// '<span>Tom &amp; Jerry</span>'

var ampersandInJSXExpression = <span>{'Tom &amp; Jerry'}</span>
ampersandInJSXExpression.markup()
// '<span>Tom &amp;amp; Jerry</span>'

There are a number of ways to get around this. If you are 100% sure that your dynamic content is safe, this is the most straightforward way to insert a string as raw HTML:

var rawTextChild = <span dangerouslySetInnerHTML={{ __html: 'Tom &amp; Jerry'}} />
rawTextChild.markup()
// '<span>Tom &amp; Jerry</span>'

This API makes it impossible to forget the risk involved when dealing with dynamic content.