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

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

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.

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

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