初学React：定义一个组件

时间  2019-11-30
标签 初学 react 定义 一个 组件 栏目 React 繁體版
原文   原文链接

 

接着聊React，今天说说如何建立一个组件类。javascript

 

<!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

			方法：
				一、React中建立的组件类一大写字母开头，采用驼峰命名法
				二、在React中使用React.creacteClass方法建立一个组件类
				三、核心代码：每一个组件类都必须实现本身的render方法，输出定义好的组件模板。
					返回值：null、false或 组件模板
				四、注意：组件类只能包含一个顶层标签

	 -->
	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>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程