Juan del Río Pacheco maese

Usage:

var player = new Rect(0, 0, 100, 100);
var target = new Rect(50, 50, 100, 100);
player.is = new AABB(player);

player.is.inside(target);
player.is.colliding(target);
player.is.containing(target);

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

	<!DOCTYPE HTML>
	<html>
	<!--
	@author Ben Poole, http://benpoole.com
	Example HTML5 code for playing with the local WebKit (Opera too?) SQL database.
	@see http://benpoole.com/weblog/201106222227
	-->
	<head>
	<meta charset="UTF-8" />
	<title>Winkles Of The World Unite!</title>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">

	<title>Border radius on image · CodePen</title>
	<!--
	Copyright (c) 2012 Chris Coyier, http://codepen.io/chriscoyier

	Permission is hereby granted, free of charge, to any person obtaining

	/css reset/
	html,body {position:relative;margin:0;padding:0;min-height:100%;width:100%;height:100%;}
	div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td, figure {margin:0;padding:0;}
	ol,ul {list-style:none;}
	li {list-style-type: none;}
	* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

	html, body {
	font-family: Helvetica;
	height: 100%; /important for equal height columns/

	// document.ready
	document.addEventListener("DOMContentLoaded", function() {
	// your code
	}, false);



	// select div
	var element = document.querySelector("div");

	<script type="text/javascript">
	(function () {
	"use strict";
	// once cached, the css file is stored on the client forever unless
	// the URL below is changed. Any change will invalidate the cache
	var css_href = './index_files/web-fonts.css';
	// a simple event handler wrapper
	function on(el, ev, callback) {
	if (el.addEventListener) {
	el.addEventListener(ev, callback, false);

	{
	"name": "my-app",
	"version": "1.0.0",
	"description": "My test app",
	"main": "src/js/index.js",
	"scripts": {
	"jshint:dist": "jshint src/js/*.js",
	"jshint": "npm run jshint:dist",
	"jscs": "jscs src/*.js",
	"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

	// returns first element selected - $('input[name="food"]')
	var $ = document.querySelector.bind(document);
	// return array of selected elements - $$('img.dog')
	var $$ = document.querySelectorAll.bind(document);

	// Credit: https://twitter.com/wesbos/status/608341616173182977