<!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 组件的三种写法 及最佳实践 [涨经验]

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

  9. 深入React组件生命周期

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

随机推荐

  1. [转][CentOS]修改IP后立即生效

    来自:http://bbs.51cto.com/thread-789908-1.html Linux系统里修改IP地址后该如何使之即刻生效,有两种方法可以解决: (1) sudo ifdown eth ...

  2. 廖雪峰Java2面向对象编程-5包和classpath-4classpath和jar

    1.classpath 1.1classpath定义 classpath是一个环境变量 classpath指示JVM如何搜索class classpath设置的搜索路径与操作系统相关 * window ...

  3. 在 Element-UI 的 Table 组件上添加列拖拽效果

    Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...

  4. DevExpress GridView删除行

    int[] rows = gridView1.GetSelectedRows(); ) { if (DialogHelper.YesNo(this, "确认删除该记录?", &qu ...

  5. andriod InputType.TYPE_NUMBER_FLAG_DECIMAL只能输入数字和小数点无效问题

    在java文件里edittext设置InputType.TYPE_NUMBER_FLAG_DECIMAL, 输入法能输入的是文本输入方式(数字.字母.符号等),和想要只能输入数字和小数点背道而驰. 在 ...

  6. 将.ipynb文件导入到另外的文件中

    在定义函数或者类的.ipyter文件的末尾加上 try: !jupyter nbconvert --to python ppp.ipynb #ppp是文件的名称 except: pass 在需要导入到 ...

  7. sklearn获得某个参数的不同取值在训练集和测试集上的表现的曲线刻画

    from sklearn.svm import SVC from sklearn.datasets import make_classification import numpy as np X,y ...

  8. 使用LVS实现负载均衡原理及安装配置详解（转）

    负载均衡集群是 load balance 集群的简写,翻译成中文就是负载均衡集群.常用的负载均衡开源软件有nginx.lvs.haproxy,商业的硬件负载均衡设备F5.Netscale.这里主要是学 ...

  9. GIT命令行笔记

    一次常规的初始化+推送: git initgit config user.email "you@example.com"git config user.name "asm ...

  10. 电商系统架构总结3（webapi授权机制）

    三 Web API 授权方式 web api的客户端,包括 android,ios,h5,自然对访问权限要加上授权机制.对于h5,要求把h5站点和web api部署在同一个域名下,然后对web api ...