本來說好端午給大家分享的，結果端午過了才發(fā)，對大家說聲抱歉（主要端午玩的太爽了= =!）。
React.js想必大家都聽過很多次了，組件化開發(fā)，用于大型項目的開發(fā)
官網(wǎng)：https://facebook.github.io/react/
中文官網(wǎng)：http://www.react-cn.com/
首先無論使用哪個框架必須要有他的文件，在React中有三個文件必須要引入
1、react.js
2、react-dom.js（使用React中的虛擬DOM）
3、browser.js（因為需要babel的配合所以必須引入此文件）
一、既然萬事俱備我們就先寫一個小例子先把一個標簽渲染到html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
引入三個文件
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div1"></div>
切記type類型一定要為type="text/babel"
<script type="text/babel">
var oDiv=document.getElementById('div1');
渲染到html中
ReactDOM.render(
<h1>Hello, world!</h1>,
oDiv
);
</script>
</body>
</html>
這時你就可以在瀏覽器中看到Hello, world!
二、如何聲明組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script type="text/babel">
創(chuàng)造一個組件
var CommentBox = React.createClass({
render(){
return (
<div className="commentBox">
<h1>Hello word!</h1>
</div>
)
}
})
渲染到html中
ReactDOM.render(
<CommentBox />,
document.getElementById('div1')
)
</script>
</body>
</html>
因為React主要是控制狀態(tài)，所以接下來我們看下如何初始和修改狀態(tài)
三、如何初始化狀態(tài)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script type="text/babel">
var CommentBox = React.createClass({
//getInitialState 方法用于定義初始狀態(tài)
getInitialState: function() {
return {init:'Hello Word!'};
},
render: function() {
return (
<p>
//獲取狀態(tài)需要用到this.state.xxx
{this.state.init}
</p>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('div1')
);
</script>
</body>
</html>
四、如何修改狀態(tài)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script type="text/babel">
var CommentBox = React.createClass({
//getInitialState 方法用于定義初始狀態(tài)
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
//修改數(shù)據(jù)使用this.setState({})
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('div1')
);
</script>
</body>
</html>
五、添加事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script type="text/babel">
var CommentBox = React.createClass({
getInitialState: function() {
return {liked: false};
},
//設置后的事件是個函數(shù)在函數(shù)中執(zhí)行你需要的方法即可
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
//注意事件中的on后面的每個單詞的第一個字母需要大寫比如onMouseOver、onDoubleClick如果還是不太清楚如何使用的同學可以打開此網(wǎng)頁查看哦:http://blog.csdn.net/u013063153/article/details/52497271
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('div1')
);
</script>
</body>
</html>
好了，就介紹到這里吧，我也是初學React如果有不對的地方希望大家?guī)兔χ赋?，我也好及時改正，一起探討、一起進步。
