Is it possible to call ReactDOM.render() from JS when using JSX?

Question

React

I am studying React and the question arose:
As I understand it, the code written with JSX does not overlap in scope with regular JS. So the question is, if I want to get the data in "regular" JS and then call ReactDOM.render() after getting it, how is it possible to do that?

Answer 1

JSX is transformed into regular js.

var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

It is correct to pass data to ReactDOM.render( ), only as parameters.

Answer 2

Thanks everyone.
I realized that the main mistake was in translating JSX to JS through babel and not through the IDE.