Error when render transpiled React component from a string using babel-standalone and web-pack

Question

I'm new on ReactJs and I'm trying to render component from strings, here is my code:

import React from 'react';
import * as Babel from 'babel-standalone';

var input = 'import React from 'react';
            class First extends React.Component {
              render () {
                return (
                    <h1>First Component</h1>
                  );
              }
            }';
export default First;
class App extends React.Component {

  render() {
    var output = Babel.transform(input, { presets: ['react', 'es2015'], plugins: ["transform-runtime"]}).code;
    const code = output.replace("'use strict';", "").trim();
    eval(code);
    return (    
        <div>
            <h1>Hello</h1>
            <First/>
        </div>
    );
  }
}

export default App;

But It throws an error: "Uncaught ReferenceError: require is not defined". How can I render compiled string or resolve this error? Thanks.

here is transpiled string from output:

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var First = function (_React$Component) {
    _inherits(First, _React$Component);

    function First() {
        _classCallCheck(this, First);

        return _possibleConstructorReturn(this, (First.__proto__ || Object.getPrototypeOf(First)).apply(this, arguments));
    }

    _createClass(First, [{
        key: 'render',
        value: function render() {
            return _react2.default.createElement(
                'h1',
                null,
                'First Component'
            );
        }
    }]);

    return First;
}(_react2.default.Component);

exports.default = First;