Describing UI structures

JSX is the best way to describe complex UI structures. Let's look at some JSX markup that declares a more elaborate structure than a single paragraph:

import React from 'react'; 
import { render } from 'react-dom'; 
 
// This JSX markup describes some fairly-sophisticated 
// markup. Yet, it's easy to read, because it's XML and 
// XML is good for concisely-expressing hierarchical 
// structure. This is how we want to think of our UI, 
// when it needs to change, not as an inpidual element 
// or property. 
render(( 
  <section> 
    <header> 
      <h1>A Header</h1> 
    </header> 
    <nav> 
      <a href="item">Nav Item</a> 
    </nav> 
    <main> 
      <p>The main content...</p> 
    </main> 
    <footer> 
      <small>&copy; 2016</small> 
    </footer> 
  </section> 
  ), 
  document.getElementById('app') 
); 

As you can see, there's a lot of semantic elements in this markup, describing the structure of the UI. The key is that this type of complex structure is easy to reason about, and we don't need to think about rendering specific parts of it. But before we start implementing dynamic JSX markup, let's create some of our own JSX components. Here is what the rendered content looks like: