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"));
然后浏览器中运行 得到结果 。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。