A blog in so many lines of code

The following:

class BlogTitle extends React.Component {
	constructor(props) {
		super(props);
	}
	render() {
		return <h2>{this.props.title}</h2>;
	}
	
}

class Title extends React.Component {
	constructor(props) {
		super(props);
	}
	render() {
		return <h1>Sam's Blog</h1>;
	}
	
}
 
// Sam Squire
var template = {
	"data": {
		"posts": [
			{
				"title": "Additive GUI blog",
				"body": "It's great to use additive GUIs to blog."
			},
				{
				"title": "Additive GUI blog",
				"body": "It's great to use additive GUIs to blog."
			}
		]
	},
	"predicates": [
		"header above content",
		"header hasClass header"
	
	],
	"widgets": {
		"header": {
			"predicates": [
				"logo leftOf search"
			]
		},
		"content": {
			"predicates": [
				"title",
				"blogs",
				"title above blogs",
				"blogs backedBy .posts",
				"blogs mappedTo blogItem",
				"blogs key .title",
				"blogs hasClass offset-md-2"
			]
		},
		"blogTitle": {"react": BlogTitle},
		"title": {"react": Title},
		"blogItem": {
			"predicates": [
				"blogTitle above blogBody",
				"blogBody hasContent .body",
			
			],
		}
	}
};

Renders to this.

See additive-guis for more.