JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
</head>
<body>
<div>
<h3>simple HTML form (no ReactJS)</h3>
<form>
<input type='text' value placeholder='please enter your name'>
</form>
</div>
<div id='react-app'>
<script type='text/javascript'>
const rce = React.createElement.bind(React);
const rcc = React.createClass.bind(React);
const ContactForm = rcc({
propTypes: {
value: React.PropTypes.object.isRequired,
},
render: function() {
return rce('form', {}
, rce('input', {type: 'text'
, placeholder: 'please enter your name'
, value: this.props.value.name
, onInput: function(se) {
console.log(se.target.value);
}}))}
, componentWillMount : function () {console.log('componentWillMount');}
, componentDidMount : function () {console.log('componentDidMount');}
, componentWillReceiveProps: function () {console.log('componentWillReceiveProps');}
, shouldComponentUpdate : function () {console.log('shouldComponentUpdate');}
, componentWillUpdate : function () {console.log('componentWillUpdate');}
, componentDidUpdate : function () {console.log('componentDidUpdate');}
, componentWillUnmount : function () {console.log('componentWillUnmount');}
});
const ContactView = rcc({
propTypes: {
newContact: React.PropTypes.object.isRequired,
}
,render: function () {
console.log('render called');
return...