react-reflow basic sample (js)

<!DOCTYPE html>
<html>
  <head>
    <script src="https://jspm.io/system.js"></script>
    <script src="config.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <script>
      System.import('app').catch(console.error.bind(console));
    </script>
  </body>

</html>

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import Context from './context.js';
import { Editor } from './components.js';

ReactDOM.render((
  <div>
    <Context>
      <Editor/>
    </Context>
  </div>
), document.querySelector('#app'));

System.config({
  transpiler: 'babel',
  map: {
    'rxjs': 'https://unpkg.com/rxjs@5.3.0/bundles/Rx.js',
    'react': 'https://unpkg.com/react@15.3.2/dist/react.min.js',
    'react-dom': 'https://unpkg.com/react-dom@15.3.2/dist/react-dom.min.js',
    'react-reflow': 'https://unpkg.com/react-reflow@0.6.2/lib/reflow.js',
    
    'app': './src',
  },
  packages: {
    app: {
      main: './main.jsx',
      defaultExtension: false,
    },
  }
});

export default (n) => {
  return { a: n };
}

export default (n) => {
  return { b: n };
}

import { updateA, updateB } from '../actions.js';

export default {
  mapState: observe => observe('a', 'b', 'c'),
  mapHandlers: ({dispatch}) => ({
    updateA: (n: number) => dispatch(updateA(n)),
    updateB: (n: number) => dispatch(updateB(n)),
  })
}

export { default as updateA } from './actions/updateA.js';
export { default as updateB } from './actions/updateB.js';

import { provide } from 'react-reflow';
import _Editor from './components/Editor.jsx';
import provideEditor from './providers/provideEditor.js';

export const Editor = provide(provideEditor)(_Editor);

import React, { Component } from 'react';

export default class extends Component {
  render() {
    return (
      <div>
        <input type="text" 
               defaultValue={this.props.a} 
               onChange={({target}) => this.props.updateA(Number(target.value))}/>
        +
        <input type="text" 
               defaultValue={this.props.b}
               onChange={({target}) => this.props.updateB(Number(target.value))}/>
        =
        <span>{this.props.c}</span>
      </div>
    )
  }
}

import { createContext } from 'react-reflow';

export default createContext({
  state: {
    a: 1,
    b: 2,
    c: observe => observe('a', 'b').map(({a, b}) => a + b),
  }
})