react native 初接触

发布时间：2020-12-15 07:28:40 所属栏目：百科来源：网络整理

导读：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 titleTitle

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"));

然后浏览器中运行得到结果。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!