JSFiddle - React, Tailwind, and code Playground

by Terrance Smith

HTML

<div id="react-app"></div>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>

CSS

body {
  font-family: Tahoma, sans-serif;
  margin: 0;
}

.ContactView-title {
  font-size: 24px;
  padding: 0 24px;
}

.ContactView-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #f0f0f0;
}

.ContactItem {
  margin: 0;
  padding: 8px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.ContactItem-name {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.ContactItem-email {
  font-size: 14px;
  margin-top: 4px;
  font-style: italic;
  color: #888;
}

.ContactItem-description {
  font-size: 14px;
  margin-top: 4px;
}

.ContactForm {
  padding: 8px 24px;
}

.ContactForm > input,
.ContactForm > textarea {
  display: block;
  width: 240px;
  padding: 4px 8px;
  margin-bottom: 8px;
  border-radius: 3px;
  border: 1px solid #888;
  font-size: 14px;
}

JavaScript

/*
Refactor your solution to the first exercise using what you’ve learned. In particular:

Create a ContactItem class which accepts three properties: name, email and description
Filter out contacts with no e-mail address
Store your data in an array instead of passing it directly to createElement
Use the following data:


When you’re done, check your work against this fiddle:
*/
var contacts = [{
  key: 1,
  name: "James K Nelson",
  email: "[email protected]",
  description: "Front-end Unicorn"
}, {
  key: 2,
  name: "Jim",
  email: "[email protected]"
}, {
  key: 3,
  name: "Joe"
}];


var ContactForm = React.createClass({
  propTypes: {
    contact: React.PropTypes.object.isRequired,
  },

  render: function() {
    return React.createElement('form', {
        className: 'ContactForm'
      },
      React.createElement('input', {
        type: 'text',
        id: 'name',
        placeholder: 'Name',
        value: this.props.contact.name,
      }),
      React.createElement('input', {
        type: 'email',
        id: 'email',
        placeholder: 'Email',
        value: this.props.contact.email,
      }),
      React.createElement('textarea', {
        id: 'description',
        name: 'description',
        placeholder: 'Description',
        value: this.props.contact.description,
      }),
      React.createElement('button', {
        'type': 'submit'
      }, 'Submit'),
    )
  }
});

var ContactItem = React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired,
    email: React.PropTypes.string.isRequired,
    description: React.PropTypes.string
  },
  render: function() {
    return (
      React.createElement('li', {
          className: 'ContactItem'
        },

        React.createElement('h2', {
          className: 'ContactItem-name'
        }, this.props.name),

        React.createElement('a', {
          className: 'ContactItem-email',
          href: 'mailto:' + this.props.email
        }, this.props.email),

       ...