前端三大框架之一 React.js基础入门
2017-05-31 本文已影响0人
BrightenSun
本来说好端午给大家分享的，结果端午过了才发，对大家说声抱歉（主要端午玩的太爽了= =!）。
React.js想必大家都听过很多次了，组件化开发，用于大型项目的开发
官网：https://facebook.github.io/react/
中文官网：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">
创造一个组件
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主要是控制状态，所以接下来我们看下如何初始和修改状态
三、如何初始化状态
<!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 方法用于定义初始状态
getInitialState: function() {
return {init:'Hello Word!'};
},
render: function() {
return (
<p>
//获取状态需要用到this.state.xxx
{this.state.init}
</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 方法用于定义初始状态
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
//修改数据使用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};
},
//设置后的事件是个函数在函数中执行你需要的方法即可
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
//注意事件中的on后面的每个单词的第一个字母需要大写比如onMouseOver、onDoubleClick如果还是不太清楚如何使用的同学可以打开此网页查看哦: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如果有不对的地方希望大家帮忙指出，我也好及时改正，一起探讨、一起进步。
