<!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. Scala类与对象

    类简介 简介 类是对象的蓝图.一旦你定义了类,就可以用关键字new根据类的蓝图创建对象.在类的定义里,可以放置字段和方法,这些被笼统地称为成员.对于字段,不管是val还是var定义的,都是指向对象的变 ...

  2. timeStamp（时间戳） 事件属性

    Event 对象 定义和用法 timeStamp 事件属性可返回一个时间戳.指示发生事件的日期和时间(从 epoch 开始的毫秒数). epoch 是一个事件参考点.在这里,它是客户机启动的时间. 并 ...

  3. Oracle下PLSQL连接没有数据库的问题

    https://blog.csdn.net/master_yao/article/details/51055850 参考博文地址 当PLSQL连接提示时请注意 请将首选项里内容进行修改 指定oci.d ...

  4. Toast--报错

    Toast的makeText()方法报错帖上一代码,用Toast来简单处理回调机制.但是Toast的makeText()方法老报错:import android.content.Context;imp ...

  5. TextView-- 测量文字宽度

    https://my.oschina.net/lengwei/blog/637380; http://blog.csdn.net/mare_blue/article/details/51388403; ...

  6. crm 2016 tabstatechange event

    1 tabstatechange事件在窗体中定义 2 问题是如果选项卡默认为折叠的.且选项卡中包含了iFrame网页. 3 在网页内容加载完成之后,点击选项卡 折叠/展开 按钮, iFrame网页没有 ...

  7. unity3d 通过代码建立曲面

    using UnityEngine;using System;using System.Collections.Generic; using System.Collections;using Syst ...

  8. [深度分析] Python Web 开发框架 Bottle

    [深度分析] Python Web 开发框架 Bottle(这个真的他妈的经典!!!) 作者:lhf2009913 Bottle 是一个非常精致的WSGI框架,它提供了 Python Web开发中需要 ...

  9. package.json-nodeJs

    package.json文件描述了一个NPM包的所有相关信息,包括作者.简介.包依赖.构建等信息.格式必须是严格的JSON格式. 通常我们在创建一个NPM程序时,可以使用npm init命令,通过交互 ...

  10. IOS 7层协议

    ios七层 (1)物理层——Physical 这是整个OSI参考模型的最低层,它的任务就是提供网络的物理连接.所以,物理层是建立在物理介质上(而不是逻辑上的协议和会话),它提供的是机械和电气接口.主要 ...