Is it possible to translate JSX code into JS (ES5?) Code without installing 20 web servers 5 interpreters 3 lib and one driver? Ie without nodejs npm and all this hipster zoo, ending only by react'om?

  • one
    On what grounds do you separate react from all this hipster zoo? - vp_arth
  • yes you can without a node github.com/babel/babel-standalone - Duck Learns to Take Cover
  • on a functional basis. react is an open source JavaScript library for building user interfaces. library, not a zoo of servers and encoders on the developer’s machine. - Newbie127
  • without a zoo it will still be hard, because the zoo provides a lot of everything for a large application. But you can, I gave the link above. - Duck Learns to Take Cover
  • Explain in more detail why you can’t install 20 web servers and the rest. - Vladimir Gamalyan

1 answer 1

You can manually .
There ’s even a page on React: "React without JSX" .

Here is an example of equivalent JSX code:

class Hello extends React.Component { render() { return <div>Hello {this.props.toWhat}</div>; } } ReactDOM.render( <Hello toWhat="World" />, document.getElementById('root') );

... and without it:

 class Hello extends React.Component { render() { return React.createElement('div', null, `Hello ${this.props.toWhat}`); } } ReactDOM.render( React.createElement(Hello, {toWhat: 'World'}, null), document.getElementById('root') );

Since there are a lot of calls to React.createElement , it is proposed to make the alias for this function shorter, it becomes almost decent with it:

 const e = React.createElement; class Hello extends React.Component { render() { return e('div', null, `Hello ${this.props.toWhat}`); } } ReactDOM.render( e(Hello, {toWhat: 'World'}, null), document.getElementById('root') );

A separate page is dedicated to getting rid of ES6 , "React without ES6" . In this example, from it only the interpolation of lines and the class declaration, in the context of React, they are replaced by the addition of lines and React.createClass respectively:

 const e = React.createElement; var Hello = React.createClass({ render: function() { return e('div', null, 'Hello ' + this.props.toWhat); } }); ReactDOM.render( e(Hello, {toWhat: 'World'}, null), document.getElementById('root') );

If you are satisfied with this syntax, then please can write like this.

  • Tell me, did you show how to do without jsx, although the question was how to write on jsx without nodejs? - user220409
  • and what is interesting plus if the answer is not at all in the subject? - user220409
  • @OlmerDale read the first two words of the answer. And if the answer does not come, once again re-read the question and the first two words of the answer. - D-side
  • I plyusanul. Because the question consists, as it were, of two parts “how to write on jsx without a node” and “how to write on a reactor without a hipster zoo”. If the first part is not covered in sufficient detail, the second is more than. - Duck Learns to Take Cover