Writing more Complex Elements using JSX

We can combine multiple JSX elements or components into one big element and render it into the root. For example we can create a heading and a paragraph element and embed it into a <div> element:

If you look at the above code, we have created the element main using two other elements, heading and paragraph.

We used the expression embedding syntax {} to embed other elements inside the main <div> and rendered it through the root's render method. This can be repeated as many times as wanted to create further complex elements.