Basic React Babel ES6 Fiddle
HTML
<script src="https://fb.me/react-dom-0.14.3.js"></script>
<div id="root"></div>
Babel + JSX
const navbarValue = [{"Category":"Home"},{"Category":"Sport"},{"Category":"Technologia"}];
var obiekt = [{"Zdjecie":"http://i.imgur.com/A83qNiV.jpg"},{"Zdjecie":"http://i.imgur.com/wwOoOIc.png"}];
class Strona extends React.Component {
constructor() {
super();
this.state = {
id: 0,
isArticleListPage : true,
isArticlePage : false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(id, event) {
console.log("clicked", event, id);
console.log(id);
this.setState({
id: event.target.id,
isArticleListPage : false,
isArticlePage : true
});
}
articlepage(){
return(
<div>
<div className="navbar-wrapper">
<div className="container">
<nav className="navbar navbar-fixed-static-top navbar-inverse">
<div className="container">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="">Back</a>
</div>
<div id="navbar" className="collapse navbar-collapse">
<ul className="nav navbar-nav">
{navbarValue.map((obj, index) => {
if (index == this.state.id)
return <li className="active" key={index}><a id={index} onClick={this.onClick}>{obj.Category}</a></li>
return <li key={index}><a id={index} onClick={this.onClick}>{obj.Category} </a></li>
})}
</ul>
</div>
</div>
</nav>
</div>
</div>
<div className="container">
<div id="carousel-example-generic" className="carousel slide" data-ride="carousel" data-interval="3000">
<div className="carousel-inner" role="listbox">
<div className="item active">
{obiekt.map((obj, index) =>{
if(index == this.state.id) return <img src= {obj.Zdjecie} alt="" key= {index}/>
})}
<div...