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

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

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.

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

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 }}