<!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. 复制自身程序到windows目录和system32目录下

    功能:复制自身到windows目录和system32目录下. 参考代码: #include <stdio.h> #include <windows.h> void CopySe ...

  2. Python学习笔记（四十八）POP3收取邮件

    收取邮件就是编写一个MUA作为客户端,从MDA把邮件获取到用户的电脑或者手机上.收取邮件最常用的协议是POP协议,目前版本号是3,俗称POP3. Python内置一个poplib模块,实现了POP3协 ...

  3. CSS居中之美

    关于居中,你会想到什么? div{margin: auto;} 常见的居中方法 水平居中 .demo{ text-align: center; margin: auto; position: abso ...

  4. wampserver 虚拟主机

    转载:http://blog.csdn.net/knight_quan/article/details/51830683 1.背景: 在进行网站开发的时候,通常需要以http://localhost或 ...

  5. maven使用过程中遇到的问题总汇

    1:web.xml is missing and <failOnMissingWebXml> is set to true 造成原因: 使用maven创建项目时有时在pom.xml的war ...

  6. Vmware安装ubuntu详细教程

    1.环境准备: (1) 范例系统为WIN10 64位家庭普通版,已正确安装虚拟机VMware Workstation 12 Pro.(2) 下载Ubuntu系统. 2.安装过程: 2.1 VMware ...

  7. 浅析linux内核中timer定时器的生成和sofirq软中断调用流程(转自http://blog.chinaunix.net/uid-20564848-id-73480.html)

    浅析linux内核中timer定时器的生成和sofirq软中断调用流程 mod_timer添加的定时器timer在内核的软中断中发生调用,__run_timers会spin_lock_irq(& ...

  8. Machine Learning系列--EM算法理解与推导

    EM算法,全称Expectation Maximization Algorithm,译作最大期望化算法或期望最大算法,是机器学习十大算法之一,吴军博士在<数学之美>书中称其为“上帝视角”算 ...

  9. cordova 从xcode7迁移到xcode8

    环境以开发流程 当前项目使用的cordova环境 cordova 6.1.1 cordova-ios 3.9.2(vs15自动装的不知道在哪能改,所以考虑升级到vs17,能够手动指定) cordova ...

  10. sendEmail实现邮件报警

    安装 wget http://caspian.dotconf.net/menu/Software/SendEmail/sendEmail-v1.56.tar.gz 或者点击下载 tar -xf sen ...