React是用於構建用戶界面的 JavaScript 庫，React 組件使用一個名為 render() 的方法， 接收數據作為輸入，輸出頁面中對應展示的內容。
React除了可以使用外部傳入的數據以外 (通過 this.props 訪問傳入數據), 組件還可以擁有其內部的狀態數據 (通過 this.state 訪問狀態數據)。 當組件的狀態數據改變時， 
組件會調用 render() 方法重新渲染。
效果圖沒用樣式寫一下，湊合著看吧！

實例模擬：
<style>
	.list{
		list-style:none;
	}
	#app{
		width:80%;
		margin:0 auto;
		text-align:center;
		font-size:50px;
		font-weight:bold;
		color:black;
	}
</style>
<script type="text/babel">
		class Comp extends React.Component{
			//構造函數 構造函數是在整個類中未初始化中執行的
			constructor(...args){  //構造函數名
			super(...args);//超類。
			this.state={h:‘0‘,m:‘0‘,s:‘0‘};
			var that=this;
			 setInterval(function(){
				that.fn()
			},1000)
		}
		componentDidMount(){
		　　this.fn();
		}
		componentWillUpdate(){
		　　console.log("更新之前");
		}
		componentDidUpdate(){
		　　console.log("更新之後");
		}
		fn(){
		//傳json
			var D=new Date();
			this.setState({
			　　h:D.getHours(),
			　　m:D.getMinutes(),
			　　s:D.getSeconds()
			})
		}
		render(){
		　　return <div>
			<span>{this.state.h}:</span>
			<span>{this.state.m}:</span>
			<span>{this.state.s}</span>
		    </div>;
		}
	}
   　　 window.onload=function(){
        　　var time=document.getElementById(‘app‘);
	　　    ReactDOM.render(<Comp/>,time);
   　　 }	    
</script>  
<div id="app"></div>

react.js 時鐘組件