JSX Representing Objects

Introduction

JSX could be used to represent objects, following three representations are equal.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

Advanced

Following element has children and grandchildren. Followings are equal

<div className="commentBox">
    <h1>Comments</h1>
    <CommentList />
    <CommentForm />
</div>

React.createElement(
    "div",
    { className: "commentBox" },
    React.createElement(
        "h1",
        null,
        "Comments"
    ),
    React.createElement(CommentList, null),
    React.createElement(CommentForm, null)
);

Tools

You could use Babel to convert them: https://babeljs.io/repl/