接着聊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. django中关于静态文件的引入(这边是指边主要是jquery和bootstrap

    一.  创建文件夹 首先在项目的根目录中新建一个文件夹,这个文件夹的名称最好以static命名 二.   修改配置 在项目的settings文件中,拉倒最下面,可以看到 STATICFILES_DIR ...

  2. Tomcat常见问题

    1. tomcat主页 http://localhost:8080 打不开 设置环境变量JAVA_HOME,确认端口为8080,查看webapps\ROOT文件夹是否存在 2. 访问tomcat管理页 ...

  3. sql函数将1，2，3转换为表

    /****** Object: UserDefinedFunction [dbo].[splitstring_to_table] Script Date: 2017/7/11 9:35:58 **** ...

  4. Linux中的netstat命令详解

    功能说明 netstat是基于Netstat这个命令行工具的指令,它可以用来查询系统上的网络套接字连接情况,包括tcp,udp以及Unix套接字:另外它还能列出路由表,接口状态和多播成员等信息. 主要 ...

  5. 使用hive数据仓库中遇到的问题

    1. 原因:hive版本过高.我用的是3.1.1最高版本,所以报此错.

  6. TypeScript -- JavaScript的救赎

    TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向 ...

  7. Dev Express Report 学习总结（六）Dev Express Reports自定义Summary

    在我们使用DevExpress开发报表的过程中,对于页面中复杂的数据合计,我们可能会使用到自定义Summary.下面通过一个例子来进行说明: 首先,我建立了如上图所示的报表页面,其中的数据源来自cla ...

  8. python 获取当前时间及前一天时间

    import datetime from pandas.tseries.offsets import Day now_time =datetime.datetime.now()#获取当前时间 yes_ ...

  9. 019-MD5加密模板工具类

    1 MD5加密工具类 package ${enclosing_package}; import java.math.BigInteger; import java.security.MessageDi ...

  10. Qt 串口连接

    Qt 串口连接 使用 Qt 开发上位机程序时,经常需要用到串口,在 Qt 中访问串口比较简单,因为 Qt 已经提供了 QSerialPort 和 QSerialPortInfo 这两个类用于访问串口. ...