没有JSX的ReactJS

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 })
    );
  })
);

Answer 2

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.

Answer 3

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();

Answer 4

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.

Answer 5

📖 Official documentations

Here is an official documentation how to use React without JSX.

Beside the mentioned alternative libraries to JSX,

I can suggest React on lambda which makes coding on react in more functional way.

Answer 6

HyperScript Helpers are a JavaScript based option.

Less verbose than createElement and often JSX, but still plain JavaScript, so for example JavaScript comments, arrays, objects and functions are used,

JSX:

<MyComponent className='className'>Hi</MyComponent>

versus HyperScript Helpers:

MyComponent('.className', ['Hi'])

Example HTML to HyperScript converter .

Usage from React HyperScript Helpers library :

DOM components are really easy to use. Just import and go.

import { div, h2 } from 'react-hyperscript-helpers';

export default () => div('.foo', [ h2('Hello, world') ]);

For custom components you can either create a factory function or use the h function, similar to react-hyperscript.

//MyComponent
import { div, hh } from 'react-hyperscript-helpers';

export default hh(() => div('Nifty Component'));

//Container
import MyComponent        from './MyComponent';
import SomeOtherComponent from 'who-whats-its';
import { div, h }         from  'react-hyperscript-helpers';

export default () => div('.foo', [
  MyComponent(),
  h(SomeOtherComponent, { foo: 'bar' })
]);

Answer 7

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.