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> );