<!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. Mongodb 备份 还原 导出 导入 等批量操作

    mongodb数据备份和还原主要分为二种,一种是针对于库的mongodump和mongorestore,一种是针对库中表的mongoexport和mongoimport. 一,mongodump备份数 ...

  2. 扫描线（线段树）+贪心 ZOJ 3953

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5572 Intervals Time Limit: 1 Second       ...

  3. [Luogu 2024] 食物链

    [Luogu 2024] 食物链 几句随感 我依稀记得联赛前本来想做这题的时候. 当年啊弱到题目与标签就令我望而生畏. 还有翻阅很多遍那现在已经被遗弃的博客. 看到题解中「三倍数组」的字眼就怕难而放弃 ...

  4. C++ 的getline问题

    在用c++的getline函数的时候碰到两个问题,总结如下: 1.有时候写程序的时候我们会发现getline(cin,str);这样的语句是不会执行,而是直接跳过的, 一般的解决方法是getline一 ...

  5. StringUtils.htmlEncode()--html标签过滤方法实现

    package org.guyezhai.utils; import java.text.CharacterIterator; import java.text.StringCharacterIter ...

  6. MongoDB - MongoDB CRUD Operations, Query Documents, Query for Null or Missing Fields

    Different query operators in MongoDB treat null values differently. The examples on this page use th ...

  7. IIS 网站日志分析

    最近由于ADSL代理总出问题,导致爬虫服务器总被目标网站封,由于请求内容总是空,前端APP获取不到想要的内容就一直刷新,导致爬虫服务器请求更加繁忙. 爬虫服务器每执行完一个流程,都会给统计服务器Pos ...

  8. 【HDU】6110 路径交(2017百度之星) 线段树+RMQ-LCA+树链的交

    [题目]2017"百度之星"程序设计大赛 - 初赛(A) [题意]给定n个点的带边权树,m条编号1~m的路径,Q次询问编号区间[L,R]所有链的交集的长度.n<=500000 ...

  9. 在Unity中实现屏幕空间反射Screen Space Reflection（2）

    traceRay函数 在上一篇中,我们有如下签名的traceRay函数 bool traceRay(float3 start, float3 direction, out float2 hitPixe ...

  10. 关于linux的一些基础知识

    一.基础 1.linux所有内容以文件形式保存,包括硬件. 2.linux 不区分扩展名,靠权限区分.   #但是,约定 .sh脚本文件  .conf配置文件. 3.-rw-r--r--        ...