vjeux / react-xtags

Using React to implement xtags

react-xtags

Using x-tags from Mozilla, we can write custom tags within the DOM and have them being rendered in React.

Read this blog article for more information.

<script src="http://fb.me/react-0.3.2.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.3.2.js"></script>
<script src="https://rawgithub.com/vjeux/react-xtags/master/x-tag-components.js"></script>

<!-- x-react is the bridge between x-tags and React -->
<script src="https://rawgithub.com/vjeux/react-xtags/master/x-react.js"></script>

<script type="text/jsx">
/** @jsx React.DOM */
var Hello = React.createClass({
  render: function() {
    return <div>{'Hello ' + this.props.name}</div>;
  }
});

xreact.register('x-hello', Hello);
</script>

<x-hello name="World"></x-hello>

The rendered DOM tree lives in the shadow DOM. This lets us manipulate both the <x-hello> component as well as the rendered <div> using Web Inspector.

Anytime you modify the <x-hello> component, whether it is in the inspector or in Javascript with the regular DOM API, React is going to be invoked to update the rendered version.