React开发项目例子

一、需求

1.分析：用react开发一个类似bootstrap4中的card组件http://v4-alpha.getbootstrap.com/components/card/，界面类似如下：



2.确定发目标:



3.确定开发顺序



4.开发流程介绍



测试采用TDD



二、代码

1.Card.js

var React = require('react/addons');

var Card = React.createClass({
getInitialState: function() {
return this.props.content;
},
handleClick: function() {
this.setState({
blocks : [{
title: "Allen Iverson(已关注)",
subtitle: "PG",
text: "Cool player",
links: [{
url:"http://www.163.com",
name:"链接1"
}, {
url:"http://www.g.cn",
name:"链接2"
}
]
}]
})
},
render: function(){
var content = this.state;

var blocks = [];
for(var i = 0; i < content.blocks.length; i++){
var block = content.blocks[i];
var links = [];
for(var i = 0; i < block.links.length; i++){
links.push(<a onClick={this.handleClick} className="card-link" href={block.links[i].url}>{block.links[i].name}</a>);
}
blocks.push(<div className="card-block">
<h4 className="card-title">{block.title}</h4>
<h6 className="card-subtitle">{block.subtitle}</h6>
<p className="card-text">{block.text}</p>
<p>
{links}
</p>
</div>
);
}

var listGroup = [];
for(var i = 0; i < content.listGroup.length; i++){
listGroup.push(<li className="list-group-item">{content.listGroup[i]}</li>);
}

var option = this.props.option ? "card text-xs-" + this.props.option : "card";
return <div className="container-fluid">
<div className="row">
<div className="col-sm-4">
<div className={option}>
<div className="card-header">{content.header}</div>
<img className="card-img-top" src={content.imgTop.url} alt={content.imgTop.alt}></img>
{blocks}
<ul className="list-group list-group-flush">
{listGroup}
</ul>
<img className="card-img-bottom" src={content.imgBottom.url} alt={content.imgBottom.alt}></img>
<div className="card-footer">{content.footer}</div>
</div>
</div>
</div>
</div>
}
})

module.exports = Card

2.test.jsx

var React = require('react/addons');
var jasmineReact = require('jasmine-react-helpers');
var TestUtils = React.addons.TestUtils;
var Card = require('./Card.jsx');

describe('Card component', function(){

var card;
var content;

beforeEach(function(){
//渲染
var blocks = [
{
title: "Allen Iverson",
subtitle: "PG",
text: "Cool player",
links: [{
url:"http://www.163.com",
name:"链接1"
}, {
url:"http://www.g.cn",
name:"链接2"
}
]
}
];
var header = "76ers";
var footer = "mvp";
var listGroup = ["艾弗森1996年6月26日被费城76人队选中，成为NBA状元秀，绰号答案（The Answer）","场均出战41.1分钟，获得26.7分、6.2次助攻和2.2次抢断"];
var imgTop = {
url: "http://a1.hoopchina.com.cn/attachment/Day_100424/43_3842044_665ae051136b4b8.jpg",
alt: "dribble"
};
var imgBottom = {
url: "http://www.onlinedown.net/bigsoftimg/androidimg/260000/255860_0.jpg",
alt: "crossover"
}
var content = {
blocks: blocks,
header: header,
footer: footer,
listGroup: listGroup,
imgBottom: imgBottom,
imgTop: imgTop
}
card = TestUtils.renderIntoDocument(<Card content={content} option="center"></Card>);
})

afterEach(function(){
React.unmountComponentAtNode(React.findDOMNode(card))
})

it('should exist', function(){
expect(!!React.findDOMNode(card)).toBe(true)
//card = TestUtils.renderIntoDocument(<Card content={content}></Card>);
//expect(React.findDOMNode(card).textContent).toContain('Hello world')
});

it('should have correct structure', function(){
//测试
//card = TestUtils.renderIntoDocument(<Card content={content}></Card>);
var content = React.findDOMNode(card).textContent;
expect(content).toContain("Allen");
expect(content).toContain("76ers");
expect(content).toContain("mvp");
expect(content).toContain("艾弗森");
expect(React.findDOMNode(card).getElementsByTagName("img")[0].alt).toContain("dribble");
expect(React.findDOMNode(card).getElementsByTagName("img")[1].alt).toContain("crossover");

});

it('should have correct style', function() {
var cardBox = React.findDOMNode(card).getElementsByClassName("card");
expect(!!cardBox.length).toBe(true);
});

it('should correctly use options', function() {
var cardBox = React.findDOMNode(card).getElementsByClassName("text-xs-center");
expect(!!cardBox.length).toBe(true);
});

it('should be response', function() {
TestUtils.Simulate.click(React.findDOMNode(card).getElementsByTagName("a")[0]);
var content = React.findDOMNode(card).textContent;
expect(content).toContain("已关注");
});
})

3.show.jsx

var React = require('react/addons');
var Card = require('./Card.jsx');

var blocks = [
{
title: "Allen Iverson",
subtitle: "PG",
text: "Cool player",
links: [{
url:"http://www.163.com",
name:"链接1"
}, {
url:"http://www.g.cn",
name:"链接2"
}
]
}
];
var header = "76ers";
var footer = "mvp";
var listGroup = ["艾弗森1996年6月26日被费城76人队选中，成为NBA状元秀，绰号答案（The Answer）","场均出战41.1分钟，获得26.7分、6.2次助攻和2.2次抢断"];
var imgTop = {
url: "http://a1.hoopchina.com.cn/attachment/Day_100424/43_3842044_665ae051136b4b8.jpg",
alt: "dribble"
};
var imgBottom = {
url: "http://www.onlinedown.net/bigsoftimg/androidimg/260000/255860_0.jpg",
alt: "crossover"
}
var content = {
blocks: blocks,
header: header,
footer: footer,
listGroup: listGroup,
imgBottom: imgBottom,
imgTop: imgTop
}
React.render(<Card content={content} option="right"></Card>, document.body);

四、运行结果(bootstrap的css无效果)



源码：http://files.cnblogs.com/files/shamgod/BootstrapCard.zip