<!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. Bouncy Castle内存溢出

    现象: 堆内存溢出,java.lang.OutOfMemoryError: Java heap space 用jmap查看,显示 num     #instances         #bytes   ...

  2. Linux 下找出超過某些容量的檔案

    找目前所在位置下,所有檔案大小超過3M的file,並列出檔名:大小 find . -type f -size +3M -exec ls -alh {} \; | awk '{print$9 " ...

  3. Centos 安装 NodeJS

    准备命令: yum -y install gcc make gcc-c++ openssl-devel wget 下载源码及解压: wget http://nodejs.org/dist/v0.10. ...

  4. 关闭CentOS不必要的开机启动项

    命令行: for i in `chkconfig --list |grep 3:on|awk '{print $1}' |grep -Ev "network|sshd|sysstat|ude ...

  5. Daily Scrum 10.25

    今天我们在分析数据库的时候发现还有一些这方面知识上的不足,花费一些额外的时间做功课.这说明当时我们的plan没有做好,但是我们基本还处在进度上. 下面是今天的Task统计:

  6. Python 基础 - 统计文本里单词的个数以及出现的次数

    # -*- coding:utf-8 -*- #author:V def tol (file1,gui): #写一个方法,定义文件,or 匹配规则 import re patt = re.compil ...

  7. div自定义的滚动条 （竖直导航条）

    <style type="text/css"> .scrollBar { width: 10px; background-color: #daa520; positio ...

  8. 屏蔽Enter触发的事件

    无论是 <button type="button" onclick="console.log('123');">123</button> ...

  9. php发送邮件处理功能页面去除重复的邮箱地址

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. C# Datatable排序

    在C#中要对Datatable排序,可使用DefaultView的Sort方法.先获取Datatable的DefaultView,然后设置 得到的Dataview的sort属性,最后用视图的ToTab ...