react基础

最新推荐文章于 2024-09-17 12:04:49 发布
奔跑的猪皮
最新推荐文章于 2024-09-17 12:04:49 发布
阅读量137
点赞数
本文链接：https://blog.csdn.net/qq_30985067/article/details/104994709
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="//www.w3cschool.cn/statics/assets/react/react.min.js"></script> <!-- 核心库 -->
		<script src="//www.w3cschool.cn/statics/assets/react/react-dom.min.js"></script> <!-- DOM相关支持 -->
		<script src="//www.w3cschool.cn/statics/assets/react/babel.min.js"></script> <!-- jsx支持 -->
		<script src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>
	</head>
	<body>
		<!-- /* 要使用jsx就必须将type声明为text/babel */ -->
		<!-- 注意一定要将html标签放入块级标签中，如：div -->
		<!-- 在DOM中需要注意的是，注释只能写在HTML标签中 -->
		<!-- 在DOM中没有if else 语句，只有三元换算-->
		<!-- render方法（ReactDOM.render）中的内容必须使用html标签封装，否则会报错 -->
		<div id="stu"></div>
		<div id="stu2"></div>
		<div id="stu3"></div>
		<div id="stu4"></div>
		<div id="stu5"></div>
		<div id="stu6"></div>
		<div id="stu7"></div>
		<!-- 入门 -->
		<script type="text/babel">
			ReactDOM.render(
			<h1>hello 世界  {/*注释document.getElementById('stu') 意思就是将h1标签放入id为stu的块级中...*/}  </h1>,			
			document.getElementById('stu') 
			);
		</script>

		<!-- 数组应用 -->
		<script type="text/babel">
			var arry = [12,13];
			ReactDOM.render(
				<h1>{arry} {/* 数组会自动展开 */}</h1>,		
				document.getElementById('stu2') 
			);
		</script>

		<!-- 添加样式 -->
		<script type="text/babel">
			var cs = {
				fontsize:100,
				color:"red"
			};
			ReactDOM.render(
				<h1 style = {cs}>css</h1>,
				document.getElementById('stu3')
			);
		</script>


		<!-- react渲染，用途未知 -->
		<script type="text/babel">
			var myDivElement = < div className = "foo" / > ;
			ReactDOM.render(myDivElement, document.getElementById('stu4'));
		</script>




		<!-- react组件介绍 -->
		<!--  组件类名必须大写否则组件不会起作用（会被当成html标签看待），以下Hello就是由React.createClass创建的类名 -->
		<script type="text/babel">
			var Hello = React.createClass({
				render :function(){
					return <h1>组件基础介绍OK!</h1>
				}
			});
			ReactDOM.render(
				<Hello />,
				document.getElementById('stu5')
			);
		</script>
		<!-- react之状态 -->
		<script type="text/babel">
			/*  getInitialState为react固定写法，初始化state中的值用*/
			/* handleClick函数为自定义，其中state是为状态属性，该属性会自动调用render函数 */
			/* state类似于更新操作 */
				var LikeButton = React.createClass({
					getInitialState :function(){
						return {liked : false};
					},
					handleClicks: function(event) {
						this.setState({liked: !this.state.liked});
					},
					render: function() {
							var text = this.state.liked ? '喜欢' : '不喜欢';
							return (<p onClick={this.handleClicks}>你<b>{text}</b>我。点我切换状态。</p>);
					}
				});
				
				ReactDOM.render(
					<LikeButton />,
					document.getElementById('stu6')
				);
		</script>

		<!-- props简单应用 -->
		<script type="text/babel">
			var Linke = React.createClass({
						render : function(){
								return <h1>{this.props.tname} {/* 必须使用html标签封装 */}</h1>;
						},
				});
			ReactDOM.render(
				<Linke tname='ok'/>,
				document.getElementById('stu7')
			);
		</script>
		<div id="example"></div>
		<script type="text/babel">
			//var title = "W3Cschool教程";
     var title = 123;
    var MyTitle = React.createClass({
      propTypes: {
        title: React.PropTypes.string.isRequired,
      },

      render: function() {
         return <h1> {this.props.title} </h1>;
       }
    });
    ReactDOM.render(
        <MyTitle title={title} />,
        document.getElementById('example')
    );
    </script>
		
		

		
		
		<div id="tx"></div>
		<!-- 表单事件 -->
		<script type="text/babel">
			var Txm = React.createClass({
				getInitialState: function(){
						return {hellos: '我的表单验证'};
				},
				
				handleChange: function(event){
					this.setState({hellos:'OK'})
				},
				
				/* 注意render中return后面一定要在同一行接上返回值，否则会报错 */
				render: function(){
					var t = this.state.hellos;
				 return	<div>
								<button onClick={this.handleChange}>点击</button>
								<h4>{t}</h4>
								</div>;
				}
				
			});
		
			
			ReactDOM.render(
				<Txm />,
				document.getElementById('tx')
			);
			
		</script>
	</body>
</html>




<!-- 调用state这个属性之后会自动调动render函数（渲染函数，重新渲染） -->


ReactDom.render(html元素,绑定)

ReactDom.render(组件,绑定);  //如果这种写法，必须要在render函数中初始化

//箭头函数：

参数 => 函数体
var f =v=> v;  只有一个参数的时候才可以这样写。
以上等于
var f = function(v){
	
	return v;
};

var f = (a,b) =>		//当有多个参数的时候需要加上括号还有花括号
{
	return a+b;
}