JSFiddle - React, Tailwind, and code Playground

by Ryan Clark

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var navigationConfig = [
	{
		href: 'http://ryanclark.me',
		text: 'My Website',
		children: [
			{
				href: 'http://ryanclark.me/how-angularjs-implements-dirty-checking/',
				text: 'Angular Dirty Checking'
			},
			{
				href: 'http://ryanclark.me/getting-started-with-react/',
				text: 'React'
			}
		]
	}
];

var Navigation = React.createClass({
	getInitialState: function () {
		return {
			openDropdown: -1
		};
	},
	getDefaultProps: function () {
		return {
			config: []
		}
	},
	propTypes: {
		config: React.PropTypes.array
	},
	render: function () {
		var config = this.props.config;

		var items = config.map(function (item) {
			var children, dropdown;
			if (item.children) {
				children = item.children.map(function (child) {
					return (
						<li className="navigation__dropdown__item">
							<a className="navigation__dropdown__link" href={ child.href }>
								{ child.text }
							</a>
						</li>
					);
				});
				
				dropdown = (
					<ul className="navigation__dropdown">
						{ children }
					</ul>
				);
			}
			return (
				<li className="navigation__item">
					<a className="navigation__link" href={ item.href }>
						{ item.text }
					</a>

					{ dropdown }
				</li>
				);
		});

		return (
			<div className="navigation">
				{ items }
			</div>
			);
	}
});

React.render(<Navigation config={ navigationConfig } />, document.body);