Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

What Is JSX? [Snippet]

DZone's Guide to

What Is JSX? [Snippet]

JSX is a syntax extension for making your React-based JavaScript code less verbose. Read for a quick overview of how to use it.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

JSX stands for JavaScript XML. It is used with React to describe what the UI should look like. JSX produces React “elements” in a familiar and easy manner. React doesn’t require using JSX, but you can 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. If you want to create a React element without JSX you need to write something like this:

var temp = React.createElement( ‘h1’,  null,  ‘test’ );

By using JSX, the above code is reduced to the following:

var temp = <h1>test</h1>

Unfortunately, browsers don’t know about JSX. So we need to compile JSX to regular JavaScript. This can be done by using Babel.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
jsx ,web dev ,react.js ,babel

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}