Table of Contents

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. 

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

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 

return (
   <div> 
      <Your_Component_1 />
      <Your_Component_2 />
      <Your_Component_3 />
      <Your_Component 4 />            
   </div>
);