attrs.jsx

class Foo extends Component {
	render() {
		return (
			<div>
				{this.size}{this.config.foo}
			</div>
		)
	}
}

Foo.STATE = {
	size: {
		value: 0
	}
}

class Bar extends Component {
	render() {
		return (
			<div>
				Conditional Bar
			</div>
		)
	}
}

class TestApp extends Component {
	getFoo() {
		return (
			<Foo size="1" />
		);
	}

	getFooBar() {
		return (
			<div>
				<Foo foo="bar" size="2" />
			</div>
		);
	}

	render() {
		return (
		<div>
			<button
				data-onclick={
					() => {
						this.index = !this.index;
					}
				}
			>
				click me
			</button>

			<div>
				<div class="">
					{this.index &&
						<Bar />
					}

					<a>
						{this.getFoo()}
					</a>

					{this.getFooBar()}
				</div>
			</div>
		</div>
		);
	}
}