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