<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="./js/react.js"></script>

    <script src="./js/react-dom.js"></script>

    <script src="./js/browser.min.js"></script>

</head>

<body>

    <div id="demo"></div>

    <script type="text/babel">

        //定义一个组建，名字第一个必须是大写

        var Fir = React.createClass({

            render:function(){

                return(

                    <h1>Hello 夺命雷公狗</h1>

                );

            }

        });

        ReactDOM.render(<Fir />, /*这里其实也可以使用双标签的如：<Fir></Fir>  */

            document.getElementById('demo'),

            function(){

                alert('页面渲染完成');

        });

    </script>

</body>

</html>

夺命雷公狗-----React---2--组建的更多相关文章

  1. 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

    首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. 夺命雷公狗-----React---9--map数据的遍历

    比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...

  4. 夺命雷公狗-----React---7--组建的状态props和state

    props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...

  5. 夺命雷公狗-----React---6--props多属性的传递

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

  6. 夺命雷公狗-----React---5--props对象的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. 夺命雷公狗-----React---4--props变量的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  8. 夺命雷公狗-----React---3--标签的规则

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

  9. 夺命雷公狗-----React---12--添加类和样式

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

随机推荐

  1. memcache 缓存失效问题(转)

    在大并发的场合,当cache失效时,大量并发同时取不到cache,会同一瞬间去访问db并回设cache,可能会给系统带来潜在的超负荷风险. 解决方法 方法一 在load db之前先add一个mutex ...

  2. maven的简单说明

    groupId: 项目组ID,项目坐标的核心元素. version: 项目版本,项目坐标的核心元素. description: 项目的描述信息. organization: 项目的组织信息.incep ...

  3. [LintCode] House Robber III 打家劫舍之三

    The thief has found himself a new place for his thievery again. There is only one entrance to this a ...

  4. Unity3D游戏引擎最详尽基础教程

    第一节 加入重力 我们先打开Unity3d,新建一个场景(Scene),新建的时候应该会有对话框要求你加入哪些Asset Package,记得选择Physics Material,因为后面我们一定要用 ...

  5. mimikatz不反弹读取密码

    有些时候无法反弹shell执行mimikatz,虽然可以用procdump导出lsass的内存dump文件,之后本地获取明文密码,但多少有点麻烦,其实mimikatz也支持命令行直接导出 mimika ...

  6. JS验证只允许输入数字

    1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafter ...

  7. NY-字符串替换

    描述编写一个程序实现将字符串中的所有"you"替换成"we" 输入 输入包含多行数据 每行数据是一个字符串,长度不超过1000 数据以EOF结束 输出 对于输入 ...

  8. GROUP BY 與 Null 值

    若群組資料行包含了 Null 值,該資料列將變成結果中的一個群組.若群組資料行內包含了多個 Null 值,Null 值將放入單一群組內.此行為定義於 SQL-2003 標準之中. Product 資料 ...

  9. mysql分区及实例演示

    一.为什么要分区? 需求:大数据.解决方案:分而治之,更细一点即为.将大表和大索引分为一个更小的操作单元 在mysql中,分区允许将表.索引和索引编排表细分为更小的单元.分区后,每个分区有自己单独的名 ...

  10. 推荐《HeadFirst设计模式》

    相对于国内初版的<大话设计模式>,HeadFirst真的是更好的选择,虽然看起来很厚.很吓人,但对于初学者而言浅显易懂.直击要点,即使对设计模式熟悉的同学去读这本书相信也有很大的收获.用了 ...