JSX

Learn what JSX is, and how to use JSX to create React components for your Gatsby site.

What is JSX?

JSX is an XML-like syntax extension for JavaScript that’s used to create React components. It’s the recommended way to create components, and a more readable alternative to using React.createElement(). When you create components for your Gatsby site, you’re using JSX.

JSX tags resemble HTML and XML tags, and follow similar rules of grammar. As with XML, JSX tags must be closed, either by using a closing tag (e.g.: <p> and </p>) or by self-closing the tag using />. The following example uses JSX to create a form control and label.

JSX looks like HTML, but it’s really an alternate way to write JavaScript that describes a user interface. JSX tags represent JavaScript objects such as HTML and SVG elements.

JSX is JavaScript, so HTML and XML attributes that conflict with reserved words in JavaScript have been renamed. As shown in the preceding example, htmlFor replaces the for attribute, and the className attribute replaces class.

JSX also uses camelCase for hyphenated and multi-word attributes and CSS properties. For instance, the tabindex attribute becomes tabIndex, background-color becomes backgroundColor and the SVG stroke-width attribute becomes strokeWidth.

It isn’t necessary to enclose multi-line JSX in parentheses, but doing so is a good practice. Parentheses reduce the likelihood of errors caused by automatic semicolon insertion.

You can’t use JSX by itself. Browsers do not understand it. JSX tags must be converted to standard JavaScript by a transpiler. A transpiler is software that converts code from one language or syntax to another. Gatsby and React use Babel to transpile JSX into browser-compatible JavaScript.

Learn more about JSX

• Introducing JSX from the React docs.
• JSX In Depth from the React docs.
• JSX Specification (draft)
• WTF is JSX