I'd like to see React support shadow-dom and web components. Not holding my breath however, since Facebook considers web components to be a "competing technology".
Unlike real web components, React components are brittle since React does not have the equivalent of Shadow DOM.
Nothing stops you from using web components in React. There's even standalone (https://github.com/Wildhoney/Standalone) which allows you to transform React components into common web components.
But modelling React into web components makes about zero sense. The spec started many years ago and it is utterly outdated and useless. Web components aren't event components, they are pluggable templates. They expose all the problems and issues that React has already solved. While web components are dependent on vendor policies and specs, yet do a fraction of what a React component does, React is already out there serving apps to mobile, desktops, shell console, watches and so on - because it is what web components should have been.
The problem when you use Web Components in JSX is that there is no way to wire up any custom events fired by the Web Component. JSX will only wire up "known events".
That's just when you use custom elements in _React_.
I've definitely wired up JSX createElement implementations that handle attributes and events properly. My preference is for Polymer-style naming: `on-*` for event handlers, `$` suffix for attributes and everything else is a property. Others who've done this use special `attributes` and `events` properties.
As soon as Shadow DOM v1 is implemented and active in stable in Chrome, Safari and Firefox, I am pretty sure it will start a new trend. And React might be persived like JQuery, Ember, Angular1 as a fad, that has been superseeded by new native browser capabilities. KISS.
It won't. Web components are simple encapsulation sugar. Apps still have no means for dynamic structures while all the terrible templating pitfalls that frameworks like Angular brought are still present. React is a real solution. It isn't even a question or an "if" any longer. React has taken over, or rather, its principles have. They're clean, concise and don't twist the slightest standard all the while not breaking a sweat.
React has grown so powerful it isn't even just about the browser any longer. It runs everywhere. The browser has finally become a dumb pipe, something it should always have been. Web components are trying to reverse that, but you'd be ignoring innovation if you fell for it.
You can use JSX for Web Components too, see:
https://github.com/wisercoder/uibuilder
There is no need for a complex framework like React. Web Components + JSX is better than React. Why use a proprietary framework with patent issues when you could be using a standards based solution instead?
React is not complex, it solves complex problems, elegantly. Web components make it worse than it already is. By catering to the dom they fragment HTML even further. Now you rely on attributes for "if", "each", "of", "loop" and so on. It literally enforces frameworks shipping template parsers and script engines that duplicate and fight against Javascript, each with their own syntax. Without frameworks like Polymer you only get encapsulation and that's utterly pointless.
The extensible web is about low-level access. Web components go against everything that stands for. They're again pushing a bad vision that was decided on almost 10 years ago by people sitting in a closed room trying to interfere with how we write apps, resulting in a useless spec that adds complexity and weight. That spec btw took years of pushback against Apple and other vendors that weren't even interested in web apps rivalling their native stores. They have eventually given it green light because the spec is so tame it won't threaten a native app in a hundred years.
React on the other hand isn't much more than a simple idea:
const Component = ({ text }) => <span>{text}</span>
const Another = () => <Component text="hi there" />
We can express UI declaratively and functionally. It solves our problems and pretty much has set the web free. Now there are dozens of frameworks that follow these principles, it's made it possible for Javascript to move on to native space, other platforms and devices. We're closer to truly universal apps than ever. Nothing proprietary about it, just technology that has managed to come through by its own merits which has evolved into an actual, living standard.
The W3C has the worst kind of track record, don't expect anyone to fall for all this hand waving for "standards," no one is that naive anymore. If a spec doesn't perform it gets discarded and by this point we already know web component don't.
Unlike real web components, React components are brittle since React does not have the equivalent of Shadow DOM.