I don't get it. Anyone whose created sites with only JQuery and felt that pain has moved to frameworks like angular/ember/knockout/etc. Those frameworks help decouple the html from your js. This seems exactly opposite.
It like developing with JQuery where you had something like:
Decoupling is not necessarily about using different languages for the different components. Smalltalk MVC was all written in Smalltalk for example and that doesn't mean that the M the V and the C weren't decoupled.
I have no experience with React but using JSX (or Javascript) to manipulate the DOM doesn't necessarily mean your view is not decoupled from your controller or model.
I have been looking at Angular a lot lately and this is another example where view components are constructed from a mix of html(templates), the DOM (directives), and Javascript (the code that implements directives). The model is pure Javascript objects and the controller is also Javascript.
Decoupling is an abstract concept that can be realized in many different ways.
I've developed my app. Designer gets hired later and spits out a cool new layout and design... No feature changes at all.
similarly...
Then next year, management decides we need to give the app a "fresh new look" for v2.
[If I'm using React or JQuery-only] From what I can tell, this will cause me to have to dive through a whole bunch of JS code where I'm sifting through business logic and imperative code to find JSX/html sprinkled throughout and make the necessary changes. Also, since I'm changing actual code the chances of introducing new bugs in this process is high.
[If I'm using Angular] Go through html. Change html and css. Leave code and business logic alone.
This is not an entirely contrived situation (at least not for me). As I'm working towards a releasable product, one of the areas that go through the most change and flux is the design and layout.
With React, if you've structured your components correctly (i.e. only display logic) it should be straightforward to change the layout. In fact, it should be easier, since React is modular and has clearly defined boundaries and semantics.
Working with React components vs angular directives are pretty similar in terms of difficulty for designers, IMO, but we think that React components are easier to build than directives. Most designers can figure it out if they know html.
Because its easier to see the html in context of the whole page or partial... because any significant html contains presentation properties (class names typically but also attrs like placeholder, etc) that I would rather not mix with code/logic... because my html typically contains elements whose sole purpose is to assist in layout which (again) i'd rather not mix with code/logic...
We don't think that separating html and code/logic is a productive separation of concerns. They aren't separate concerns. The code that drives the view and the markup it generates are intimately tied and separating them violates the principle of high cohesion (http://en.wikipedia.org/wiki/Cohesion_(computer_science)#Hig...)
I think the reason that most people think this is a good separation of concerns is because they used WYSIWYG editors in the past (which are no longer used in large projects) or because they have PHP spaghetti code hangover from the 90s.
Mixing code and markup isn't evil in and of itself, it's mixin non-display concerns with display concerns which causes issues.
With React, you can use components to separate concerns with finer granularity and in ways that are more tailored to your application.
I'm all for tightly coupled display-logic and its markup; I just don't think it should reside in a JS(X) file unless it's generating a single tag.
While I agree that other MVC frameworks are not great (I've seen many of Angular's pains & weaknesses), I think this was a step in the wrong direction.
It like developing with JQuery where you had something like:
$('.whatever').append('<div>Hello ' + this.props.name + '</div>');
and now with JSX you can do (minus the React structure around it):
<div>{'Hello ' + this.props.name}</div>
So... looks a bit nicer... less quotes...? But so what. I don't want to tightly couple my presentation to my logic.