React.js + Reactive Component + Webpack / ES6

This repo is an example of using ES6 modules to load a web component build with React.js. Everything is glued / bundled together with webpack.

I'm obsessed with the web-component utopia!

There is something really sweet about having #webcomponents as a pure #javascript written with #es6 imports and dependancies.

— Thomas Reggi (@thomasreggi) January 31, 2015

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

I built a component with Riot.js (react clone) that was a simple countdown timer from a specific date using Moment riotjs-countdown. Having messed around with react before I thought I'd make the same component with react using ReactiveElements.

ReactiveElements is a way for you to take React code and turn it into a HTML5 Custom Element.

This is all heavily inspired by this blog post by Addy Osmani on web-component library interoperability.

The problem with this repo is outlined in this issue here PixelsCommander/ReactiveElements#16. I used this react timer and ideally. I would be able to just make it a web component with reactive components but I can't.

I can't used the native version of PixelsCommander/ReactiveElements because it doesn't support any module system and just assumes that the React global is set. Webpack is also the only module-loader I could get to easily ignore defining window.document with es6, I tried SystemJs and Browserify.