初学React：定义一个组件
接着聊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：定义一个组件的更多相关文章
- 如何基于 React 封装一个组件
如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...
- WeChat-SmallProgram：如何定义一个组件
创建组件所需的文件: 1.在根目录创建 Componet 文件夹 2.再创建一个select文件夹 3.然后:右键这个文件夹,新建下面的这个 Component.然后输入需要创建的名称,我这里为了方便 ...
- React Native 一个组件styles BUG
'use strict'; var React = require('react-native'); var { StyleSheet, PanResponder, View, Text } = Re ...
- 初学React：组件的样式
React中组件的样式有三种: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 使用react定义组件的两种方式
react组件的两种方式:函数定义,类定义 在定义一个组件之前,首先要明白一点:react元素(jsx)是react组件的最基本的组成单位 组件要求: 1,为了和react元素进行区分,组件名字首必须 ...
- react：在一个组件中调用别的组件中的方法
先介绍一下要解决的问题:react中一个组件A和一个组件B,其中B是被connect(connect是redux中的方法)包装过的组件,包装成BContainer,A和BContainer的关系是兄弟 ...
- 什么是React中的组件
组件就是页面上的一部分.如图,左边是一个网页.右边是对应的一个组件图.我们可以把一个大的网页拆分成很多小的部分.比如标题部分,对应一个组件,就是标题组件.搜索部分,对应的组件就是搜索组件.而这个搜索组 ...
- React 错误边界组件
这是React16的内容,并不是最新的技术,但是用很少被讨论,直到通过文档发现其实也是很有用的一部分内容,还是总结一下- React中的未捕获的 JS 错误会导致整个应用的崩溃,和整个组件树的卸载.从 ...
- vue.2.0-自定义全局组件
App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> < ...
随机推荐
- HDU-Digital Roots(思维+大数字符串模拟)
The digital root of a positive integer is found by summing the digits of the integer. If the resulti ...
- Codeforces 852D
数目规模大,尝试转换为判定性问题,那么E就不影响到网络流的复杂度了 SPFA码歪了,WA了好几发气死了 #include<bits/stdc++.h> using namespace st ...
- 09-排序3 Insertion or Heap Sort （25 分）
According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...
- django文件配置
先是 staticfile 文件配制 STATTCFILE=(os.path.join(BASE_DIR,'static'),) 然后是数据库配置 : DATABASES = { 'default' ...
- Vue 中怎么发起请求（二）
fetch 是新一代XMLHttpRequest的一种替代方案.无需安装其他库.可以在浏览器中直接提供其提供的api轻松与后台进行数据交互. 基本用法: 1 fetch(url,{parmas}).t ...
- Vue.js-----轻量高效的MVVM框架（三、认识数据绑定）
插值 1.文本插值 (1)双向数据绑定 v-model="msg0101",一旦v-model中的数值发生变化,所有用vue表达式{{msg0101}}的数据都会更新. (2)单次 ...
- @Value("#{}")与@Value("${}")的区别
原文:https://blog.csdn.net/u012925172/article/details/84926064 @Value("#{}") SpEL表达式@Value ...
- APP测试总结2
一.App测试流程与web项目流程区别 1.对UI要求比较高,需要更加注重用户体验.对于一个小小的屏幕,如何让用户使用更加轻便.简介.易用. 2.App是调用服务端接口展示数据.我们测试需要可以判断问 ...
- leetcode 620. Not Boring Movies 用where语句判断
https://leetcode.com/problems/not-boring-movies/description/ 不管题目简不简单,现在先熟悉语法. 直接用where语句判断即可,判断奇偶可以 ...
- 数据库mysql--基础命令
客户端 一.登录和退出 1.登录 mysql -h server-ip -u usename -p 回车,然后会提示输入密码 2.退出:"quit;" | "exit;& ...