<!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. poi对excel的操作（二）

    二.进阶的对象 1.CellType 枚举类 单元格类型 CellType.STRING---文本型 等 如何是指单元格类型:cell.setCellType(CellType.STRING) 2.C ...

  2. 解决VSCode终端中文乱码问题

    VSCode终端其实调用的是cmd.exe,所以当这里出现中文乱码的时候要解决的是cmd的编码设置问题. 可以通过chcp命令查看cmd的编码设置,GBK2312的代码页编号是936,然后改成utf- ...

  3. SpringCloud（二）注册服务提供者搭建

    上文已经写了如何去搭建注册中心,仅有注册中心是远远不够的,所以我们需要注册到注册中心并提供服务的节点,这里称为注册服务提供者 前提 阅读上文,并成功搭建注册中心,环境无需改变 项目搭建 这里我们需要新 ...

  4. 使用 pjax 载入的新页面，新页面上 类方法 无法被触发？

    在父页面上有定义类似 $(".class").click(function(){ ... }) 经过pjax 载入后的新页面 点击后没有触发事件 在segmentfault 上提问 ...

  5. 【译】msfvenom

    原文链接:MSFvenom 1.使用MSFvenom命令行界面 msfvenom是Msfpayload和Msfencode的组合,将这两个工具集成在一个框架实例中. msfvenom的优点是: 一个单 ...

  6. favico.js笔记

    1. favicon.js是什么 一个js库可以使用徽标.图像.视频等来设置网页的favicon,即网页标题栏上的小图标. 2. 如何使用 2.1 使用徽标 basic demo: <!DOCT ...

  7. 利用Addon Domain和A记录使两个域名同时指向同一个网站

    今天碰到这样的需求:已有网站A.com, 以及新注册的域名B.net, 现需要将B.net指向与A.com相同的内容. 这里提出的方法是在空间后台添加Addon domain, 以及在域名B.net后 ...

  8. Unity 添加鼠标右键事件

    把此类放到 Editor下使用就OK using UnityEngine; using System.Collections; using System.Collections.Generic; us ...

  9. 零基础讲解JavaScript函数

    一 JavaScript函数1 什么是函数  函数是一组代码(指令)的集合,通常用来完成某个单一的功能.(书的目录和章节,电视剧剧集的名称等)2 为什么要使用函数  2.1 把复杂程序划分成不同的功能 ...

  10. git push multiple repo

    git remote add xxx https://git.github.com