React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

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>
<div id="container1">
    <!-- This element's contents will be replaced with your component. -->
</div>
<div id="container2">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.highlight {
    color: red;
}

JavaScript 1.7

var Hello = React.createClass({
    render: function() {

		var name = this.props.name;
        var startIdx = name.indexOf(this.props.filterText);
		var textNodes = <span>{name}</span>
        
        if(startIdx > -1 ) {
          textNodes = (
          	<span>
            	{name.substring(0, startIdx)}
            	<span className="highlight">{name.substring(startIdx, startIdx + this.props.filterText.length)}</span>
                {name.substring(startIdx + this.props.filterText.length)}
            </span>
          
          )
        }
        
        
        return (
            <li className="panelItem">
                <a className="item-title">{textNodes}</a>
            </li>
        );
    }
});
 
React.render(<Hello name="World" filterText="Wo" />, document.getElementById('container'));
React.render(<Hello name="World" filterText="rl" />, document.getElementById('container1'));
React.render(<Hello name="World" filterText="lala" />, document.getElementById('container2'));