Chris Chua chrisirhc

made with esnextbin

Seed for a blog article to convert from jQuery to jqLite. Finding all the bad usages of selectors in find and bad css calls.

	class HasTooltip extends React.Component {
	/* … */

	_renderPlaceholder() {
	return (
	<div className="has-tooltip"
	onMouseEnter={this._setHovered}
	onMouseLeave={this._setNotHovered}
	></div>
	);

	/* non-hovered */
	<div className="has-tooltip"
	onMouseEnter={this._setHovered}
	onMouseLeave={this._setNotHovered}
	></div>

	/* hovered */
	<div className="tooltip-region">
	<div className="has-tooltip"
	onMouseEnter={this._setHovered}

	<div className="tooltip-region"
	onMouseLeave={this._setNotHovered}
	<div className="has-tooltip"
	onMouseEnter={this._setHovered}></div>
	<div>Hello</div>
	</div>

	// Best practice, to maintain a similar DOM shape
	render() {
	const {isHovered} = this.state;

	return (
	<div className={classNames(isHovered && 'tooltip-region')}
	onMouseEnter={this._setHovered}
	onMouseLeave={this._setNotHovered}>
	<div className="has-tooltip"></div>
	{isHovered && <div>Hello</div>}

	var Rx = require('rx');
	var clone = require('lodash.clone');
	var isequal = require('lodash.isequal');

	var Config = new MutableSubject({a: null});
	var Options = new MutableSubject({});

	function MutableSubject(name, obj) {
	var behaviorSubject = new Rx.BehaviorSubject(obj);

	<div class="box">
	<span class="t box-inner">div + span</span>
	</div>

	var Container = React.createClass({

	getInitialState: function () {
	return {
	contentComponent: ContentA,
	headerProps: null
	};
	},

	_toggleContent: function () {