React

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" ></div>
<div>
  <input type="checkbox" onchange="messWithReact(this)">
  <label>Mess with React and divide the value by ten.</label>
</div>

Babel + JSX

/**
 * Component that counts and shows the value in a `Label` component.
 */
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 0};
  }

  render() {
    return (<div><Label value={this.state.value}/></div>);
  }

  componentDidMount() {
    this.timer = setInterval(() => this.tick(), this.props.interval);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  tick() {
    this.setState((state, props) => ({
      value: state.value + props.increment,
    }));
  }
}

Counter.defaultProps = {
  increment: 1,
  interval: 1000,
};

/**
 * Component that shows a value.
 */
function Label(props) {
  return <div>The current value is {props.value}.</div>
}

/**
 * Component that renders the main app.
 */
function App() {
  return (
		<div>
        <Counter />
    </div>
  );
}

function messWithReact(event) {
  // Modify the global namespace to make React discover a different component
  if (event.checked) {
    window.oldLabel = Label;
    window.Label = props => window.oldLabel({
      value: props.value / 10
    });
  } else {
    Label = window.oldLabel;
  }
}

ReactDOM.render(<App />, document.getElementById("root"))