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.

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.

• javascript
• reactjs

• 1 facebook.github.io/react/docs/… – Henrik Andersson Commented Nov 4, 2015 at 7:58
• packtpub.com/books/content/using-reactjs-without-jsx – Errorpro Commented Nov 4, 2015 at 10:18

7 Answers 7

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 with React.createElement() 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 })
    );
  })
);

I use the following trick (mimicking the first example on the React homepage):

const __ = Object.assign(React.createElement, React.DOM);

var HelloMessage = React.createClass({
  render: function() {
    return __.div({}, 'Hello ', this.props.name);
  }
});

ReactDOM.render(__(HelloMessage, {name:"John"}), document.getElementById('root'));

Here are all four homepage examples:

• https://jsfiddle.net/b4aj6gL9/
• https://jsfiddle.net/fd38ya0r/
• https://jsfiddle.net/f4uqqrjv/
• https://jsfiddle.net/905tL9k6/

While this code does use an unfamiliar idiom, the __. prefix offers a strong visual mnemonic that is just as readable as JSX. I'd say more readable, thanks to the absence of close tags.

You could also try the library we made at Uqbar:

https://www.npmjs.com/package/njsx

It's quite easy to use and provides a cleaner interface than the React out-of-the-box interface.

NoJSX is a lightweight JSON based alternative. You can create a tree like the below...

- div.container.container--app
    -- div.jumbotron
        --- h1
        --- p

... by defining the tree structure of elements represented with properties including children, props and type. These mirror the arguments for React.createElement.

const pageHeader = {
  children: [
    {
      children: 'Hello World.',
      type: 'h1'
    },
    {
      children: 'Foobar.',
      type: 'p'
    }
  ],
  props: { className: 'jumbotron' },
  type: 'div'
};

const templateData = {
  children: [
    {
      props: { title },
      type: Helmet
    },
    pageHeader
  ],
  props: { className: 'container container--app' },
  type: 'div'
};

const template = new NoJSX(templateData);
return template.compile();

This is my preferred approach: https://github.com/simonrelet/react-pure-html-component-loader

This component is supposed to let you write pure html templates to use as components in react without mixing HTML with javascript in such a horrible way.

I see the repository has not been updated for a year, so this guy needs help if we want to be able to use react without that horrible JSX mixed inside the scripts.