yumere/react-lifecycle.html

## react-lifecycle.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <title>Document</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
  <div id="content"></div>

  <script type="text/babel">

  var testData = [
    {
      'id': 1,
      'author': 'author1',
      'title': 'title1',
      'text': 'text1'
    },
    {
      'id': 2,
      'author': 'author2',
      'title': 'title2',
      'text': 'text2'
    },
    {
      'id': 3,
      'author': 'author3',
      'title': 'title3',
      'text': 'text3'
    },
    {
      'id': 4,
      'author': 'author4',
      'title': 'title4',
      'text': 'text4'
    },
    {
      'id': 5,
      'author': 'author5',
      'title': 'title5',
      'text': 'text5'
    },
    {
      'id': 6,
      'author': 'author6',
      'title': 'title6',
      'text': 'text6'
    }
  ];

  var SearchBox = React.createClass({
    searchChange: function(e){
      e.preventDefault();
      this.props.searchHandler(this.refs.search_box.value);
    },

    render: function(){
      return (
        <div className="search-form" style={{textAlign:"center"}}>
          <input onChange={this.searchChange} type="text" ref="search_box" placeholder="Input your search text..." />
        </div>
      )

    }
  })

  var DataList = React.createClass({

    getInitialState: function(){
      console.log("getInitialState in DataList");
      return {
        data: this.props.data
      };
    },

    componentWillMount: function(){
      console.log("componentWillMount in DataList");
    },

    componentWillUpdate: function(){
      console.log("componentWillUpdate in DataList");
    },

    componentWillUnmount: function(){
      console.log("componentWillUnmount");
    },

    componentWillReceiveProps: function(nextProps){
      console.log("componentWillReceiveProps in DataList");
       this.setState({
         data: nextProps.data
       });
    },

    componentDidMount: function(){
      console.log("componentDidMount in DataList");
    },

    componentDidUpdate: function(){
      console.log("componentDidUpdate in DataList");
    },

    shouldComponentUpdate: function(){
      console.log("shouldComponentUpdate in DataList");
      return true
    },

    render: function(){
      var data_template = this.state.data.map(function(d){
        return (
          <div className="item" style={{overflow:"auto", margin:"20px auto", border:"1px solid black", padding:"5px"}} key={d.id}>
            <div className="data-header" style={{marginBottom: "5px", borderBottom:"1px solid #e7e7e7"}}>
              <span className="data-idx" style={{color:"#333", marginRight:"20px"}}>{d.id}</span>
              <span className="data-title" style={{fontWeight:"bold"}}>{d.title}</span>
              <span className="data-author" style={{float:"right"}}>{d.author}</span>
            </div>
            <div className="data-content">
            {d.text}
            </div>
          </div>
        );
      })

      return (
        <div className="item-wrapper">
        {data_template}
        </div>
      )
    }
  });

  var SampleWrapper = React.createClass({
    getInitialState: function(){
      return {
        data: this.props.data
      };
    },

    _searchHandler: function(text){
      var nextDataList = this.props.data.filter(function(d){
        return d.text.indexOf(text) >= 0;
      });

      this.setState({
        data: nextDataList
      });
    },

    render: function(){
      return (
        <div style={{margin: "0 200px"}}>
        <SearchBox searchHandler={this._searchHandler}/>
        <DataList data={this.state.data}/>
        </div>
      )
    }
  })

  ReactDOM.render(
    <SampleWrapper data={testData}/>,
    document.getElementById('content')
  );
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">

	<title>Document</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	</head>
	<body>
	<div id="content"></div>

	<script type="text/babel">

	var testData = [
	{
	'id': 1,
	'author': 'author1',
	'title': 'title1',
	'text': 'text1'
	},
	{
	'id': 2,
	'author': 'author2',
	'title': 'title2',
	'text': 'text2'
	},
	{
	'id': 3,
	'author': 'author3',
	'title': 'title3',
	'text': 'text3'
	},
	{
	'id': 4,
	'author': 'author4',
	'title': 'title4',
	'text': 'text4'
	},
	{
	'id': 5,
	'author': 'author5',
	'title': 'title5',
	'text': 'text5'
	},
	{
	'id': 6,
	'author': 'author6',
	'title': 'title6',
	'text': 'text6'
	}
	];

	var SearchBox = React.createClass({
	searchChange: function(e){
	e.preventDefault();
	this.props.searchHandler(this.refs.search_box.value);
	},

	render: function(){
	return (
	<div className="search-form" style={{textAlign:"center"}}>
	<input onChange={this.searchChange} type="text" ref="search_box" placeholder="Input your search text..." />
	</div>
	)

	}
	})

	var DataList = React.createClass({

	getInitialState: function(){
	console.log("getInitialState in DataList");
	return {
	data: this.props.data
	};
	},

	componentWillMount: function(){
	console.log("componentWillMount in DataList");
	},

	componentWillUpdate: function(){
	console.log("componentWillUpdate in DataList");
	},

	componentWillUnmount: function(){
	console.log("componentWillUnmount");
	},

	componentWillReceiveProps: function(nextProps){
	console.log("componentWillReceiveProps in DataList");
	this.setState({
	data: nextProps.data
	});
	},

	componentDidMount: function(){
	console.log("componentDidMount in DataList");
	},

	componentDidUpdate: function(){
	console.log("componentDidUpdate in DataList");
	},

	shouldComponentUpdate: function(){
	console.log("shouldComponentUpdate in DataList");
	return true
	},

	render: function(){
	var data_template = this.state.data.map(function(d){
	return (
	<div className="item" style={{overflow:"auto", margin:"20px auto", border:"1px solid black", padding:"5px"}} key={d.id}>
	<div className="data-header" style={{marginBottom: "5px", borderBottom:"1px solid #e7e7e7"}}>
	<span className="data-idx" style={{color:"#333", marginRight:"20px"}}>{d.id}</span>
	<span className="data-title" style={{fontWeight:"bold"}}>{d.title}</span>
	<span className="data-author" style={{float:"right"}}>{d.author}</span>
	</div>
	<div className="data-content">
	{d.text}
	</div>
	</div>
	);
	})

	return (
	<div className="item-wrapper">
	{data_template}
	</div>
	)
	}
	});

	var SampleWrapper = React.createClass({
	getInitialState: function(){
	return {
	data: this.props.data
	};
	},

	_searchHandler: function(text){
	var nextDataList = this.props.data.filter(function(d){
	return d.text.indexOf(text) >= 0;
	});

	this.setState({
	data: nextDataList
	});
	},

	render: function(){
	return (
	<div style={{margin: "0 200px"}}>
	<SearchBox searchHandler={this._searchHandler}/>
	<DataList data={this.state.data}/>
	</div>
	)
	}
	})

	ReactDOM.render(
	<SampleWrapper data={testData}/>,
	document.getElementById('content')
	);
	</script>

	</body>
	</html>