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>
其中react.js react-dom.js 都可以在http://reactjs.cn/react/index.html 下载
browser.min.js 可以在 https://npmcdn.com/babel-core@5.8.38/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"));
然后浏览器中运行 得到结果 。
原文链接：https://www.f2er.com/react/304507.html