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.

babel, jsx, react.js, web dev

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}