palcisto/Raw-ReactJs-lesson.html

## Raw-ReactJs-lesson.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>I'm in a React app!</title>

    <style>
      html {
        box-sizing: border-box;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      .Contact-view {
        padding: 15px;
      }

      .Contact-view__title {
        color: #777;
        font: 300 28px/1 Helvetica, sans-serif;
        letter-spacing: -1px;
        text-transform: uppercase;
      }

      .Contact-view__list {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .Contact {
        border-radius: 2px;
        box-shadow: 0 0 1px rgba(0, 0, 0, .35);
        margin: 0 0 20px;
        padding: 10px;
        width: 300px;
      }

      .Contact__name {
        border-bottom: 2px solid #ccc;
        color: #1C74B7;
        font: 18px/1.1 Helvetica, sans-serif;
        margin: 0 0 8px;
        padding-bottom: 5px;
      }

      .Contact__email {
        color: #C36803;
        text-decoration: none;
      }

      .Contact__email:hover {
        color: #C36803;
        text-decoration: underline;
      }

      .Contact__description {}

      .New-contact {
        width: 300px;
      }

      .New-contact__name,
      .New-contact__email,
      .New-contact__description {
        border: 1px solid #ccc;
        display: block;
        font-size: 16px;
        margin-bottom: 10px;
        padding: 5px;
        width: 100%;
      }

      .New-contact__name {}

      .New-contact__email {}

      .New-contact__description {
        min-height: 75px;
      }

      .New-contact__submit {
        background-color: #C36803;
        border: 0;
        border-radius: 2px;
        color: #fff;
        font-size: 18px;
        padding: 6px 15px;
        transition: all 200ms;
      }

      .New-contact__submit:hover {
        background-color: #B56104;
      }
    </style>
  </head>
  <body>
    <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>

    <script>
      var contacts = [
        { key: 1, name: 'Patrick Alcisto', email:  'patrickalcisto@gmail.com', description: 'Front-end Developer'},
        { key: 2, name: 'Alex' },
        { key: 3, name: 'Pake Alcisto', email:  'palcisto@gmail.com'}
      ];

      var newContact = {name: '', email: '', description: ''};

      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', {key: this.props.key, className: 'Contact'},
              React.createElement('h2', {className: 'Contact__name'}, this.props.name),
              React.createElement('a', {className: 'Contact__email', href: 'mailto:' + this.props.email}, this.props.email),
              React.createElement('div', {className: 'Contact__description'}, this.props.description)
            )
          )
        }
      });

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

        render: function() {
          return (
            React.createElement('form', {className: 'New-contact'},
              React.createElement('input', {
                type: 'text',
                value: this.props.contact.name,
                placeholder: 'Name (required)',
                className: 'New-contact__name'
              }),
              React.createElement('input', {
                type: 'email',
                value: this.props.contact.email,
                placeholder: 'Email',
                className: 'New-contact__email'
              }),
              React.createElement('textarea', {
                value: this.props.contact.description,
                placeholder: 'Description',
                className: 'New-contact__description'
              }),
              React.createElement('button', {
                type: 'submit',
                className: 'New-contact__submit'
              }, 'Submit')
            )
          )
        }
      });

      var ContactView = React.createClass({
        propTypes: {
          contacts: React.PropTypes.array.isRequired,
          newContact: React.PropTypes.object.isRequired
        },

        render: function() {
          var contactItemElements = contacts
            .filter(function(contact) { return contact.email})
            .map(function(contact) { return React.createElement(ContactItem, contact)});

          return (
            React.createElement('div', {className: 'Contact-view'},
              React.createElement('h1', {className: 'Contact-view__title'}, "Contacts"),
              React.createElement('ul', {className: 'Contact-view__list'}, contactItemElements),
              React.createElement(ContactForm, {contact: this.props.newContact})
            )
          );
        }
      });

      ReactDOM.render(
        React.createElement(ContactView, {
          contacts: contacts,
          newContact: newContact
        }),
        document.getElementById('react-app')
      );
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>I'm in a React app!</title>

	<style>
	html {
	box-sizing: border-box;
	}
	*,
	*:before,
	*:after {
	box-sizing: inherit;
	}

	.Contact-view {
	padding: 15px;
	}

	.Contact-view__title {
	color: #777;
	font: 300 28px/1 Helvetica, sans-serif;
	letter-spacing: -1px;
	text-transform: uppercase;
	}

	.Contact-view__list {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	.Contact {
	border-radius: 2px;
	box-shadow: 0 0 1px rgba(0, 0, 0, .35);
	margin: 0 0 20px;
	padding: 10px;
	width: 300px;
	}

	.Contact__name {
	border-bottom: 2px solid #ccc;
	color: #1C74B7;
	font: 18px/1.1 Helvetica, sans-serif;
	margin: 0 0 8px;
	padding-bottom: 5px;
	}

	.Contact__email {
	color: #C36803;
	text-decoration: none;
	}

	.Contact__email:hover {
	color: #C36803;
	text-decoration: underline;
	}

	.Contact__description {}

	.New-contact {
	width: 300px;
	}

	.New-contact__name,
	.New-contact__email,
	.New-contact__description {
	border: 1px solid #ccc;
	display: block;
	font-size: 16px;
	margin-bottom: 10px;
	padding: 5px;
	width: 100%;
	}

	.New-contact__name {}

	.New-contact__email {}

	.New-contact__description {
	min-height: 75px;
	}

	.New-contact__submit {
	background-color: #C36803;
	border: 0;
	border-radius: 2px;
	color: #fff;
	font-size: 18px;
	padding: 6px 15px;
	transition: all 200ms;
	}

	.New-contact__submit:hover {
	background-color: #B56104;
	}
	</style>
	</head>
	<body>
	<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>

	<script>
	var contacts = [
	{ key: 1, name: 'Patrick Alcisto', email: 'patrickalcisto@gmail.com', description: 'Front-end Developer'},
	{ key: 2, name: 'Alex' },
	{ key: 3, name: 'Pake Alcisto', email: 'palcisto@gmail.com'}
	];

	var newContact = {name: '', email: '', description: ''};

	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', {key: this.props.key, className: 'Contact'},
	React.createElement('h2', {className: 'Contact__name'}, this.props.name),
	React.createElement('a', {className: 'Contact__email', href: 'mailto:' + this.props.email}, this.props.email),
	React.createElement('div', {className: 'Contact__description'}, this.props.description)
	)
	)
	}
	});

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

	render: function() {
	return (
	React.createElement('form', {className: 'New-contact'},
	React.createElement('input', {
	type: 'text',
	value: this.props.contact.name,
	placeholder: 'Name (required)',
	className: 'New-contact__name'
	}),
	React.createElement('input', {
	type: 'email',
	value: this.props.contact.email,
	placeholder: 'Email',
	className: 'New-contact__email'
	}),
	React.createElement('textarea', {
	value: this.props.contact.description,
	placeholder: 'Description',
	className: 'New-contact__description'
	}),
	React.createElement('button', {
	type: 'submit',
	className: 'New-contact__submit'
	}, 'Submit')
	)
	)
	}
	});

	var ContactView = React.createClass({
	propTypes: {
	contacts: React.PropTypes.array.isRequired,
	newContact: React.PropTypes.object.isRequired
	},

	render: function() {
	var contactItemElements = contacts
	.filter(function(contact) { return contact.email})
	.map(function(contact) { return React.createElement(ContactItem, contact)});

	return (
	React.createElement('div', {className: 'Contact-view'},
	React.createElement('h1', {className: 'Contact-view__title'}, "Contacts"),
	React.createElement('ul', {className: 'Contact-view__list'}, contactItemElements),
	React.createElement(ContactForm, {contact: this.props.newContact})
	)
	);
	}
	});

	ReactDOM.render(
	React.createElement(ContactView, {
	contacts: contacts,
	newContact: newContact
	}),
	document.getElementById('react-app')
	);
	</script>
	</body>
	</html>