react.js基本操练

简介: 慢慢了解其它的JS前端框架。。。 var data = [{ "when": "2 minutes ago", "who": "Jill Dupre", "description": "Created new account" }, { "when": "1 hour a...

慢慢了解其它的JS前端框架。。。

var data = [{ "when": "2 minutes ago",
  "who": "Jill Dupre",
  "description": "Created new account"
},
{
  "when": "1 hour ago",
  "who": "Lose White",
  "description": "Added fist chapter"
},
{
  "when": "2 hours ago",
  "who": "Jordan Whash",
  "description": "Created new account"
}];
var headings = ["Last updated at", "By Author", "Summary"]
var title = "Recent Changes";


var App = React.createClass({
    render: function(){
    var headings = this.props.headings.map(function(heading) {
    return(<th>
{heading}
</th>);
});
var rows = this.props.data.map(function(row){
return <tr>
<td>{row.when}</td>
<td>{row.who}</td>
<td>{row.description}</td>
</tr>
})

return <div><h1>{this.props.title}</h1><table>
<thead>
{headings}
</thead>
{rows}
</table></div>
}
});

React.render(<App headings={headings} data={data} title={title}/>,
document.body);

目录
相关文章
|
4月前
|
JavaScript 前端开发 小程序
js vue react获取本周、本月、本季、本年的第一天
js vue react获取本周、本月、本季、本年的第一天
|
4月前
|
JSON JavaScript 前端开发
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
130 0
|
11月前
|
前端开发 JavaScript Cloud Native
Vue.js vs React:哪一个更适合你的项目?
Vue.js vs React:哪一个更适合你的项目?
56 0
|
4月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
JavaScript 前端开发 算法
前端框架比较:Vue.js vs React.js vs Angular(2)
前端框架比较:Vue.js vs React.js vs Angular(2)
|
4月前
|
前端开发 JavaScript
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
54 1
|
4月前
|
XML JavaScript 前端开发
VUE基础知识:Vue.js和React的主要区别是什么?
VUE基础知识:Vue.js和React的主要区别是什么?
781 0
|
4月前
|
前端开发 JavaScript
React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)
React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)
101 0
|
4月前
|
JavaScript 前端开发
React 创建 js 与 ts 项目
React 创建 js 与 ts 项目
50 0
|
4月前
|
JavaScript 前端开发
react原生js爬楼
react原生js爬楼
40 0