需要引入三個js包：browser.min.js、react.js、react-dom.js
-----demo1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello React</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
<style type="text/css">
#container{
padding: 50px;
background-color: #EEE;
}
#container h1{
font-size: 144px;
font-family: sans-serif;
color: #0080a8;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
ReactDOM.render(
<h1>我是誰！</h1>,
destination
)
</script>
</body>
</html>
-------demo2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello React</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
var Square = React.createClass({
render : function(){
var squareStyle = {
height:150,
backgroundColor:this.props.color
}
return(
<div style={squareStyle}></div>
);
}
});
var Label = React.createClass({
render:function(){
var labelStyle={
height:50,
fontFamily:"sans-serif",
fontWeight:"bold",
padding:13,
margin:0
};
return(
<div style={labelStyle}>{this.props.color}</div>
);
}
});
var Card = React.createClass({
render:function(){
var cardStyle ={
height:200,
width:150,
backgroundColor:"#FFF",
WebkitFilter:"drop-shadow(0px 0px 5px #666)",
filter:"drop-shadow(0px 0px 5px #666)"
};
return(
<div style={cardStyle}>
<Square color={this.props.color}/>
<Label color={this.props.color}/>
</div>
);
}
});
ReactDOM.render(
<Card color="#FFA737"/>,
destination
)
</script>
</body>
</html>
------demo3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react component</title>
<script src="react.js"></script>
<script src="react-dom.js" ></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var container = document.querySelector("#container");
var One = React.createClass({
render:function(){
return(
<div>
<p>{this.props.color}</p>
<p>{this.props.num}</p>
<p>{this.props.size}</p>
</div>
);
}
});
var Two = React.createClass({
render:function(){
return(
<One {...this.props}></One>
);
}
});
var Three = React.createClass({
render:function(){
return(
<Two {...this.props}></Two>
);
}
});
ReactDOM.render(
<Three color="deepblue" num="3.14" size="mudium"></Three>,
container
);
</script>
</body>
</html>
----------demo4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>繪製定時器</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
var Textpart = React.createClass({
//進行初始化，加載組件時先進行執行
getInitialState:function(){
return{
strikes:0
};
},
timerTick:function(){
this.setState({
strikes:this.state.strikes + 100
});
},
//在render函數被調用前被執行
//timerTick函數需要進行實現
componentDidMount:function(){
setInterval(this.timerTick,1000);
},
render:function(){
var counterStyle={
color:"#66FFFF",
fontSize:50
}
var count=this.state.strikes.toLocaleString();
return(
<h1 style={counterStyle}>{count}</h1>
);
}
});
var Stylepart=React.createClass({
render:function(){
var commonStyle={
margin:0,
padding:0
}
var divStyle={
width:250,
textAlign:"center",
backgroundColor:"black",
padding:40,
color:"#999",
fontFamily:"sans-serif",
borderRadius:10
};
var textStyle={
emphasis:{
fontSize:38,
...commonStyle
},
smallEmpasis:{
...commonStyle
},
small:{
fontSize:17,
opacity:0.5,
...commonStyle
}
}
return(
<div style={divStyle}>
<Textpart/>
<h2 style={textStyle.smallEmpasis}>雷霆打擊</h2>
<h2 style={textStyle.emphasis}>我們的地球</h2>
</div>
);
}
});
ReactDOM.render(
<Stylepart/>,
destination
)
</script>
</body>
</html>
----------demo5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Component組件</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
//創建自定義標籤
var HelloWorld = React.createClass(
{
render:function(){
return (
<div>
<p>Hello World!</p>
<p>Hello,{this.props.greetTarget}</p>
</div>
);
}
}
);
ReactDOM.render(
<HelloWorld greetTarget="jack"/>,
document.querySelector("#container")
);
</script>
</body>
</html>
----------------demo6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lifecycle</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var destination=document.querySelector("#container");
var CounterParent = React.createClass({
getDefaultProps:function(){
console.log("getDefaultProps");
return {};
},
getInitialState:function(){
console.log("getInitialState");
return {};
},
componentWillMount:function(){
console.log("componentWillMount");
return;
},
componentDidMount:function(){
console.log("componentDidMount");
return;
},
render:function(){
return(
<h1>CounterParent</h1>
)
}
})
ReactDOM.render(
<h2>life cycle</h2>,destination
)
</script>
</body>
</html>
---------聲明周期函數如下：
componentWillMount
componentDidMount
componentWillUnmount
componentWillUpdate
componentDidUpdate
shouldComponentUpdate
componentWillReceiveProps