https://github.com/vjeux/react-xtags

Using React to implement xtags
https://github.com/vjeux/react-xtags

Last synced: 24 days ago
JSON representation

Using React to implement xtags

• Host: GitHub
• URL: https://github.com/vjeux/react-xtags
• Owner: vjeux
• Created: 2013-06-15T17:29:16.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-06-16T05:02:12.000Z (over 11 years ago)
• Last Synced: 2024-04-14T17:44:31.799Z (8 months ago)
• Language: JavaScript
• Size: 141 KB
• Stars: 49
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-cn - react-xtags - Using React to implement xtags (Uncategorized / Uncategorized)

README

        
react-xtags

===========

Using [x-tags](http://www.x-tags.org/) from Mozilla, we can write custom tags within the DOM and have them being rendered in [React](http://facebook.github.io/react/).

Read [this blog article for more information](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html).

```html

/** @jsx React.DOM */

var Hello = React.createClass({

  render: function() {

    return <div>{'Hello ' + this.props.name}</div>;

  }

});

xreact.register('x-hello', Hello);

```

The rendered DOM tree lives in the shadow DOM. This lets us manipulate both the `` component as well as the rendered `
` using Web Inspector.


![image](https://f.cloud.github.com/assets/197597/658657/b58f239c-d5ff-11e2-887e-88f845938805.png)

Anytime you modify the `` 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.