zoukankan      html  css  js  c++  java
  • 初学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>

      

  • 相关阅读:
    面向对象 (11)求交并集 判断字符形式
    软件工程 课程总结
    面向对象 (10)正则判邮箱
    面向对象 (9)计算时间差 找随机数范围内规律
    面向对象 (8)字符串出现字符个数统计 字母组成回文串判定
    面向对象 (7)中介买房 平均数异常处理
    面向对象 (6)买房付首款
    第16周作业
    第15周作业
    迟到的第14周作业
  • 原文地址:https://www.cnblogs.com/gaosheng-221/p/6104862.html
Copyright © 2011-2022 走看看