ReactJS without JSX

Question

I am using React to generate a decently huge and complicated DOM tree structure but I choose not to go with JSX (just to avoid the eventual and unavoidable transformation from JSX to JS again). Some portions of this DOM will be generated or visible to user based on certain (if-else) conditions. In another case, a loop might be required to generate a few HTML elements and so on.

However, I could not find any good atricles around that explain React without JSX.

Hence, please guide and show how to use ReactJS without JSX and using Factory, class, components and others.

There are not enough documentations on this.

Answer 1

It seems like you're aware JSX converts to JS.

So instead of writing JSX ...

// jsx
var data = [1,2,3];

var nodes = <ul>{data.map(function(p,i) {
  return <li><Person key={i} id={p} /></li>; 
})}</ul>;

Just write the JS instead !

// js
var data = [1, 2, 3];

var nodes = React.createElement(
  "ul",
  null,
  data.map(function (p, i) {
    return React.createElement(
      "li",
      null,
      React.createElement(Person, { key: i, id: p })
    );
  })
);