react native 初接触

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

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

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...