Haroen Viaene Haroenv

## dimoc.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                Haroenv
                / dimoc.md
            
            
              Created
              February 21, 2017 09:28
                — forked from jamesgpearce/dimoc.md
            
              
                DIMOC: Do It Myself or Callback - a simple pattern for React components
              
          
    TLDR: a React component should either manage its own state, or expose a callback so that its parent can. But never both.
Sometimes our first impulse is for a component to entirely manage its own state. Consider this simple theater seating picker that has a letter for a row, and a number for a seat. Clicking the buttons to increment each value is hardly the height of user-interface design, but never mind - that's how it works:
/* @flow */
var React = require('react');

var Letter: React.ReactClass = React.createClass({
  getInitialState: function(): any {

  
## index.html
<html>
<head>
  <meta charset="UTF-8">
  <title>ISS PubNub demo</title>
  <script src="https://cdn.pubnub.com/pubnub-3.7.13.min.js"></script>
  <script src="jquery.js" charset="utf-8"></script>
  <!-- mapbox CDN -->
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
  <link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
	<html>
	<head>
	<meta charset="UTF-8">
	<title>ISS PubNub demo</title>
	<script src="https://cdn.pubnub.com/pubnub-3.7.13.min.js"></script>
	<script src="jquery.js" charset="utf-8"></script>
	<!-- mapbox CDN -->
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
	<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />