Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <script src="http://fb.me/react-0.8.0.min.js"></script>
    <script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
  </head>
  <body>
    <div id='subscribe'>
      <form action="/subscribe">
        <p>
          <label for="email"></label>
          <input type="email" placeholder='Your email' name='email'>
          <button type='submit'>Subscribe!</button>
        </p>
      </form>
    </div>
  </body>
  <script type="text/jsx">
        /** @jsx React.DOM */
        console.clear();
        var Subscribe = React.createClass({
          getInitialState: function () {
            return {subscribers: this.props.subscribers, email: ''};
          },
          subscribe: function (e) {
            e.preventDefault();
            // send request
            var newSubs = this.state.subscribers.concat(this.state.email);
            this.setState({subscribers: newSubs, email: ''}, function () {
              // callback
              console.log(this.state.subscribers);
            });
            alert('Subscribed through ReactJS.');
          },
          updateEmail: function (e) {
            this.setState({email: e.target.value});
          },
          render: function () {
            return (
              <form action="/subscribe" onSubmit={this.subscribe}>
                <p>
                  <label for="email"></label>
                  <input type="email" placeholder='Your email' name='email' onChange={this.updateEmail} value={this.state.email} />
                  <button type='submit'>Join {this.state.subscribers.length} people!</button>
                </p>
              </form>
            );
          }
        });
        
        React.renderComponent(<Subscribe subscribers={['me@you.com', 'you@me.com']} /> ,document.getElementById('subscribe'));
  </script>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
waltervascarvalhopro
0viewers