<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>菜鸟教程 React 实例</title>

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

<div id="example"></div>

<script type="text/babel">

function HelloMessage(props) {

    return <h1>Hello World!</h1>;

}

function HelloZzw(props){

    return <h1>zzw Hello World!! </h1>

}

const element = <HelloMessage />;

const elementZzw = <HelloZzw />;

ReactDOM.render(

    elementZzw,

    document.getElementById('example')

);

</script>

</body>

</html>

React篇章-React 组件的更多相关文章

  1. react篇章-React Props

    state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...

  2. react篇章-React State(状态)-将生命周期方法添加到类中

    将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...

  3. react篇章-React State(状态)-组件都是真正隔离的

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  4. react篇章-React 组件-复合组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  5. react篇章-React 组件-向组件传递参数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  6. react篇章-React 组件-ES6 class 来定义一个组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  7. react篇章-React Props-Props 验证

    React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库. <script src="https://cdn.bootcss.com/pr ...

  8. react篇章-React State(状态)-数据自顶向下流动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. react篇章-React State(状态)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

随机推荐

  1. DHCP及DHCP多作用域服务器工作原理

    一.DHCP服务是什么 DHCP称为动态主机配置协议.DHCP服务允许工作站连接到网络并且自动获取一个IP地址.配置DHCP服务的服务器可以为每一个网络客户提供一个IP地址.子网掩码.缺省网关.一个W ...

  2. poi对EXCEL的操作（一）

    (原创自己这段时间对poi的研究心得) 一.基础的对象 1.wookbook工作簿 创建工作簿 wookbook  XSSFWorkbook类的构造方法           XSSFWorkbook ...

  3. 关于变长数组的一点小想法-C语言定义数组但是数组长度不确定怎么办

    很多数据机构,比如栈,链表等,都可以动态分配存储空间 那么数组呢?一般声明时都要指定数组长度,那么数组可以实现动态分配么? 假设数组存的是int型 那么 你先申请10个元素 int* a = (int ...

  4. 当月第一天、最后一天、下月第一天，时间date

    时间记录,不是时间戳 $thismonth = date('m'); $thisyear = date('Y'); $startDay = $thisyear . '-' . $thismonth . ...

  5. Linux内核中的常用宏container_of其实很简单【转】

    转自:http://blog.csdn.net/npy_lp/article/details/7010752 开发平台:Ubuntu11.04 编 译器:gcc version 4.5.2 (Ubun ...

  6. Android 开发笔记（二）菜单设计

    菜单设计一 // 创建菜单 public boolean onCreateOptionsMenu(Menu menu) { menu.add(0, 0, 0, "关于"); men ...

  7. linux/centos定时任务cron

    https://www.cnblogs.com/p0st/p/9482167.html cron: crond进程 crontab修改命令 * * * * *  command parameter & ...

  8. MYSQL三种安装方式--rpm包安装

    1. 首先检查机器里是否已经存在MySQL $ rpm -qa | grep mysql 2. 去官网下载相应的rpm包:https://dev.mysql.com/downloads/mysql/ ...

  9. 出现ERROR: While executing gem ... (Gem::FilePermissionError)这种错误的解决办法

    重新安装ruby即可解决 brew install ruby

  10. ifconfig与内核通信 ifreq 结构体分析和使用

    结构原型: /* * Interface request structure used for socket * ioctl's.  All interface ioctl's must have p ...