Describing components in JSX

In recent years, there have been many developments in JavaScript as a language itself. For instance, the new ECMAScript 2015 (ES2015-sometimes called ES6) specification, which defines the next version of JavaScript, is becoming increasingly solidified. If a developer wishes to write in ES2015-and many do-they need to use a program to convert the newer syntax into one that is compatible with the majority of browsers. Additionally, there are a number of JavaScript-like syntaxes, such as CoffeeScript and TypeScript, that ultimately have to be converted to browser-compatible JavaScript in order to function.

With all of these developments and alternate syntaxes, many developers have become accustomed to transforming code into browser-compatible JavaScript instead of writing it directly. When Facebook created React, they capitalized on this and created a syntax similar to HTML that could be used to describe components. It's called JavaScript XML (JSX), and it is a declarative markup language that is written in tandem with JavaScript to define a component's layout.

Using JSX is not an absolute requirement for writing React, but without it, React becomes verbose and cumbersome. Furthermore, since most developers will be using tools such as Babel already to convert their ES2015 code into JavaScript, writing in JSX does not add much burden because most of those tools come with support for JSX built in.

JSX looks almost exactly like HTML:

<h1> 
  Hello World! 
</h1> 

It differs from HTML5 only slightly. HTML and JSX have a common ancestor language called XML (Extensible Markup Language). HTML has since diverged in some ways from strict XML that JSX has not. For instance, in the case of a tag such as the image tag (that is, <img>) HTML and JSX differ. The <img> tag is called self-closing in that there is no standalone closing tag like we might see with a <div> or a <p>. For a self-closing tag in HTML, a forward slash before the end is optional:

HTML: <img src="my/image.jpg" > 

In JSX (and XML, for that matter), this forward slash is required:

JSX: <img src="my/image.jpg" /> 

There are other differences between JSX and HTML that arise from JSX being written in the context of JavaScript. The first is that class is a keyword in JavaScript, whereas that word is used as an attribute of HTML elements to allow elements to be targeted by CSS for styling. So, when we would use class in HTML, we instead have to use className in JSX:

HTML: <div class="news-item"> 
JSX: <div className="news-item"> 

A consolation prize for this small inconvenience is we get the benefit of being able to interleave JavaScript into places in our markup where we typically wouldn't in normal HTML. For instance, defining inline styles can use a JavaScript object, rather than cramming all properties into a string.

HTML: <div styles="background: green; color: red;"> 
JSX: <div styles={{background: 'green', color: 'red'}}> 

Notice here that there are two sets of curly braces on the style attribute's value. The outer set of curly braces is used to show that the code contained is JavaScript. The inner set is a JavaScript object literal containing the CSS style property names and their respective values.

Not only can attribute values be written in JavaScript, but so too can the content contained between JSX tags. This way, we can use dynamic properties to render text content:

HTML: <span>Hello World</span> 
JSX: <span>{'Hello' + 'World!'}</span> 

As we'll see in coming section, there are more tags available to us than we would see in normal HTML. In fact, our application-defined components themselves can be added into JSX markup:

<NewsItem> 
  Hello React! 
</NewsItem> 

Understanding JSX is paramount to starting to create React components; however, JSX makes up only a part of a complete component.