Creating the CollectionExportForm component

The CollectionExportForm component is responsible for exporting a collection to a third-party website (http://CodePen.io). Once your collection is on CodePen, you can save it and share it with your friends. Let's take a look at how this can be done.

Create the ~/snapterest/source/components/CollectionExportForm.react.js file:

var React = require('react');

var formStyle = {
  display: 'inline-block'
};

var CollectionExportForm = React.createClass({
  render: function () {
    return (
      <form action="http://codepen.io/pen/define" method="POST" target="_blank" style={formStyle}>
        <input type="hidden" name="data" value={this.props.htmlMarkup} />
        <button type="submit" className="btn btn-default">Export as HTML</button>
      </form>
    );
  }
});

module.exports = CollectionExportForm;

The CollectionExportForm component renders a form with the <input> and <button> elements. The <input...