React Base Fiddle (JSX)

Starting point for creating JSFiddles with 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>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script>
<div id="root"></div>

CSS

h1, h2, h3, h4, h5 { margin: 4px 0; }

Babel + JSX

/**
 *
 */
const { createContext } = React;
const { render } = ReactDOM;

/**
 *
 */
const boxStyle = { margin: '8px auto', padding: 8, border: '1px solid lightgray' };

/**
 * 
 */
const Now = ({ message, color }) => (
  <div>
    <div>Now: { Date.now() }</div>
    <div style={ { fontWeight: 'bold', color } }>^^^ { message }</div>
  </div>
);

/**
 * Simple count rendering component
 */
const Count = ({ title, count }) => (
  <div style={ boxStyle }>
    <h5>{ title }</h5>
    count: { count }
  </div>
);


/**
 * Legacy Context Provider/Consumer
 */
class LegacyContextProvider extends React.Component {
  static childContextTypes = {
    count: PropTypes.number,
  }

  getChildContext() {
    return { count: this.props.count };
  }

  render() {
    return this.props.children;
  }
}

class LegacyContextConsumer extends React.Component {
  static contextTypes = {
    count: PropTypes.number,
  }

  render() {
    const { children } = this.props;
    const { count } = this.context;
    return typeof children === 'function' ? children({ count }) : <div />;
  }
}

/**
 * New Context Provider/Consumer
 */
const NewContext = createContext({ count: 0 });

/**
 * Class component which avoids render() if title prop is not changeed
 */
class IntermediateComp extends React.Component {
  shouldComponentUpdate(newProps) {
    return newProps.title !== this.props.title;
  }

  render() {
    const { title, children } = this.props;
    return (
      <div style={ boxStyle }>
        <h5>{ title }</h5>
        { children }
      </div>
    );
  }
}

/**
 * 
 */
class Root extends React.Component {
  constructor() {
    super();
    this.state = { rootCount: 0 };
    this.increment = this.increment.bind(this);
  }

  increment() {
    this.setState((state) => ({ rootCount: state.rootCount + 1 }));
  }

  render() {
    return (
      <div>
        <div>
          <button onClick={ this.increment }>count up</button>
        </div>
        <div style={ { display: 'flex' } }>
     ...