RactiveJS and JSX

Question

No. React.js and Ractive.js have many similarities (for example, both work by constructing a lightweight virtual DOM in memory), but they have one very major difference - React completely rejects the idea of templates.

Which is to say that JSX isn't a templating language, it just looks like one! In React, if you have something like this...

<h1>Hello world!</h1>

...it gets converted to something like this by the JSX pre-processor:

React.DOM.h1(null, 'Hello world!');

In other words JSX describes functions, rather than templates. In Ractive, by contrast, Mustache templates are parsed into tree-like structures that can be transported as JSON.

Now, in the case of that example it doesn't really matter what process the original string goes through - it's still going to end up as an <h1> element in a browser somewhere. But it gets a lot harder when you start introducing arbitrary JavaScript which refers to this.state and this.props - things that can alter the fundamental structure of a component in React, but which have no meaning in Ractive.

Ractive might support templating languages other than Mustache in future, but JSX is unlikely to be one of them because they have such different approaches and design goals.

However there's a related issue here, which is being able to fully describe components in a single file. There's some ongoing work happening there - the most likely scenario is that we'll be able to describe components in an .html file (since you can use JavaScript and CSS inside HTML) rather than writing the template into your .js file.