How to write this without using JSX?
JavaScript
x
12
12
1
var CommentBox = React.createClass({
2
render: function() {
3
return (
4
<div className="commentBox">
5
<h1>Comments</h1>
6
<CommentList />
7
<CommentForm />
8
</div>
9
);
10
}
11
});
12
This comes from the react.js tutorial: http://facebook.github.io/react/docs/tutorial.html
I know I can do the following:
JavaScript
1
5
1
return (
2
React.createElement('div', { className: "commentBox" },
3
React.createElement('h1', {}, "Comments")
4
)
5
But this only adds one element. How can I add more next to one another.
Advertisement
Answer
You can use the online Babel REPL (https://babeljs.io/repl/) as a quick way to convert little chunks of JSX to the equivalent JavaScript.
JavaScript
1
12
12
1
var CommentBox = React.createClass({displayName: 'CommentBox',
2
render: function() {
3
return (
4
React.createElement("div", {className: "commentBox"},
5
React.createElement("h1", null, "Comments"),
6
React.createElement(CommentList, null),
7
React.createElement(CommentForm, null)
8
)
9
);
10
}
11
});
12
It’s also handy for checking what the transpiler outputs for the ES6 transforms it supports.