React Base Fiddle (JSX)

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

by Rich Costello

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>


<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.navigation {
  color: gold;
}
.navigation--active {
  color: red;
}

Babel + JSX

class Tab extends React.Component{
	render() {
  	return <li 
      className={ this.props.isActive ? 'navigation--active': '' }
      onClick={ this.props.onActiveTab }
    >
    	<p>{ this.props.content }</p>
    </li>
  }
}

class Tabs extends React.Component{

  state = { selectedTabId: 1 }
 
  
  isActive = (id) => {
  	return this.state.selectedTabId === id;
  }
  
  setActiveTab = (selectedTabId) => {
  	this.setState({ selectedTabId });
  }
  
  render() {
  	var total = this.props.data.points.total,
    		tabs = total.map(function (el, i) {
        	 return <Tab 
           		key={ i }
              content={ el.name } 
              isActive={ this.isActive(el.id) } 
              onActiveTab={ this.setActiveTab.bind(this, el.id) }
           />
        }, this);
                
    return <ul className="navigation">
    	{ tabs }
    </ul>
  }
}

const data = {
	points: {
  	total: [
    	{ id: 1, name: 'tab-1', text: 'text' },
      { id: 2, name: 'tab-2', text: 'text-2' },
      { id: 3, name: 'tab-3', text: 'text-2' }
    ]
  }
}

ReactDOM.render(
  <Tabs data={ data } />,
  document.getElementById('container')
);