ReactJS without JSX

Question

I use React to create a decently huge and complex DOM tree structure but I decided not to go with JSX (just to avoid the possible and inevitable conversion from JSX to JS again). Some parts of this DOM will be generated or visible to the user based on certain conditions (if-else). Otherwise, a loop may be required to create multiple HTML elements, etc.

However, I could not find any good atricles around this React explanation without JSX.

Therefore, please tell us how to use ReactJS without JSX and using Factory, class, components and others.

This is not enough documentation.

Answer 1

You can also try the library that we created in Uqbar:

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

It is fairly easy to use and provides a cleaner interface than the React out of the box interface.

Answer 2

You seem to know that JSX is converting 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 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 3

( React):

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

:

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

, __. , , JSX. , , .

Answer 4

NoJSX - JSON. , ...

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

... , , children, props type. 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 5

: https://github.com/simonrelet/react-pure-html-component-loader

html- , HTML javascript .

, , , JSX, .

Answer 6

HyperScript - JavaScript.

, createElement, JSX, JavaScript, , , JavaScript, , ,

JSX:

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

HyperScript:

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

HTML HyperScript.

:

DOM . .

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

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

factory, h, -.

//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' })
]);