React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<script src="https://cdn.apple-cloudkit.com/ck/1/cloudkit.js"></script>


<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

CloudKit.configure({
  containers: [{
    containerIdentifier: '<container>',
    apiToken: '<token>',
    environment: 'development'
  }]
});
const container = CloudKit.getDefaultContainer();

class HelloCloudKitJS extends React.Component {
	
  constructor() {
  	super();
    this.state = {
    	userInfo: null
    }
  }
  
  componentDidMount() {
  	container
      .setUpAuth()
    	.then(userInfo => {
      	if(userInfo) {
        	this.setState({userInfo: userInfo});
          return;
        }
        container
          .whenUserSignsIn()
        	.then(userInfo => {
          		this.setState({userInfo: userInfo})
          })  
      })
  }
  
  render() {
  	return <div>
      <div>
      	<div id="apple-sign-in-button"></div>
        <div id="apple-sign-out-button"></div>
      </div>
    </div>;
  }
}

ReactDOM.render(
  <HelloCloudKitJS />,
  document.getElementById('container')
);