初学React：JSX语法

Posted 2020-08-21 黑乌鸦

　　这是本人初学React做的学习笔记;讲的不是很深，只算是简单的进行介绍。

这是一个小系列。都是在同一个模板中搭建的，但是代码是不能正常执行的。

 

>>第一个组件.js

 

‘use strick‘
/*===========================JavaScript的XML语法========================*/
var CommentBox = React.createClass({
	render:function () {
		return (
			<div className="CommentBox">
				Hello, world!I am a CommentBox.
			</div>
		);
	}
});

ReactDOM.render(
	<CommentBox />,
	document.getElementById(‘content‘)
);

/*=====================以上JS语句将被翻译为；==========================*/
var CommentBox = React.createClass({displayName: ‘CommentBox‘,
	render: function() {
		return (
			React.createElement(‘div‘, {className: "CommentBox"},
				"Hello, world!I am a CommentBox."
			)
		);
	}
});

ReactDOM.render(
	React.createElement(commentBox, null),
	document.getElementById(‘content‘)
);
/*=============================撰写组件===================================*/

var CommentList = React.cracteClass({
	render: function() {
		return (
			<div className="commentList">
				Hello, React`s World!I am a Commentlist.I am form Lao Zhao.
			</div>
		);
	}
});

var CommentForm = React.createClass({
	render: function() {
		return (
			<div className="commentForm">
				Hello React`s World!I am a CommentForm.I am from Lao Zhao.
			</div>
		);
		
	}
});

/*==============================更新组件===================================*/

var CommentBox = React.createClass({
	render: function() {
		return (
			<div className="commentBox">
				<h1>Comments</h1>
				<CommentList />
				<CommentForm />
			</div>
		);
	}
});


/*==============================使用道具=======================================*/

var Comment = React.createClass({
	render: function() {
		return (
			<div>
				<h2 className="commentAuthor">
					{this.props.author}
				</h2>
				{this.props.children}
			</div>
		);
	}
});

/*===============================组件属性===========================================*/

var CommentList = React.createClass({
	render: function() {
		return (
			<div className="commentList">
				<Comment author="Zhao Gaosheng">This is one comment.</Comment>
				<Comment author="Gaosheng">This is *another*comment.</Comment>
			</div>
		);
	}
});

　　　　这里只是简单让大家感受一下JSX的语法氛围。