<!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. HTML不常用的表单属性-fieldset

    这是代码 这是生成的样子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  2. 还不会做！ 树上的gcd 树分治 UOJ33

    题目链接:http://uoj.ac/problem/33 题解链接:http://vfleaking.blog.uoj.ac/blog/38 现在感觉到了做OI的层层递进的思路的伟大之处,作为一个大 ...

  3. web开发之Servlet 二

    在上一篇文章中,我们演示也证明了Servlet 是一种动态web资源开发的技术,即我可以在浏览器中输入URL,然后就可以在浏览器中看到我们编写的Servlet资源. 那当我们在浏览器上一起一个HTTP ...

  4. Logitech K810 + Ubuntu

    The Logitech K810 is a nice keyboard, but it does not work with Ubuntu out of the box. Still contrar ...

  5. Web 开发者不可不知的15条编码原则

    HTML 已经走过了近20的发展历程.从HTML4到XHTML,再到最近十分火热的HTML5,它几乎见证了整个互联网的发展.但是,即便到现在,有很多基础的概念和原则依然需要开发者高度注意.下面,向大家 ...

  6. Kali设置代理

    原文:Kali-linux设置ProxyChains ProxyChains是Linux和其他Unices下的代理工具.它可以使任何程序通过代理上网,允许TCP和DNS通过代理隧道,支持HTTP.SO ...

  7. 天梯赛L2-008 最长对称子串 （字符串处理）

    对给定的字符串,本题要求你输出最长对称子串的长度.例如,给定"Is PAT&TAP symmetric?",最长对称子串为"s PAT&TAP s&quo ...

  8. localStorage H5本地存储

    域内安全.永久保存.即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存,但客户端或浏览器之间的数据相互独立. <!doctype html&g ...

  9. 消息队列ActiveMQ的使用详解

    通过上一篇文章 <消息队列深入解析>,我们已经消息队列是什么.使用消息队列的好处以及常见消息队列的简单介绍. 这一篇文章,主要带大家详细了解一下消息队列ActiveMQ的使用. 学习消息队 ...

  10. SVMtrain的参数c和g的优化

    SVMtrain的参数c和g的优化 在svm训练过程中,需要对惩罚参数c和核函数的参数g进行优化,选取最好的参数 知道测试集标签的情况下 是让两个参数c和g在某一范围内取离散值,然后,取测试集分类准确 ...