<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_componment_basic</title>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    //一、.定义组件
    //方式1:工厂函数组件(简单组件)
    function MyComponent() {
        return <h2>工厂函数组件(简单组件)</h2>
    }

    //方式2:es6类组件(复杂组件)(通过创建MyComponent2的实例调用render方法)
    class MyComponent2 extends React.Component {
        render() {
            console.log(this);
            return <h2>es6类组件(复杂组件)</h2>
        }
    }

    //二、渲染组件标签
    ReactDOM.render(<MyComponent/>, document.getElementById('example1'));
    ReactDOM.render(<MyComponent2/>, document.getElementById('example2'));
</script>
</body>
</html>

07_组件三大属性(1)_state的更多相关文章

  1. React组件三大属性之 refs

    React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...

  2. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  3. React组件三大属性之state

    React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...

  4. 08_组件三大属性(2)_props

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 09_组件三大属性(3)_refs和事件处理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 组件的三大属性state，props，refs与事件处理

    组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...

  7. React 三大属性state,props,refs以及组件嵌套的应用

    React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...

  8. React组件的属性

    组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...

  9. vue-learning：29 - component - 组件三大API之三：slot

    组件三大API之三: slot <slot>标签 v-slot指令 普通插槽 有默认值的插槽 具名插槽 作用域插槽 v-slot是Vue 2.6.0引入的一个新语法指令,目的是统一之前sl ...

随机推荐

  1. Maven项目下update maven后Eclipse报错

    Maven项目下update maven后Eclipse报错:java.lang.ClassNotFoundException: ContextLoaderL     严重: Error config ...

  2. C# 公共类

    https://github.com/Jimmey-Jiang/Common.Utility/tree/master/Utility%E5%9F%BA%E7%A1%80%E7%B1%BB%E5%A4% ...

  3. 第41课 kmp子串查找算法

    1. 朴素算法的改进 (1)朴素算法的优化线索 ①因为 Pa != Pb 且Pb==Sb:所以Pa != Sb:因此在Sd处失配时,子串P右移1位比较没有意义,因为前面的比较己经知道了Pa != Sb ...

  4. CentOS7 安装kylin2.6.0集群

    1. 环境准备 zookeeper3.4.12 mysql5.7 hive2.3.4 hadoop2.7.3 JDK1.8 hbase1.3.3 2. 集群规划 ip地址 机器名 角色 192.168 ...

  5. Best Practice AngularJS

    Best Practice AngularJS /* 用几组简明扼要的代码段及其说明, 展示良好的编程行为, angularjs */ // app.module.js angular .module ...

  6. isNAN的使用方法及介绍

    NaN为 Not a Number isNaN()函数在接到一个值后,会尝试将这个值转换为数值. alert(isNaN(NaN)); //true alert(isNaN(25)); //false ...

  7. tornado 和 djanjo 转义处理对比

    tornado tornado默认是转义所有字符,比较安全,但有时候我们的确需要把字符当做html来解析处理,因此我们需要做些处理. 所有的模板输出都已经通过 tornado.escape.xhtml ...

  8. 5种分布式共享session的方法

    集群/分布式环境下5种session处理策略 转载 2016年03月16日 08:59:53 标签: session / nginx / 分布式 / 集群 11098 转载自:http://blog. ...

  9. Java课程作业之动手动脑（三）

    1.以下代码为何无法通过编译?哪儿出错了? 在Foo类中已经有了一个Foo的含参构造方法,所以在定义Foo类对象时不能使用new Foo()方法.在Foo类中再写一个无参构造方法,就能编译了. 如果类 ...

  10. redis的键命令

    键的命令 查找键,参数支持正则 KEYS pattern 判断键是否存在,如果存在返回1,不存在返回0 EXISTS key [key ...] 查看键对应的value的类型 TYPE key 删除键 ...