首页 > 代码库 > 初学React:JSX语法
初学React:JSX语法
这是本人初学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的语法氛围。
初学React:JSX语法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。