primaryobjects/index.html

## index.html
<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="tether@*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script>
    <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class='container'>
      <h1>Hello World!</h1>
      <button id='btnShow' type="button" class="btn btn-primary">Show</button>
      <button id='btnHide' type="button" class="btn btn-primary">Hide</button>
      <div id="translator" class='mt-5'></div>
      <div id="output"></div>
    </div>

    <script src="translator.js"></script>
    <script src="script.js"></script>
  </body>

</html>

## script.jsx
var translator = ReactDOM.render(React.createElement(Translator), document.getElementById('translator'));

$(function() {
  $('#btnShow').click(function() {
    $('#output').text('');

    translator.show('Hola Mundo! Este es el control de Translator.', 'en', 'es', function(text) {
      $('#output').text(text);
    });
  });

  $('#btnHide').click(function() {
    translator.hide();
  });
});

## translator.jsx
class Translator extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      sourceLang: 'es',
      destLang: 'en',
      text: '',
      isVisible: false
    };

    this.onTranslate = this.onTranslate.bind(this);
  };

  show(text, sourceLang, destLang, callback) {
    this.setState({ isVisible: true, text: text, sourceLang: sourceLang, destLang: destLang, callback: callback });
  }

  hide() {
    this.setState({ isVisible: false });
  }

  onTranslate() {
      this.state.callback('Hello world! This is the Translator control.');
      this.hide();
  }

  render() {
    return (
      <div className={ 'translator-component ' + (this.state.isVisible ? '' : 'hidden-xs-up') } >
        <div className="card">
          <div className="card-header">
            Translator
          </div>
          <div className="card-block">
            <h4 className="card-title"></h4>
            <p className="card-text">
              { this.state.text }
            </p>
            <a href="#" className="btn btn-primary" onClick={ this.onTranslate }>Translate</a>
          </div>
        </div>
      </div>
    );
  }
};
	<!DOCTYPE html>
	<html>

	<head>
	<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script data-require="tether@*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
	<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
	<script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
	<script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script>
	<script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script>
	<link rel="stylesheet" href="style.css" />
	</head>

	<body>
	<div class='container'>
	<h1>Hello World!</h1>
	<button id='btnShow' type="button" class="btn btn-primary">Show</button>
	<button id='btnHide' type="button" class="btn btn-primary">Hide</button>
	<div id="translator" class='mt-5'></div>
	<div id="output"></div>
	</div>

	<script src="translator.js"></script>
	<script src="script.js"></script>
	</body>

	</html>
	var translator = ReactDOM.render(React.createElement(Translator), document.getElementById('translator'));

	$(function() {
	$('#btnShow').click(function() {
	$('#output').text('');

	translator.show('Hola Mundo! Este es el control de Translator.', 'en', 'es', function(text) {
	$('#output').text(text);
	});
	});

	$('#btnHide').click(function() {
	translator.hide();
	});
	});
	class Translator extends React.Component {
	constructor(props) {
	super(props);

	this.state = {
	sourceLang: 'es',
	destLang: 'en',
	text: '',
	isVisible: false
	};

	this.onTranslate = this.onTranslate.bind(this);
	};

	show(text, sourceLang, destLang, callback) {
	this.setState({ isVisible: true, text: text, sourceLang: sourceLang, destLang: destLang, callback: callback });
	}

	hide() {
	this.setState({ isVisible: false });
	}

	onTranslate() {
	this.state.callback('Hello world! This is the Translator control.');
	this.hide();
	}

	render() {
	return (
	<div className={ 'translator-component ' + (this.state.isVisible ? '' : 'hidden-xs-up') } >
	<div className="card">
	<div className="card-header">
	Translator
	</div>
	<div className="card-block">
	<h4 className="card-title"></h4>
	<p className="card-text">
	{ this.state.text }
	</p>
	<a href="#" className="btn btn-primary" onClick={ this.onTranslate }>Translate</a>
	</div>
	</div>
	</div>
	);
	}
	};