1.首先创建一个普通的web项目
2.在html中引入依赖的react.js 文件
<head>
<meta charset="UTF-8">
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
<script type="text/babel" src="01.js"></script>
<title>Title</title>
</head>browser.min.js 可以在 https://npmcdn.com/[email protected]/browser.min.js 下载
3.react 都是根据组件化来实现UI的编写 所以创建组件有两种方式
3.1 第一种是继承 React.Component
class Text1 extends React.Component{
handleClick(){
alert("ok");
}
render(){
return <p onClick={this.handleClick}>点击一下</p>
}
}其中1.注意点击事件的命名一定要用驼峰式 onClick
2.this.handleClick 调用时没有小括号
3.2 第二种方式 调用React.creatClass();
var Text = React.createClass({
getInitialState : function(){
return {isLike : false}
},
handleClick : function () {
this.setState( {isLike : !this.state.isLike});
},
render : function () {
let text = this.state.isLike ? "喜欢":"不喜欢";
return <p onClick={this.handleClick}>你{text}我吗?</p>
},
});4.在构建完组件之后 要在最后利用ReactDom 去绘制他们
ReactDOM.render(<Text1/>,document.getElementById("myDiv"));
然后浏览器中运行 得到结果 。
