How to use the react-art.Surface function in react-art

import React from 'react';
import ReactArt from 'react-art';
import ImmutablePropTypes from 'react-immutable-proptypes';
import {Map} from 'immutable';

import Colors from '../styles/Colors.js';
import EventTypes from '../update/EventTypes.js';
import {relMouseCoords} from './utils/DrawingUtils.js';
import {getKeyCombo} from '../utils/KeyboardShortcuts.js';

const Surface = ReactArt.Surface;

const addPropsAndCreate = (extraProps) => (element) => {
  // https://facebook.github.io/react/docs/multiple-components.html#dynamic-children
  const props = Object.assign({key: element.props.id}, extraProps || {}, element.props);
  return React.createElement(element.component, props);
};

const toJS = e => e.toJS();

const convert = {
  mousedown: EventTypes.CanvasMouseDown,
  mousemove: EventTypes.CanvasMouseMove,
  mouseup: EventTypes.CanvasMouseUp,
  keydown: EventTypes.KeyDown
};

var Events = require('events');
var indejection = require('indejection');
var container = indejection();

// libs
container
	.register('React', React, { maker: 'fixed' })
	.register('_', require('lodash'), { maker: 'fixed' })
	.register('rsvp', require('rsvp'), { maker: 'fixed' })
	.register('eventEmitter', function() { return new Events.EventEmitter() })
	.register('seedrandom', require('seedrandom'), { maker: 'fixed' })
	.register('displayHelper', require('./utilities/displayHelper'), { maker: 'singleton' });

// components
container
	.register('Surface', ReactArt.Surface, { maker : 'fixed' })
	.register('Group', ReactArt.Group, { maker : 'fixed' })
	.register('Path', ReactArt.Path, { maker : 'fixed' })
	.register('Shape', ReactArt.Shape, { maker : 'fixed' })
	.register('App', require('./components/app.jsx'))
	.register('GameBoard', require('./components/game-board.jsx'))
	.register('HexGrid', require('./components/hex-grid.jsx'))
	.register('HexTile', require('./components/hex-tile.jsx'));

// mixins
container
	.register('PureRenderMixin', React.addons.PureRenderMixin, { maker: 'fixed' });

var React = container.get('React');
var AppElement = React.createElement(container.get('App'));
React.render(AppElement, document.body);

var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');

var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;

var circlePath = function(r) {
    return new Path()
        .moveTo(0, -r)
        // Two arcs make a circle
        .arcTo(0, r, r, r, true)
        .arcTo(0, -r, r, r, true)
        .close();
};

var linePath = function(x1, y1, x2, y2) {
    return new Path()
        .moveTo(x1, y1)
        .lineTo(x2, y2);

var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');

var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;


var circlePath = function(r) {
    return new Path()
        .moveTo(0, -r)
        // Two arcs make a circle
        .arcTo(0, r, r, r, true)
        .arcTo(0, -r, r, r, true)
        .close();
};

var linePath = function(x1, y1, x2, y2) {
    return new Path()
        .moveTo(x1, y1)

/**
 * Copyright 2013 Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */
"use strict";

var React = require('react');
var ReactART = require('react-art');
var Group = ReactART.Group;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Transform = ReactART.Transform;

var MOUSE_UP_DRAG = 0.978;
var MOUSE_DOWN_DRAG = 0.9;
var MAX_VEL = 11;
var CLICK_ACCEL = 3;
var BASE_VEL = 0.15;

/**
 * An animated SVG component.
 */
var VectorWidget = React.createClass({
  /**
   * Initialize state members.
   */
  getInitialState: function() {

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
'use strict';

var Circle = require('react-art/Circle');
var React = require('react');
var ReactART = require('react-art');
var Group = ReactART.Group;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Transform = ReactART.Transform;

var MOUSE_UP_DRAG = 0.978;
var MOUSE_DOWN_DRAG = 0.9;
var MAX_VEL = 11;
var CLICK_ACCEL = 3;
var BASE_VEL = 0.15;

/**
 * An animated SVG component.
 */
class VectorWidget extends React.Component {
  /**
   * Initialize state members.
   */
  state = {degrees: 0, velocity: 0, drag: MOUSE_UP_DRAG};

import React from 'react';
import ReactART from 'react-art';
import Rectangle from 'react-art/lib/Rectangle.art';
import ReactDOM from 'react-dom';
import QRCode from 'react-qr-code';

ReactDOM.render(
	,
	document.getElementById('Container')
);