import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index';
import ComponentList from './components/list';
import ComponentDetails from './components/details';
import {Router,Route,hashHistory} from 'react-router';

export default class Root extends React.Component{
  render(){
    return (
      //这里替换了之前的 Index，变成了程序的入口
      
 

        
   
    
  

        
  

      
 
    );
  };
}

ReactDOM.render(
 , document.getElementById('example'));

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
import ComponentFooter from './components/footer';
import BodyIndex from './components/bodyindex';

import 'antd/dist/antd.css';

export default class Index extends React.Component {

	componentWillMount(){
		//定义你的逻辑即可
		console.log("Index - componentWillMount");
	}

	componentDidMount(){
		console.log("Index - componentDidMount");
	}

	render() {
		/*
		var component;
		if (用户已登录) {
			component = 
 
		}
		else{
			component = 
 
		}
		*/
		return (
			
 
				
  
				
   
   
     {this.props.children} 
    
    
  
 
		);
	}
}

import React from 'react';
import {Link} from 'react-router';
export default class ComponentHeader extends React.Component {
constructor(){
	super();
	this.state ={
		miniHeader: false //默认加载的时候还是高（不是 mini）的头部
	};
};

switchHeader(){
	this.setState({
		miniHeader: !this.state.miniHeader
	});
};

	render() {
		const styleComponentHeader = {
			header: {
				backgroundColor: "#333333",
				color: "#FFFFFF",
				"paddingTop": (this.state.miniHeader) ? "3px" : "15px",
				paddingBottom: (this.state.miniHeader) ? "3px" : "15px"
			},
			//还可以定义其他的样式
		};
		return (
			
 

				
  
这里是头部
				
  
 
   

    首页
 
   

    嵌套的详情页面
 
   

    列表页面
 
  
			
 
		)
	}
}

import React from 'react';
import ReactDOM from 'react-dom';
import BodyChild from './bodychild';

import ReactMixin from 'react-mixin';
import MixinLog from './mixins';

import { Input } from 'antd';

const defaultProps = {
	username: '这是一个默认的用户名'
};

export default class BodyIndex extends React.Component {
	constructor() {
		super(); //调用基类的所有的初始化方法
		this.state = {
			username: "Parry",
			age: 20
		}; //初始化赋值
	};
	changeUserInfo(age) {
		this.setState({age: age});
		//第一种方式
		// var mySubmitBotton  = document.getElementById('submitButton');
		// console.log(mySubmitBotton);
		// ReactDOM.findDOMNode(mySubmitBotton).style.color = 'red';

		//第二种方式
		console.log(this.refs.submitButton);
		this.refs.submitButton.style.color = 'red';

		MixinLog.log();

	};
	handleChildValueChange(event) {
		this.setState({age: event.target.value});
	};
	render() {
		// setTimeout(()=>{
		//   //更改 state 的时候
		//   this.setState({username: "IMOOC",age : 30});
		// },4000);
		return (
			
 
				
  
页面的主体内容
				
  
接收到的父页面的属性：userid: {this.props.userid} username: {this.props.username}
				
  
age: {this.state.age}
				
  
				
  
				
   
  
 
		)
	}
}
BodyIndex.propTypes = {
	userid: React.PropTypes.number.isRequired
};
BodyIndex.defaultProps = defaultProps;

ReactMixin(BodyIndex.prototype, MixinLog);

import React from 'react';
//var footerCss  =  require("../../css/footer.css");
export default class ComponentFooter extends React.Component {
	render() {
		var footerConvertStyle = {
			"miniFooter": {
				"backgroundColor": "#333333",
				"color": "#ffffff",
				"paddingLeft": "20px",
				"paddingTop": "3px",
				"paddingBottom": "3px"
			},
			"miniFooter_h1": {
				"fontSize": "15px"
			}
		};
		//console.log(footerCss);
		return (
			
 
		)
	}
}

import React from 'react';
export default class ComponentDetails extends React.Component{
  render(){
    return (
      
 
        
  
这里是嵌套在首页中的详细的页面
      
 
    );
  };
}

import React from 'react';
export default class ComponentList extends React.Component{
  render(){
    return (
      
 
        
  
这里是列表页面 Id: {this.props.params.id}
      
 
    );
  };
}