<!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. SpringCloud学习(2)——Rest微服务案例

    创建父工程: microservicecloud  创建公共模块api:microservicecloudapi SQL脚本: 此学习路线总共创建3个库, 分别为clouddb01, clouddb0 ...

  2. Visual Studio Code 如何编写运行 C、C++ 程序？

    0. 前言 VS Code 是微软发布一款跨平台的源代码编辑器,其拥有强大的功能和丰富的扩展,使之能适合编写许多语言. 本文面向初学者(但不是纯小白),分享一点我配置C/C++的经验. 本文所有内容均 ...

  3. HDU 2685 GCD推导

    求$(a^n-1,a^m-1) \mod k$,自己手推,或者直接引用结论$(a^n-1,a^m-1) \equiv a^{(n,m)}-1 \mod k$ /** @Date : 2017-09-2 ...

  4. Jeson老师写的nginx切割脚本

    #Jeson #Email:jeson@iaskjob.com #变量定义:access.error日志文件列表 NGINX_LOG=(imoocc_com_access iaskjob_com er ...

  5. 超越icon font

    很久以前,我们如何使用图标? 1.切图 2.拼合(Sprites) 原始社会啊! 后来CSSGagagrunt-css-sprite 字体图标 相见不曾相识 Emoji绘文字 iconfont.cn直 ...

  6. ELK 企业内部日志分析系统

    生产环境配置 亿级规模,建议64G内存+8核CPU ES JVM占用一半内存 生产环境的3节点的集群 https://blog.csdn.net/xuduorui/article/details/79 ...

  7. ASP.NET导入EXCEL方法汇总

    1.由dataset生成 public void CreateExcel(DataSet ds,string typeid,string FileName) { HttpResponse resp; ...

  8. Eclipse 断点调试

    Eclipse 开发专用的Debug模式,用于发现问题解决问题. 1. 设置断点,程序会在改位置停止. 2. 按F5(step into), F6(step over)执行.F5指跳入,逐语句.会进入 ...

  9. HDU 1172 猜数字 （模拟）

    题目链接 Problem Description 猜数字游戏是gameboy最喜欢的游戏之一.游戏的规则是这样的:计算机随机产生一个四位数,然后玩家猜这个四位数是什么.每猜一个数,计算机都会告诉玩家猜 ...

  10. Linux下命令lrzsz

    lrzsz是什么 在使用Linux的过程中,难免少不了需要上传下载文件,比如往服务器上传一些war包之类的,之前都是使用winSCP,lrzsz是一个更方便的命令,可以直接在Linux中输入命令,弹出 ...