React.js Essentials

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> ...