<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>

    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

</head>

<body>

<div id="react3"></div>

<script type="text/babel">

    var Hello=React.createClass({      //组件Hello首字母要大写，组件里面必须有render方法，用于输出组件。另外组件类Hello只能包含一个顶层标签

        render:function(){

            return <h1>{this.props.name}</h1>;    //组件的属性可以在组件类的 this.props 对象上获取

        },

    });

    ReactDOM.render(

        <Hello name="llm"/>,

        document.getElementById("react3")

    );

</script>

<!--添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。-->

</body>

</html>

Demo4的更多相关文章

  1. 日程管理Demo4中的bug

    Demo4的github地址 模拟器有点慢之后贴图 https://git.oschina.net/annie_guo/study.git 在登陆注册界面中java的提示语言(Login.java) ...

  2. WPF Demo4

    <Window x:Class="Demo4.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/ ...

  3. Demo4 Slides.js的使用

    Slides.js挺好用的啊,把示例中的Demo调试通了.首先把css.img.js文件夹下的内容全部拷贝到Vs网站项目下的Scripts文件夹下. 代码主要修改了一些图片路径和网址链接. <! ...

  4. Ember.js demo4

    <!DOCTYPE html> <html> <head> <meta name="description" content=" ...

  5. AngularJs练习Demo4

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  6. 23 服务音乐的启动Demo4

    注意如果音乐服务和Activity在一个应用中那么将不会因为绑定的Activity销毁而关闭音乐 MainActivity.java package com.qf.day23_service_demo ...

  7. 20 ViewPager Demo4自动轮播

    MainActivity.java 思想:才用非常大的数 让其看起来可以循环轮播图片并且用户可以从尽头滑到首图的特点 . package com.qf.day20_viewpager_demo4; i ...

  8. 流程设计器jQuery + svg/vml(Demo4 - 画连线)

    流程结点可以添加了之后,接下来到画结点与结点之间的连线,效果图如下 很眼馋visio的连线可以折来折去,这里实现的连线比较简单. 首先是把连线的类型分为Z(折线).N(折线)及I(直线)3种类型,然后 ...

  9. [高并发]Java高并发编程系列开山篇--线程实现

    Java是最早开始有并发的语言之一,再过去传统多任务的模式下,人们发现很难解决一些更为复杂的问题,这个时候我们就有了并发. 引用 多线程比多任务更加有挑战.多线程是在同一个程序内部并行执行,因此会对相 ...

随机推荐

  1. 如何在mac OS X中查看Emoji表情的含义

    使用ctrl+空格,在搜索框中搜索 TextEdit程序,其实中文是 文本编辑 程序, 运行,在菜单中选择 编辑->特殊字符 然后可以看到每个图标的说明啦

  2. Android的RadioButton和checkBox的用法-android学习之旅（十九）

    RadioButton和checkBox简介 单选按钮(RadioButton)和复选框(CheckBox)都继承了Button,因此属性的设置和Button差不多,只是加了一个android:che ...

  3. Win 10 下 android studio显示 Intel haxm无法安装，以及VT-X和hyper-x的冲突问题

               我 的电脑是神舟战神k650c i7 D4,处理器是Intel core i7 4710-MQ,系统是win 10的 我心血来潮想学习一下安卓开发,就首先安装了android s ...

  4. 远程调试Eclipse插件的设置

    1. 被调试方建立一个命令行来运行Eclipse debugEclipse.cmd: eclipse.exe -nl zh_CN -vmargs -XX:+HeapDumpOnOutOfMemoryE ...

  5. iOS开发之四：常用控件--UIButton的使用

    在介绍UIButton的用法前,要先了解一下它的父类UIControl,UIControl是所有具有事件处理功能控件的父类. 而该类控件一般响应事件又有三种形式:基于触摸.基础值.基础编辑.控件的层次 ...

  6. 轻松学习Asp.net中的控件

    C/S 结构,即大家熟知的客户机和服务器结构.它是软件系统体系结构,通过它可以充分利用两端硬件环境的优势,将任务合理分配到Client端和Server端来实现,降低了系统的通讯开销.目前大多数应用软件 ...

  7. java7 新特性 总结版

    Java7语法新特性: 前言,这是大部分的特性,但还有一些没有写进去,比如多核 并行计算的支持加强 fork join 框架:这方面并没有真正写过和了解.也就不写进来了. 1. switch中增加对S ...

  8. Intent的Data和Type和Flag属性-amdroid学习之旅（五十一）

    Data属性介绍 使用Data和Action属性启动系统Activity 代码示例 public class MainActivity extends Activity{ @Override prot ...

  9. svn 回退/更新/取消至某个版本命令详解

    1. 取消Add/Delete 取消文件 svn revert 文件名 取消目录 svn revert --depth=infinity 目录名 2. 回退版本 方法1: 用svn merge 1) ...

  10. STL：字符串用法详解

    字符串是程序设计中最复杂的变成内容之一.STL string类提供了强大的功能,使得许多繁琐的编程内容用简单的语句就可完成.string字符串类减少了C语言编程中三种最常见且最具破坏性的错误:超越数组 ...