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

function Subscription () {
  // Stockage des gens à prévenir en cas de
  // mise à jour
  var listeners = []

  return {
    // Initialiser une écoute
    subscribe: function subscribe (listener) {
      // On ajoute le listeners à la liste
      // des gens enregistrés
      listeners = [].concat(
        listeners,
        [listener]
      )

      // On renvoie une méthode
      // qui met fin à une écoute
      return function unsubscribe () {
        // On enlève le listener de la liste
        // des gens enregistrés
        listeners = listeners.filter(
          function (item) {
            return item !== listener
          }
        )
      }
    },
    // Prévenir tout le monde d'un changement
    notify: function notify () {
      // On execute chaque listener qui est
      // un callback qui sera executé dans le
      // scope du Subscriber
      listeners.forEach(
        function (listener) {
          listener()
        }
      )
    }
  }
}


function UserService () {
  // Initialisation de l'utilitaire d'écoute
  var subscription = Subscription()

  // Initialisation des données
  var user = null

  return {
    // Méthode de login du user
    // La méthode peut être appelée depuis
    // n'importe où.
    login: function login (login, password) {
      // Login sans validation du password :D
      user = { name: login }

      // On prévient tout le monde du changement
      subscription.notify()
    },

    // Idem pour la déconnexion
    logout: function logout () {
      user = null
      subscription.notify()
    },

    // Exposition de l'utilisateur connecté
    // Si c'est null, il est anonyme
    getUser: function getUser () {
      return user
    },

    // Exposition de la méthode d'écoute pour
    // que les enfants puissent l'appeler
    subscribe: subscription.subscribe
  }
}


class UserServiceProvider extends React.Component {
  getChildContext () {
    return {
      userService: this.props.userService
    }
  }

  render ()...