初学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> < ...
随机推荐
- 前端基础------jquer y学习
一. jquery是什么 快速,简洁,轻量级的JavaScript库(JavaScript框架)使用户可以快速的操作HTML document,实现动画效果,并方便的地为网站提供AJAX交互.文档全面 ...
- Go语言基础之15--文件基本操作
一.文件读写 1.1 os.File os.File封装所有文件相关操作, 是一个自定义的struct. a. 打开一个文件进行读操作: os.Open(name string) (*File, er ...
- LeeCode(No3 - Longest Substring Without Repeating Characters)
题目: Given a string, find the length of the longest substring without repeating characters. 示例: Given ...
- mybatis mapper问题列表
id出现两次 2018-11-14 16:15:03.833 DEBUG 41432 --- [ main] c.a.i.o.d.mapper.DatvMapper.insert ...
- No bean named 'xxxxxxx' available--springboot 上线打war包
springboot项目发布上线后,报错:No bean named 'xxxxxxx' available 因为我开发时pom用的jar,但上线发布war.解决方法: 1.pom.xml <p ...
- js随机生成[n,m)的数字(不包括m)
Math.random();//随机生成0到1的数字 Math.floor();//取小整 Math.floor(Math.random()*(最大值 - 最小值) + 最小值) 生成2到8的数:Ma ...
- Git钩子设置自动构建Jenkins
打开Git仓库,找到对应的项目,点击“仓库设置”,左侧点击“管理Git钩子”,如下图所示: 因为是push之后触发自动构建的,选择“post-receive”进行编辑 #!/bin/bash #提取分 ...
- SQL SERVER数据库 三种 恢复模式
SQL SERVER 2005 以后三种恢复模式: 简单(Sample),完全(Full),大批量(Bulk_Logged) 完全备份模型 完全备份模式是指在出现数据文件毁坏时丢失数据的风险最小.如果 ...
- my.宠物价格_资料
1.梦幻西游手游宠物估价五大实用技巧_72G梦幻西游手游专区.html http://www.72g.com/game/mhxysy/88470.html 梦幻西游手游宠物估价五大实用技巧 作者:升仙 ...
- windows系统打开火狐浏览器提示“无法加载你的firefox配置文件”
win7系统自带IE浏览器,还是有部分用户使用不习惯,选择下载第三方浏览器,比如:火狐.谷歌.360浏览器等.最近有Win7系统用户在重新安装火狐浏览器后发现打不开,并提示“无法加载你的firefox ...