O'Reilly logo

Developing a React Edge: The JavaScript Library for User Interfaces by The League of Extraordinary Developers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 2. JSX

React is a rather opinionated library with strong beliefs on how you should structure and manage the data in your app. JSX is the result of one of those strongly held beliefs. Specifically React embraces the idea that markup, and the code which generates it, are inherently tied together. This is expressed in React components by rendering the markup directly within Javascript, using the full expressive power of the language. 

To that end, React introduces an optional markup language remarkably similar to HTML. For example, a function call in plain React to create a header might look like this.

React.DOM.h1({className: 'question'}, 'Questions');

But with JSX it becomes much more familiar and terse looking markup.

<h1 className= ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required