For Movies Application in React Training

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, browserHistory } from 'react-router';

import HomePage from './home-page'
import MoviePoster from './movie-poster';
import MovieDetails from './movie-details';

//ES6 Const Keyword
const app = document.getElementById('app');

ReactDOM.render((
		<Router history={browserHistory}>
			<Route path="/" component={HomePage}>
				<Route path="/movies" component={MoviePoster}/>
				<Route path="/details" component={MovieDetails}/>
			</Route>
		</Router>
	),app);

home-page.js

import React, { Component } from 'react';
import NavBar from './navbar';

export default class HomePage extends Component{

	render(){

		var divStyle = {
			marginLeft: '80px'
		}

		return (
				<div>
				<NavBar menuItem1="Home" menuItem2="Movies" menuItem3="Details" />
				<br></br>
				<div className="jumbotron">
						<div style={divStyle}>
							<h1>Welcome to CGI Movies</h1>
					   		<h4> Free Unlimited Tickets... </h4>
						</div>
				</div>
					{this.props.children}

				</div>
			);

	}

}

movie-details.js

import React, { Component } from 'react';
import {Link} from 'react-router';

export default class MovieDetails extends Component{

	render(){
		return (<div>
				<main>
					<h4>Movie Details here..</h4>
					<h1>Hello</h1>	
					
				</main>
	</div>);

	}

} 

movie-poster.js

import React, { Component } from 'react';
import { Link } from 'react-router';
import MovieBox from './movie-box';

export default class MoviePoster extends Component{

	

	constructor(props){
		super(props);
		//Here is where you initialize state
		   this.state ={
			 movies: [
			 	{key:'1', title: 'Kabali',desc:'Sample Movies',pic:'http://bit.do/movie-pic1'},
				{key:'2', title: 'Kabali 2',desc:'Sample Movies',pic:'http://bit.do/movie-pic1'},
				{key:'3', title: 'Kabali 3',desc:'Sample Movies',pic:'http://bit.do/movie-pic1'}
				 ]
			 }
			 this.handleBooking = this.handleBooking.bind(this);
			 this.handleReadMore = this.handleReadMore.bind(this);
	}

	handleBooking(e){
		console.log("Booking Received!");
		console.log("Title: "+ e.movieTitle);
	}

	handleReadMore(){
		console.log("Read More...");

	}

	render(){

		var movieItems = this.state.movies.map(function(movie){
			return <MovieBox ItemKey={movie.key} desc={movie.desc} title={movie.title} pic={movie.pic} handleBooking={this.handleBooking} handleReadMore={this.handleReadMore}/>
		}.bind(this));


		return (<div>
					<h2>This is a Movies Page</h2>
					{movieItems}
			   </div>);
	}


}

navbar.js

import React, { Component } from 'react';
import {Link} from 'react-router';



export default class NavBar extends Component{

	render(){

		return(
				<div>

					<nav className="navbar navbar-default navbar-fixed-top">
					  <div className="container-fluid">
						    <div className="navbar-header">
						      <a className="navbar-brand" href="#">
						        <img alt="Brand" src="http://jsrocks.org/images/icon-logo-js.png"></img>
						      </a>
						    </div>
					   
						   <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	      						<ul className="nav navbar-nav">
	      							<Link to="/" className="btn btn-default">{this.props.menuItem1} </Link>

						           <Link to="/movies" className="btn btn-default">{this.props.menuItem2}  </Link>

								   <Link to="/details" className="btn btn-default">{this.props.menuItem3}</Link>
        						</ul>
						   </div>
					  </div>
					</nav>
			        
		        </div>
    		);
	}

}