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