06——react组件的基本定义和使用

时间：2021-07-20 06:50:39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_componment_basic</title>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    //一、.定义组件
    //方式1:工厂函数组件(简单组件)
    function MyComponent() {
        return <h2>工厂函数组件(简单组件)</h2>
    }

    //方式2:es6类组件(复杂组件)(通过创建MyComponent2的实例调用render方法)
    class MyComponent2 extends React.Component {
        render() {
            return <h2>es6类组件(复杂组件)</h2>
        }
    }

    //二、渲染组件标签
    ReactDOM.render(<MyComponent/>, document.getElementById('example1'));
    ReactDOM.render(<MyComponent2/>, document.getElementById('example2'));
</script>
</body>
</html>

06——react组件的基本定义和使用的更多相关文章

  1. React组件略讲

    React是前端组件化开发的开山鼻祖,这种开发方式彻底解决了的前端组件复用的痛点.今天,就来研究一下React组件开发. 前端同学一般都会从Vue入门,因为Vue使用的<template> ...

  2. React 组件性能优化探索实践

    转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...

  3. webpack 打包一个简单react组件

    安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...

  4. React组件属性部类（propTypes）校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  5. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  6. React组件

    React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...

  7. react组件什么周期记录，转的

    react 的核心除了虚拟DOM,我想还有一个很重要的就是生命周期函数,理解生命周期函数,对写出合理的commponet很有帮助.下面总结一下我对生命周期函数的一些理解已经在项目过程中遇到的一些问题. ...

  8. 总结 React 组件的三种写法 及最佳实践 &lbrack;涨经验&rsqb;

    React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普 ...

  9. 深入React组件生命周期

    上篇博文使用React开发的一些注意要点对React开发的一些重点进行了简单的罗列总结,虽然也提到了React生命周期,但只略微小结,在此单独写篇React生命周期的总结. 在组件的整个生命周期中,随 ...

随机推荐

  1. 一些Asp&period;Net面试题答案

    工作时间长了总是用同样的一些东西  其他的有些生疏  闲来看看面试题练习一下:  题目出处嘛...aspnet-tests-for-juniors 转载请注明来源:http://www.cnblogs ...

  2. iOS中类方法的作用

    类方法,这意味着你将它发送给类,而不是对象实例. 因为不是发送给一个实例,所以你不能使用任何实例变量,你只能做一些通用性的事情. 实际上类方法只用于两种情况: 1.创建事物,比如创建一个特殊格式的字符 ...

  3. JAVA如何解析多层json数据

    1. 使用标准的Json对象,如org.json.JSONObject json = new org.json.JSONObject(yourJsonString);然后通过get(keyString ...

  4. &period;Net下的进程间的通讯 -- Windows消息队列

    Windows 消息队列(MSMQ),是微软Windows2000以上的操作系统的一个服务,可以提供在计算机间消息的可靠传输,用来在两个进程间进行异步通讯最合适不过了.在.Net中有一个Message ...

  5. yii cgridview 默认的筛选如何做成选择框

    效果图 参照 http://www.yiiframework.com/doc/api/1.1/CGridColumn http://www.yiiframework.com/doc/api/1.1/C ...

  6. work staff

    培训一周,很抓狂.不是抓狂培训本身,是自己听不懂,培训还是有用的. 上周四接到一个task,关于checklist.因为组里没有人用过,所以遇到一些问题,本来不应该是一个复杂的工作,但是我需要一个一个 ...

  7. Python 作用域&comma; 局部与全局变量

    全局与局部变量 在子程序(函数)中定义的变量称为局部变量, 在程序的一开始定义的变量称为全局变量 全局变量作用于整个程序, 局部变量作用域是定义该变量的子程序 当全局变量与局部变量重名时: 在定义局部 ...

  8. Python取整函数

    ceil() 向上取整 返回数字的上入整数,如ceil(4.1) 返回 5 ceil()接受的参数必须是数字类型,可以是True或者False,True(代表1),False(代表0),我试了ceil ...

  9. corda

    账本:corda 从每个节点的视角看待账本都是不一样的.并不是所有节点有所有账本信息的.valut视为SQL数据库,只保存 两两节点之间的数据库 状态:状态是不变的对象,代表共享的事实,比如特定时间的 ...

  10. 开源的zip&lowbar;unzip库

    zip/unzip源码交叉编译 http://blog.chinaunix.net/uid-20288609-id-10016.html zlib 1.2.11 http://www.zlib.net ...

相关文章