For those who don&#x27;t know JSX, here&#x27;s what it looks like in JavaScript (which might be easier to understand):<p><pre><code>  const el = React.createElement.bind(React);
  const DATA = {    
    name: &#x27;John Smith&#x27;,
    imgURL: &#x27;http:&#x2F;&#x2F;lorempixel.com&#x2F;100&#x2F;100&#x2F;&#x27;,
    hobbyList: [&#x27;coding&#x27;, &#x27;writing&#x27;, &#x27;skiing&#x27;]
  };

  const App = ({ profileData }) =&gt; (
    el(&#x27;div&#x27;, {},
      el(Profile, { ...profileData }),
      el(Hobbies, { ...profileData })
    )
  );

  const Profile = ({ name, imgURL }) =&gt; (
    el(&#x27;div&#x27;, {},              
      el(&#x27;h3&#x27;, {name}),
      el(&#x27;img&#x27;, {src: imgURL})
    )
  );

  const Hobbies = ({ hobbyList }) =&gt; (
    el(&#x27;div&#x27;, {},
      el(&#x27;h5&#x27;, {}, &#x27;My hobbies:&#x27;),
      el(&#x27;ul&#x27;, {},
        hobbyList.map((hobby, idx) =&gt; el(&#x27;li&#x27;, {key: idx}, &#x27;hobby&#x27;))
      )
    )
  );

  ReactDOM.render(el(App, {profileData: DATA}), document.getElementById(&#x27;content&#x27;));
</code></pre>
The function el creates an element with the type as the first parameter, the attributes as the second parameter, and any child elements as the parameters after.