初学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>

  

时间: 2024-10-14 00:16:01

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

React Native 一个组件styles BUG

'use strict'; var React = require('react-native'); var { StyleSheet, PanResponder, View, Text } = React; var CIRCLE_SIZE = 40; var PanResponderExample = React.createClass({ componentWillMount: function() { this._panResponder = PanResponder.create({ o

初学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&qu

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

先介绍一下要解决的问题:react中一个组件A和一个组件B,其中B是被connect(connect是redux中的方法)包装过的组件,包装成BContainer,A和BContainer的关系是兄弟关系,在同一个父元素下渲染.现在我们要在点击A的时候调用B中的方法 解决思路:主要是用到ref获取BContainer组件挂载之后的实例 render(){ var b = null return(<BContainer ref={(node) => b = node}/>) } ref中的

React教程:组件与组件属性

1.React组件化概念 1.1.组件的概念 React 应用都是构建在组件之上. 组件作为React的核心内容,是View的重要组成部分,每一个View页面都由一个或多个组件构成,可以说组件是React应用程序的基石.在React的组件构成中,按照状态来分可以分为有状态组件和无状态组件. 1.2.组件的特点 组件化的概念在后端早已存在多年,只不过近几年随着前端的发展,这个概念在前端开始被频繁提及,特别是在MV*的框架中. 前端中的"组件化"这个词,在UI这一层通常指"标签化

vue.2.0-自定义全局组件

App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> <Loading></Loading> <!--<Loading></Loading>是自定义组件--> </div> </template> main.js import Vue from 'vue' import App fro

利用React写一个评论区组件(React初探)

本文是在阅读学习了官方的React Tutorial之后的整理,实例链接. 开始使用React 首先从官方获取React.js的最新版本(v0.12.2),或者下载官方的Starter Kit,并在我们的html中引入它们: <head> <meta charset="UTF-8"> <title>React Test Page</title> <script src="../build/react.js">

React 创建一个自动跟新时间的组件

componentDidMount声明周期函数 表示组件渲染完成后 componentWillUnmount声明周期函数 组件将要卸载 通常用于(为了防止内存泄漏 清除定时器) 11==>创建组件 Clock.js 组件名大写 12==>报错 Attempted import error: 'Clock' is not exported from './components/Clock' 试导入错误:“clock”未从“./components/clock”导出 解决:说明你的导入语句出错 重

React.js第二天,优化第一天的最后一个组件

废话不多说,直接上代码了 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="javascripts/react.js"></script> <script src="javascripts/reac

React Native 之组件的定义

App.js 也可以认为是一个组件,那么此文件中能定义多个组件吗? 方式一 import Hello from './Hello' export default class App extends Component { render(){ return ( <View> <Hello name="你伟哥"/> </View> ); } } 方式二 // 函数式写法 无状态 不能用this function App(props) { return &