初学React：JSX语法
2024-08-30 22:06:51
这是本人初学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的语法氛围。
最新文章
- [ASP.NET MVC 小牛之路]05 - 使用 Ninject
- git用法
- 把数组排成最小的数/1038. Recover the Smallest Number
- 设计模式17---设计模式之模板方法模式（Template Method）（行为型）
- CentOS6.3下安装配置SVN（Subversion）
- linux学习第十七天 (Linux就该这么学)
- 斐波那契数列中获取第n个数据值
- PowerDesigner 16PDM显示备注
- C++ char, unsigned char, signed char
- H5 canvas 实现飞机大战游戏
- 面向 Photoshop 的英特尔® Texture Works 插件
- c++面试题中经常被面试官面试的小问题总结（一）（本篇偏向基础知识）
- [图解tensorflow源码] TF系统概述篇
- multi thread for Java
- 222. Count Complete Tree Nodes -- 求完全二叉树节点个数
- Jquery 事件执行两次
- poco入门
- elasticsearch 创建索引，以及检索一条数据
- libxml2库函数详解
- Oracle学习笔记—数据库，实例，表空间，用户、表之间的关系