pt.2-React/basic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="./style.css">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom-server.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <title>Javascript only</title>
</head>
<body>
<div id="app"></div>

</body>
<script>
!function() {
var DOM = React.DOM
var appElement = document.getElementById('app')


function createDispath(initialState, renderFn) {
  return function(stateUpdate) {
    var newState = Object.assign({}, initialState, stateUpdate)
    renderFn(newState, createDispath(newState, renderFn))
  }
}


var defaultData = {
  heading: 'Hello world!',
  subheading: 'This should be a subheading'
}

function renderForm(data, dispatch) {
  function handleInput(e) {
    dispatch({
      heading: e.target.value,
    })
  }


  return DOM.div({}, [
    DOM.input({
      className: 'form-control',
      value: data.heading,
      oninput: handleInput,
    })
  ])
}


function app(data, dispatch) {
  return DOM.div({},
    [
      DOM.h1({}, [data.heading]),
      DOM.h2({}, [data.subheading]),
      renderForm(data, dispatch)
    ]
  )
}


ReactDOM.render(React.createElement(app, defaultData), appElement)

// renderDOM(app(defaultData, createDispath(defaultData, function(state, dispatch) {
//   renderDOM(app(state, dispatch), appElement, document.activeElement)
// })), appElement)


}()
</script>
</html>