<!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. Win7 32位安装Oracle11g R2 图解示例

    Win7 32位操作系统安装Oracle11g R2 图解示例.废话不说了,直接上图. 1.下载的两个oracle 11gR2压缩包解压到单独的文件夹中. 2.找到解压的database文件夹中的Se ...

  2. Dozer 对象的"搬运工"

    前言:项目中,经常会遇到各层对象之间相互进行值传递的过程,如在数据据持久层有一持久类EntityA,在视图层可能会变为ViewA,通常情况下,这两个类的属性 名称 .类型都是一致的,   在两个对象传 ...

  3. C11构造函数的改善

    1.委托构造函数 委托构造函数就是允许在同一个类中一个构造函数可以调用另一个构造函数,从而在初始化时简化变量的初始化. class CTest { public: int x; int y; int ...

  4. 浅谈卡特兰数(Catalan number)的原理和相关应用

    一.卡特兰数(Catalan number) 1.定义 组合数学中一个常出现在各种计数问题中出现的数列(用c表示).以比利时的数学家欧仁·查理·卡特兰的名字来命名: 2.计算公式 (1)递推公式 c[ ...

  5. NYOJ 35 表达式求值 （字符串处理）

    题目链接 描述 ACM队的mdd想做一个计算器,但是,他要做的不仅仅是一计算一个A+B的计算器,他想实现随便输入一个表达式都能求出它的值的计算器,现在请你帮助他来实现这个计算器吧. 比如输入:&quo ...

  6. vue去除地址栏上的'#'号

    const router = new VueRouter({ routes:[], mode :"history"//除去#号 }

  7. 23、Xpath

    1.什么是Xpath?1.XPath即为XMLPath的简称,它是一种用来确定XML文档中某部分位置的语言.2.HTML可以看做是XML的一种实现,所以selenium用户可以使用这种强大的语言在we ...

  8. c语言学习笔记.条件编译.#if，#ifdef，if的区别

    最近遇到了,以此做个记录. 条件编译 是C预处理部分的内容. 其判断语句包括 #if  #else if  #else 以及 #ifdef 和 #endif. 使用 #if (表达式) codes1. ...

  9. D - Frog and Portal （利用斐波那契数列的性质）

    题目链接:https://cn.vjudge.net/contest/270201#problem/D 具体思路:利用斐波那契数列的性质,斐波那契数列可以构成任何正整数,所以按照顺序减下去肯定能减到0 ...

  10. 项目记录 -- config2html 理解

    html 代码: <table width=1280 border=0 cellspacing=1 cellpadding=1> <tr id=tblhdr> <td&g ...