React Hello World Example with ES6+JSX
A basic Hello World widget with in browser JSX transformed + ES6 support
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
CSS
textarea {height:400px;width:400px}
JavaScript 1.7
class TextArea extends React.Component {
constructor(props){
super(props);
this.state = {
comment:'He oppose at thrown desire of no. Announcing impression unaffected day his are unreserved indulgence.She oppose at thrown desire of no. Announcing impression unaffected day her are unreserved indulgence.'
};
this.onClickMakeBold = this.onClickMakeBold.bind(this);
}
render(){
return <div>
<button onMouseDown={this.onClickMakeBold}>Bold</button>
<div>
<textarea ref="textarea">{this.state.comment}</textarea>
</div>
</div>
}
onClickMakeBold(event){
event.preventDefault();
console.log(getSelectionText())
}
}
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control"){
text = document.selection.createRange().text;
}else{
alert('no')
}
return text;
}
React.render(<TextArea />, document.getElementById('container'));