Ivan Zhao ivzhao

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

ReactElement / ReactElement Factory
ReactNode
ReactComponent / ReactComponent Class

React Elements

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	// If you don't use underscore.js, use it (http://documentcloud.github.com/underscore/)
	// Then, use underscore's mixin method to extend it with all your other utility methods
	// like so:
	_.mixin({
	escapeHtml: function () {
	return this.replace(/&/g,'&')
	.replace(/>/g,'>')
	.replace(/</g,'<')
	.replace(/"/g,'"')
	.replace(/'/g,''');

	window.addEventListener "DOMContentLoaded", ->
	body = $ "body"
	canvas = $ "#canvas"
	chalkboard = $ "#chalkboard"
	close = $ "#close"
	ledge = $ "#ledge"
	lightswitch = $ "#lightswitch"
	output = $ "#output"
	shade = $ "#shade"
	share = $ "#share"

	class Votable(BaseModel):
	points = db.IntegerProperty(default=1)
	score = db.FloatProperty()
	up_votes = db.StringListProperty() # contains user key_names
	down_votes = db.StringListProperty() # contains user key_names

	def update_score(self):
	"""Adapted from reddit's algorithm
	http://code.reddit.com/browser/r2/r2/lib/db/sorts.py?rev=4778b17e939e119417cc5ec25b82c4e9a65621b2
	"""

	# JS files
	JS_FINAL = js/project-name-all.js

	JS_TARGETS = js/file1.js \
	js/file2.js \
	js/file3.js

	# CSS files
	CSS_FINAL = css/project-name-all.css
	STYLUS_TARGETS = css/file1.styl \

	var webdriver = require('selenium-webdriver');
	var fs = require('fs');

	var driver = new webdriver.Builder().build();

	webdriver.WebDriver.prototype.saveScreenshot = function(filename) {
	return driver.takeScreenshot().then(function(data) {
	fs.writeFile(filename, data.replace(/^data:image\/png;base64,/,''), 'base64', function(err) {
	if(err) throw err;
	});