JSX - Markup in JS

When defining our component templates in React we use a form of HTML/XML embedded within our Javascript code. This markup is called JSX.

Table of Contents

1. JSX
2. Babel Compiles JSX into Pure Javascript
3. JSX Validity
4. Embedding Expressions in JSX
5. Rendering JSX
6. JSX Quirks
7. JSX Quirks - Forms

JSX

Consider the following Javascript:

const header = <h1>Hello JSX!</h1>;

Wait! Is that HTML mixed in with Javascript?

Almost…

It’s JSX, a syntax extension to Javascript that allows us to declare markup within our code.

JSX is XML in Javascript.

But watch out, JSX isn’t built into Javascript. We need Babel to transpile our JSX into regular Javascript.

Babel Compiles JSX into Pure Javascript

Go back to the last CodePen and click the “View Compiled” button to see the Javascript version of the JSX. Babel transpilation is built in to our React CodePen Template settings.

Resources

• W3 Schools Intro to XML
• Babel - The transpiler that allows us to use JSX in our Javascript.

JSX Validity

Browsers are very forgiving when parsing markup. The following is valid HTML5:

<p>We are not closing our paragraphs.
<p><img src="image.png">
<p>And the img tag does not self close.

In order to be valid JSX we’d have to include the paragraph close tags and self-close the image tag with a trailing / like this:

<img src="image.png" />

The rules of JSX:

• Tags with content must have close tags.
• Tags without content must “self-close” with a forward slash.

Embedding Expressions in JSX

Use curly “moustache” braces to echo variables in JSX:

const name = "Moustache Face";
const element = <h1>Hello, {name}!</h1>;

// <h1>Hello, Moustache Face!</h1>

Any valid Javascript expression works:

const math = <p>2 plus 2 = {2 + 2}</p>;
const text = "Wally Glutton is a Ghost.";
const h2 = <h2>{text.replace("Wally", "Daisy")}</h2>;

// <p>2 plus 2 = 4</p>
// <h2>Daisy Glutton is a Ghost.</h2>

Use curly braces to set element attributes:

const filename = "image.png";
const image = <img src={filename} />;

// <img src="image.png" />

⚠️ Warning: When setting attributes don’t wrap curly braces in quotes.

If you have: const inputText = "Wooky!";

✔️ Do: <input value={inputText} />

❌ Don’t: <input value="{inputText}" />

❌ Don’t: <input value="inputText" />

Rendering JSX

We can display JSX within a webpage using ReactDOM.render():

See the Pen Our First JSX Element by Kyle Geske (@stungeye) on CodePen.

jsxElement - The first argument of ReactDOM.render() is the JSX to render.

rootElement - The second arg is the render location in the HTML (DOM reference).

📢 Note: Click the HTML tab to see the div#root referenced by rootElement.

JSX Quirks

As you work with JSX you’ll notice that it differs from HTML in a few ways:

Assigning a Class an Element

✔️ Do: Use className attribute instead of a class attribute.

Event Handler Attributes

✔️ Do: Use CamelCase for all event attributes. Example: onClick instead of onclick.

Associating Input Elements with Labels

✔️ Do: Use htmlFor attribute instead of a for attribute.

JSX Quirks - Forms

A few JSX form inputs also differ from HTML:

Textarea Element Values

✔️ Do use a value attribute: <textarea value="☕" />

❌ Don’t use content: <textarea>☕</textarea>

Specifying Selected Options

✔️ Do specific selected option using a value attribute on the select:

<select value="⚡">
  <option value="⚡">
  <option value="🎈">
</select>

❌ Don’t use the selected attribute to select an option:

<select>
  <option selected value="⚡">
  <option value="🎈">
</select>