JSX and Babel
Last updated
Was this helpful?
Last updated
Was this helpful?
Consider this variable declaration:
This funny tag syntax is neither a string nor HTML.
It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
JSX produces React “elements”. We will explore rendering them to the DOM in the . Below, you can find the basics of JSX necessary to get you started.
React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
Instead of artificially separating technologies by putting markup and logic in separate files, React with loosely coupled units called “components” that contain both. We will come back to components in a , but if you’re not yet comfortable putting markup in JS, might convince you otherwise.
React using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
With that out of the way, let’s get started!
In the example below, we declare a variable called name
and then use it inside JSX by wrapping it in curly braces:
In the example below, we embed the result of calling a JavaScript function, formatName(user)
, into an <h1>
element.
After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
This means that you can use JSX inside of if
statements and for
loops, assign it to variables, accept it as arguments, and return it from functions:
You may use quotes to specify string literals as attributes:
You may also use curly braces to embed a JavaScript expression in an attribute:
Don’t put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
Warning:
Since JSX is closer to JavaScript than to HTML, React DOM uses
camelCase
property naming convention instead of HTML attribute names.
If a tag is empty, you may close it immediately with />
, like XML:
JSX tags may contain children:
You can put any valid inside the curly braces in JSX. For example, 2 + 2
, user.firstName
, or formatName(user)
are all valid JavaScript expressions.
We split JSX over multiple lines for readability. While it isn’t required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of .
For example, class
becomes in JSX, and tabindex
becomes .