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'
	}
];

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) {
			return (
				<li className="navigation__item">
					<a className="navigation__link" href={ item.href }>
						{ item.text }
					</a>
				</li>
				);
		});

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

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