ReactiveElements: Convert React.js components into Web Components

ReactiveElements

Create your component as you normally would, and then register it on the document using document.registerReact(…)

/* @jsx React.DOM */
MyComponent = React.createClass({
  render: function() {
    console.log(this.props.items); // passed as HTML tag`s argument
    console.log(this.props.children); // original tag children
    return <ul><li>React content</li></ul>;
  }
});

document.registerReact('my-react-component', MyComponent);

You can then use it as follows:

<body>
    <my-react-component items="{window.someArray}"></my-react-component>
</body>

ReactiveElements →
ReactiveElements Demo →

(via)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.