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

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.

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