Until now, we have seen how JSX syntax is easy to understand and visualize, the reason being the semantic syntax structure.

JSX converts your JavaScript code into a more standard solution, which gives clarity to set your semantic syntax and significant component. With the help of JSX syntax, you can declare the structure of your custom component with information, the way you do in HTML syntax, and that will provide the magic to transform your syntax to JavaScript functions.

The React.DOM namespace helps us to use all HTML elements with the help of ReactJS: Isn't it an amazing feature! Moreover, the good part is that you can write your own named components with the help of the React.DOM namespace.

Please check out the following simple HTML markup and how JSX components help you to have semantic markup:

<div className="divider"> 
<h2>Questions</h2><hr /> 
</div> 

As you can see in the preceding example, we have wrapped <h2>Questions</h2><hr /> with the <div> tag, which has a className="divider". So, in the React composite component, you can create a similar structure and it is as easy as when working with HTML coding with semantic syntax:

 <Divider> Questions </Divider>

Let's see in detail what the composite component is and how we can build it.