React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
The one generate by pure CSS/JS:
<div class="break">
  <nav>
    <ul>
      <li>Home</li>
      <li>Blog</li> 
      <li>Gallery</li>
      <li>News</li>
      <li>Contact Us</li>
    </ul>
  </nav>
</div>

<hr>
    The one by pure CSS/JS, but without line-break/space:
<div class="break">
  <nav>
    <ul>
      <li>Home</li><li>Blog</li><li>Gallery</li>
      <li>News</li>
      <li>Contact Us</li>
    </ul>
  </nav>
</div>


<hr>
    
The one generated by ReactJS:
<div id="menus">
</div>

CSS

nav{
  background: #fafafa;
  border-bottom: 1px solid #eee;
  height: 40px;
}

nav ul{
  text-align: justify;
  list-style-type: none;
  padding: 10px 20px;
}

nav li{
  margin: 0;
  display: inline-block;
  cursor: pointer;
  
  font: 600 16px "Helvetica Neue";
}

.break ul:after{
  content: '';
  width: 100%;
  border-bottom: 5px dashed #922d8d;
  display: inline-block;
}
 hr {
     margin: 30px 0;
 }

JavaScript 1.7

var MenuItem = React.createClass({
    render: function() {
        return (
            <li>
                {this.props.title}
            </li>
        );
    }
});

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return [<MenuItem title={menu.title} />, ' '];
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

var myMenus = [
    { title: 'Home'},
    { title: 'Blog'},
    { title: 'Gallery'},
    { title: 'News'},
    { title: 'Contact Us'}
];
React.render(
    <TopMenus menus={myMenus} />,
  document.getElementById('menus')
);