Learn what JSX is, and how to use JSX to create React components for your Gatsby site.
What is JSX?
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>) or by self-closing the tag using
/>. The following example uses JSX to create a form control and label.
htmlFor replaces the
for attribute, and the
className attribute replaces
JSX also uses camelCase for hyphenated and multi-word attributes and CSS properties. For instance, the
tabindex attribute becomes
backgroundColor and the SVG
stroke-width attribute becomes
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.
Learn more about JSX
- Introducing JSX from the React docs.
- JSX In Depth from the React docs.
- JSX Specification (draft)
- WTF is JSX