====== What is JSX ======
Do not let the name fool you. It is basically JSX is a HTML-like language for React component to return it UI. It is a syntactic sugar for React.createElement(). The following React functional component return a JSX within the ''()''.


**One thing to note that for HTML class name, JSX does not support the name ''class'', and we need to use ''className'' instead.** Otherwise, it just like write HTML with binding supported.

<code>
function App() {
  return (
      <div className={"my-class-name, btn"}>
          Work times fun!
      </div>
  );
}
</code>

===== Trouble Shooting =====
==== Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? ====
You need to put your JSX code inside one container, like putting everything inside a div block like
<code>
return (
   <div> 
      <Your_Component_1 />
      <Your_Component_2 />
      <Your_Component_3 />
      <Your_Component 4 />            
   </div>
);
</code>