初学React：定义一个组件

时间：2024-04-29 09:41:51

接着聊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>

　　

相关文章