What is JSX?

JSX stands for Javascript XML and it is a special syntax for writing HTML-like markup inside a Javascript file. Behind the scenes, the Babel compiler transforms them into React.createElement functions. So JSX is just syntactic sugar.

function App() {
  return <h1 className="title">Hello React</h1>;
}

React.createElement

 React.createElement(type, props, ...children)

This function allows us to create React elements with the given type, props and children. The type argument could be a tag name or a React component. The props argument is the props that are passed to the element and it could be either an object or null. The children argument is child nodes of the element.

For example, without using the JSX we can do the same thing.

function App() {
  return React.createElement("h1",{className: "title"},"Hello React");
}

In the above example, we created an h1 element with the class of title and "Hello React" is its child.

Why again?

So now, we know how JSX works, let's go back to our question. We must have one parent element because we can't return multiple things from a function. Let's try to return this JSX code without a parent element.

function App() {
  return (
    <h1 className="title">Hello React</h1>
    <p className="text">JSX<p/>
  );
}

If we could return JSX like the above example Babel would convert them into something like this

function App() {
  return (
   React.createElement("h1",{className: "title"},"Hello React")
   React.createElement("p", {className: "text"}, "JSX")
  );                                              
}

But it would be impossible to run this code because the Javascript functions return only one thing and React components are just regular Javascript functions. That is why we need a parent element.

function App() {
  return React.createElement(
      "div", 
      null, 
      React.createElement("h1", {className: "title"}, "Hello React"),
      React.createElement("p", {className: "text"}, "JSX")
  );
}

If you want to practice this on your own you can try Babel at babeljs.io.

Also for further reading, you can always check React Docs.