<!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(

                    //必须要有一个大标签包围着才可以

                    <div>

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

                        <input type="text" name="" />

                        <input type="button" value="留言" />

                    </div>

                );

            }

        });

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

            document.getElementById('demo'),

            function(){

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

        });

    </script>

</body>

</html>

夺命雷公狗-----React---3--标签的规则的更多相关文章

  1. 夺命雷公狗---DEDECMS----12dedecms全局标签的使用以及嵌套标签的使用

    在网站开发中,在很多页面可能会使用到同一个变量,比如路径网站信息等,所以我们可以用全局变量来使用. 默认的放在: 进去里面看下就会发现很多的常量都是在这里定义的: 我们在实际开发的时候可以将我们在多个 ...

  2. 夺命雷公狗---DEDECMS----11dedecms字段标签

    如果我们在开发的时候需要对获取的某个字段进行二次开发,我们可以对字段值调用某个函数来完成需求, 实例代码如下所示: <!DOCTYPE html> <html> <hea ...

  3. 夺命雷公狗---DEDECMS----10dedecms双标签

    双标签基本语法如下: {dede:标签名 参数名=“值” 参数名2=“值”...} 内容...... {/dede} 我们先来查看下手册,如下所示: 我们先来用一个channel的标签来做实例,因为c ...

  4. 夺命雷公狗---DEDECMS----9dedecms单标签

    我们这一节课开始将dedecms的标签了,dedecms里面的标签分好多个的,我们先来看下他的标签长得啥样的先: 随便点击一个修改即可见到标签了: 这里面上面的大文本框里面有标签的用法下面有参数的说明 ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. GO语言练习：构建json 和 解析JSON 实例

    本文介绍如何使用Go语言自带的库把对象转换为JSON格式,并在channel中进行传输后,并把JSON格式的信息转换回对象. 1.Go语言的JSON 库 Go语言自带的JSON转换库为 encodin ...

  2. 李洪强iOS经典面试题130

    绘图与动画 CAAnimation的层级结构 CAPropertyAnimation是CAAnimation的子类,也是个抽象类,要想创建动画对象,应该使用它的两个子类:CABasicAnimatio ...

  3. 李洪强iOS经典面试题上

    李洪强iOS经典面试题上     1. 风格纠错题 修改完的代码: 修改方法有很多种,现给出一种做示例: // .h文件 // http://weibo.com/luohanchenyilong/ / ...

  4. zk FileUpload（文件上传）

    <button label="上传 Image" upload="true,maxsize=1073741824"> <attribute n ...

  5. html5学习小结，float练习。

    经过两天的H5学习之后,做了一下float属性的练习,要做出来的效果为: 下面为代码部分,所用到的知识不多,不过才现在刚开始,以后要学的东西还有很多,大家继续加油! <!DOCTYPE html ...

  6. lua库函数

    这些函数都是Lua编程语言的一部分, 点击这里了解更多. assert(value) - 检查一个值是否为非nil, 若不是则(如果在wow.exe打开调试命令)显示对话框以及输出错误调试信息 col ...

  7. 【HDU4578 Transformation】线段树

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4578 题意:有一个序列,有四种操作: 1:区间[l,r]内的数全部加c. 2:区间[l,r]内的数全部 ...

  8. oracle initialization or shutdown in progress问题解决步骤

        今天像往常一样打开电脑,启动plsql工具连接数据库,但是尽然连接不了,报了“oracle initialization or shutdown in progress”的提示信息,从操作系统 ...

  9. spring框架和junit框架结合使用案例

    package ltssh; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.be ...

  10. Spring的特点

    创始人:Rod Johson1.特点: a:方便解耦和,简化开发,提升性能 b:AOP面向切面的编程 c:声明式事务支持 d:方便程序的调式 e:方便集成各大优秀的框架 f:java源代码学习的典范 ...