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/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

// Pour chaque point commenté, un paragraphe
    // est disponible juste en dessous du code.
    // N'hésitez pas à vous y référer.

    class ThemeProvider extends React.Component {
      // 1.1. Définition des données du contexte
      getChildContext () {
        return {
          theme: this.props.theme
        }
      }

      // 1.2. Rendu de l'application
      render () {
        return React.Children.only(this.props.children)
      }
    }

    // 1.3. Définition du type du contexte
    var themeType = {
      theme: React.PropTypes.shape({
        color: React.PropTypes.string.isRequired
      }).isRequired
    }

    ThemeProvider.propTypes = themeType

    ThemeProvider.childContextTypes = themeType
    
    
    function ThemeSubscriber (props, context) {
      return props.children(context.theme)
    }

    ThemeSubscriber.propTypes = {
      children: React.PropTypes.func.isRequired
    }

    ThemeSubscriber.contextTypes = themeType
    
    
    var theme = {color: '#ff0000'}

    ReactDOM.render(
      <ThemeProvider theme={theme}>
        <ThemeSubscriber>
          {function (theme) {
            return (
              <button style={{color: theme.color}}>
                Mon bouton
              </button>
            )
          }}
        </ThemeSubscriber>
      </ThemeProvider>,
      document.getElementById('container')
    )