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

}

class Welcome extends React.Component {

  render() {

    return <h1>Hello World1 class</h1>;

  }

};

const element = <Welcome />;

ReactDOM.render(

    element,

    document.getElementById('example')

);

</script>

</body>

</html>

react篇章-React 组件-ES6 class 来定义一个组件的更多相关文章

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

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

  2. react篇章-React Props

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

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

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

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

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

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

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

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

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

  7. React篇章-React 组件

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

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

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

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

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

随机推荐

  1. 教你破解MyEclipse到2016年【图文详解】

    1.首先确定JDK以及环境变量没有问题.因为破解工具包里的run.bat是调用java命令执行jar包,如果环境变量没有配置好,那就运行不了了.2.解压破解包,双击[run.bat]打开破解界面: 3 ...

  2. Eclipse 重构功能的使用与重构快捷键

    重构是什么? 在代码写好之后改进它的设计. 重构分类:物理结构.类层次结构.类内部结构. 名称 快捷键 直译 作用范围 描述 Rename Alt + Shift + R     可以对任意变量.类. ...

  3. web启动@Autowired不能自动注入

    使用struts2,下面为action代码 Java代码 package com.edar.web.platform; import org.apache.struts2.convention.ann ...

  4. CF835 D DP

    所有所有阶回文串的个数.对于一个k阶回文串,定义为:它的左右两侧相同且是k-1阶回文串 显然高阶回文串由低阶构成,那么枚举长度,从左到右遍历,dp[l][r]代表从l到r串最大的阶数,cnt[i]记录 ...

  5. HDU6128 二次剩余/二次域求二次剩余解/LL快速乘法取模

    LINK 题意:求满足模p下$\frac{1}{a_i+a_j}\equiv\frac{1}{a_i}+\frac{1}{a_j}$的对数,其中$n,p(1\leq n\leq10^5,2\leq p ...

  6. 2015/9/28 Python基础(19)：类的定制和私有性

    用特殊方法定制类前面我们讲了方法的两个重要方面:首先,方法必须在调用前被绑定(到它们相应类的某个实例中):其次,有两个特殊方法可以分别作为构造器和解构器的功能,分别名为__init__()和__del ...

  7. Stat1—浅谈协方差矩阵

    今天看论文的时候又看到了协方差矩阵这个破东西,以前看模式分类的时候就特困扰,没想到现在还是搞不清楚,索性开始查协方差矩阵的资料,恶补之后决定马上记录下来,嘿嘿~本文我将用自认为循序渐进的方式谈谈协方差 ...

  8. 【BZOJ】4756: [Usaco2017 Jan]Promotion Counting

    [题意]带点权树,统计每个结点子树内点权比它大的结点数. [算法]线段树合并 [题解]对每个点建权值线段树(动态开点),DFS中将自身和儿子线段树合并后统计. 注意三个量tot,cnt,tots,细心 ...

  9. 【CodeForces】827 D. Best Edge Weight 最小生成树+倍增LCA+并查集

    [题目]D. Best Edge Weight [题意]给定n个点m条边的带边权无向连通图,对每条边求最大边权,满足其他边权不变的前提下图的任意最小生成树都经过它.n,m<=2*10^5,1&l ...

  10. 环境变量配错了 command not found

    一般就是忘记在PATH 前面加$ 1.可以用whereis或者which命令查看一下有没有这个命令 具体执行which lswhereis ls 2.系统环境变量导致的问题解决方案: exportPA ...