<!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. PHP与Ajax

    如何用PHP接收JSON格式数据 1.一般来说,我们直接用$_POST $_REQUEST $_GET这样的超全局变量接收就好了 <?php $obj_temp=$_POST['data']; ...

  2. bzoj 2213: [Poi2011]Difference

    Description A word consisting of lower-case letters of the English alphabet ('a'-'z') is given. We w ...

  3. How to read source code[repost]

    https://github.com/benjycui/benjycui.github.io/blob/master/posts/how-to-read-open-source-javascript- ...

  4. matlab求逆运算：左除( \ )和右除( / )，inv，pinv

    矩阵求逆可以使用左除(\)和右除(/),inv,pinv 首先了解需要求逆的矩阵A是否为奇异方阵 inv 若A为非奇异方阵,则存在逆矩阵,可利用inv求逆: inv(A) pinv 若需要求逆的矩阵A ...

  5. TinyOS在ubuntu 14.04下安装教程

    1:打开/etc/apt/sources.list 文件,在文件最底部添加安装源: deb http://tinyos.stanford.edu/tinyos/dists/ubuntu lucid m ...

  6. pytesser模块WindowsError错误解决方法

    在使用pytesser做图片文字识别时遇到 WindowsError: [Error 2] 错误,报错内容如下: Traceback (most recent call last): File &qu ...

  7. git@oschina.net源代码管理使用日记【转】

    转自:https://www.cnblogs.com/Juvy/p/3556902.html git的优势: 1 可以创建分支: 2 版本控制是基于每一次提交的,而不需要考虑每次提交了多少个文件. 下 ...

  8. 64_p5

    php-nette-bootstrap-2.4.3-1.fc26.noarch.rpm 20-Feb-2017 07:19 16290 php-nette-caching-2.5.3-1.fc26.n ...

  9. ios 不支持iframe 解决方案

    在iframe外层在包一层,通过appendChild()把内容增加到容器中,完整代码如下: @section Css { <link href="@ViewHelper.Conten ...

  10. 《深入理解Java虚拟机》笔记--第十三章、线程安全与锁优化

    先保证并发的正确性,然后在此基础上来实现高效. 线程安全:     当多个线程访问一个对象时,如果不考虑这些线程在运行时环境下的调度和交替执行,也不需要进行额外的同步,或者在调用方进行任何其他的协调操 ...