接着聊React,今天说说如何创建一个组件类。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React工程模板</title> <!-- react.js 是React的核心库 -->
<script src="./build/react.js charset="utf-8"></script>
<!-- react-dom.js是作用是提供与DOM相关的功能 -->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- browser.min.js 的作用是将JSCX语法转换成Javascript的语法 -->
<script src="./build/browser.min.js" charset="utf-8"></script>
<!-- 还可以直接通过网址引入browser.min.js文件 -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> --> </head>
<body>
<!-- React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
<div id="container"> </div> <!-- 在React开发中,使用JSX,跟Javascript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- babel是一个转换编译器,把ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel"> <!-- 在此处编写React代码 --> <!--
创建过一个组件类,用于输出Hello React 方法:
1、React中创建的组件类一大写字母开头,采用驼峰命名法
2、在React中使用React.creacteClass方法创建一个组件类
3、核心代码:每个组件类都必须实现自己的render方法,输出定义好的组件模板。
返回值:null、false或 组件模板
4、注意:组件类只能包含一个顶层标签 -->
var HelloMessage = React.creactClass({
render: function() {
return <h1>Hello, React!</h1>
}
}); ReactDOM.render(
<!-- 在模板中插入 <HelloMessage /> 会生成一个实例-->
<HelloMessage />,
    <!-- 获取将要插入的DOM,就是之前index.js中的<div id=“container” > -->
document.getElementById("container")
); </script> </body>
</html>

  

初学React:定义一个组件的更多相关文章

  1. 如何基于 React 封装一个组件

    如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...

  2. WeChat-SmallProgram:如何定义一个组件

    创建组件所需的文件: 1.在根目录创建 Componet 文件夹 2.再创建一个select文件夹 3.然后:右键这个文件夹,新建下面的这个 Component.然后输入需要创建的名称,我这里为了方便 ...

  3. React Native 一个组件styles BUG

    'use strict'; var React = require('react-native'); var { StyleSheet, PanResponder, View, Text } = Re ...

  4. 初学React:组件的样式

    React中组件的样式有三种: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  5. 使用react定义组件的两种方式

    react组件的两种方式:函数定义,类定义 在定义一个组件之前,首先要明白一点:react元素(jsx)是react组件的最基本的组成单位 组件要求: 1,为了和react元素进行区分,组件名字首必须 ...

  6. react:在一个组件中调用别的组件中的方法

    先介绍一下要解决的问题:react中一个组件A和一个组件B,其中B是被connect(connect是redux中的方法)包装过的组件,包装成BContainer,A和BContainer的关系是兄弟 ...

  7. 什么是React中的组件

    组件就是页面上的一部分.如图,左边是一个网页.右边是对应的一个组件图.我们可以把一个大的网页拆分成很多小的部分.比如标题部分,对应一个组件,就是标题组件.搜索部分,对应的组件就是搜索组件.而这个搜索组 ...

  8. React 错误边界组件

    这是React16的内容,并不是最新的技术,但是用很少被讨论,直到通过文档发现其实也是很有用的一部分内容,还是总结一下- React中的未捕获的 JS 错误会导致整个应用的崩溃,和整个组件树的卸载.从 ...

  9. vue.2.0-自定义全局组件

    App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> < ...

随机推荐

  1. P1147 连续自然数和(思维题)

    题目描述 对一个给定的自然数MM,求出所有的连续的自然数段,这些连续的自然数段中的全部数之和为MM. 例子:1998+1999+2000+2001+2002 = 100001998+1999+2000 ...

  2. CF653D

    题目唯一的坎就是把绝对的权值变为相对的权值,保证cap和flow是整型的同时可以用最小的1表示一只熊 可是迷的地方在于用kuangbin的板子居然能找出比答案更大的流(Wrong Answer on ...

  3. PHP常用设计模式汇总

    装饰模式: <?php abstract class Tile { abstract function getWealthFactor(); } class Plains extends Til ...

  4. Android RecyView 滑动置指定位置

    1,直接回到顶部 recyview.getLinearLayoutManager().scrollToPositionWithOffset(0, 0); 2,慢慢的回到顶部 private void ...

  5. js最后深入总结

    js常用事件: click  #点击事件 hover #鼠标漂浮事件,,鼠标移到上面就触发事件 blur  #失去焦点就触发事件,多用于文本框操作 focus  #获得焦点就触发事件, change ...

  6. TreeMap读源码总结

    红黑树: 定义 A red–black tree is a kind of self-balancing binary search tree in computer science. Each no ...

  7. WAF攻防实战

    摘要 本文主要分为四个部分,一.首先对WAF做了简单的介绍,让读者对WAF这类产品有一个大概的了解:二.这部分通过一个实例演示了如何利用WAF为其后端的Web应用提供安全防护功能:三.安全是相对的,世 ...

  8. Java字符容量capacity()方法

    Java字符容量计算:比如StringBuffer sb=new StringBuffer("Good");输出 .

  9. spring 通过beanDefinition注册自定义规则的bean

    目的: 扫描某个自定义注解标注的类, 或者自定义xml 为这些类生成spring Bean 基本原理:org.springframework.beans.factory.support.Default ...

  10. jgroups-raft

    要求 Java 8 支持 实现服务器的动态添加和删除 文档的编写 基于复制计数器的共识算法实现 https://github.com/belaban/jgroups-raft