leimonio leimonio

## StringIncrementalReplacement.js
String.prototype.encodeTags = function () {
  return this.replace(/</g, '&lt;').replace(/>/g, '&gt;');
};

let text = "this is aw, <unbel> awesome, run for awesome news";
let parts = ['awesome news', 'aw', 'awesome'];

// 1. Firstly encode string
// There is a chance the string we want to highlight may include tagged values e.g. <day>
// so we need to encode these characters in order to be valid strings, not parsed as html element

## ReactWrapperDOM.js
import React, { Component } from 'react';
import ReactDOM, { findDOMNode } from 'react-dom';

const someDomNode = Object.assign(document.createElement('video'), {
  src: 'test'
});

class DOMWrapper extends Component {
  constructor(props) {
    super(props);

## react-cool-this.js
class Counter extends React.Component {
  state = {clicks: 0}
  increment = () => {
    this.setState({click: this.state.clicks++})
  }
  render() {
    return (
      <button onClick={this.increment}>
        You have clicked me {this.state.clicks} times
      </button>

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
	String.prototype.encodeTags = function () {
	return this.replace(/</g, '<').replace(/>/g, '>');
	};

	let text = "this is aw, <unbel> awesome, run for awesome news";
	let parts = ['awesome news', 'aw', 'awesome'];

	// 1. Firstly encode string
	// There is a chance the string we want to highlight may include tagged values e.g. <day>
	// so we need to encode these characters in order to be valid strings, not parsed as html element
	import React, { Component } from 'react';
	import ReactDOM, { findDOMNode } from 'react-dom';

	const someDomNode = Object.assign(document.createElement('video'), {
	src: 'test'
	});

	class DOMWrapper extends Component {
	constructor(props) {
	super(props);
	class Counter extends React.Component {
	state = {clicks: 0}
	increment = () => {
	this.setState({click: this.state.clicks++})
	}
	render() {
	return (
	<button onClick={this.increment}>
	You have clicked me {this.state.clicks} times
	</button>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

	<script id="jsbin-javascript">