17.首页部分组件的拆分

1.我们在src目录下新建一个文件夹：pages,在pages中新建两个文件夹：Home和Detail
然后分别在其内部新建两个index.js文件

2.在Home的index中：
3.在Detail的index中：
4.然后我们在APP中，将home和detail引入
5.将Home和Detail作为组件传入路由
这样Home和Detail两个部分就实现了拆分，并且不同目录下显示的内容也是不一样

6.然后我们对home中的内容再进行拆分：在home目录下新建一个文件夹commponents,然后在commponents中新进三个文件

在这3个文件中引入react并导出

import React, { Component } from 'react';
class 组件名 extends Component{
    render() {
        return(
        <div>组件名</div>)
    }
}
export default 组件名;

7.我们需要在home的index中引入这个3个小的组件

8.我们把home这个页面划分为两个大的部分，左和右，左边包含list组件，右边包含recommed和write两个组件
9.下面来实现List这一块的内容：List.js中的代码

import React, { Component } from 'react';
import { ListItem, ListInfo } from '../style';
class List extends Component{
    render() {
        return (
            <div>
                <hr/>
               <ListItem>
                    <img className=" List-pic" src={require('../img/2.jpg')}/>
                <ListInfo>
                    <h3 className='title'>男人离不开的，往往是“不好惹”的女人</h3>
                    <p className='desc'>幸福，大概就是，你想要靠近的那个人，永远都不会推开你。不管他忙与不忙，只要你一回头，就能看见他的样子。 受委屈的时候，他会各种讨好你，遇到麻烦事... </p>
                </ListInfo>
                </ListItem>
               
            </div>
        )
    }
}
export default List;

10.styled.js中的关于list代码：

export const ListItem = styled.div`
overflow:hidden;
  padding:20px 0;
  border-bottom:1px solid #dcdcdc;
   .List-pic{
    display:block;
    width:125px;
    height:100px;
    float:right;
    border-radius:10px;
  }
 
`;
export const ListInfo = styled.div`
  width:500px;
  float:right;
  .title{
    line-height:27px;
    font-size:18px;
    font-weight:bold;
    color:#333;

  }
  .desc{
    line-height:18px;
    font-size:13px;
    color:#999;

  }
`

效果图：
11.因为list列表有很多项，我们使用store来管理数据

12.store中的reducer.js:

import { fromJS } from 'immutable';
const defaultState = fromJS({
    articleList: [{
        id: 1,
        title: '男人离不开的，往往是“不好惹”的女人',
        desc: '幸福，大概就是，你想要靠近的那个人，永远都不会推开你。不管他忙与不忙，只要你一回头，就能看见他的样子。 受委屈的时候，他会各种讨好你，遇到麻烦事... ',
        img: { require("../img/2.jpg") }，
    },
    {
        id: 2,
        title: '男人离不开的，往往是“不好惹”的女人',
        desc: '幸福，大概就是，你想要靠近的那个人，永远都不会推开你。不管他忙与不忙，只要你一回头，就能看见他的样子。 受委屈的时候，他会各种讨好你，遇到麻烦事... ',
         img: { require("../img/2.jpg") }，
    },
    ]
})
export default (state = defaultState, action) => {
    
}

13.我们的思想是将整个项目的redcuer拆分为很多个小的不同部分的，在src目录下的store的reducer中，我们将这一块的reducer放入：

14.List.js中，我们引入组件
15.在list中我们将拿到的数据来渲染页面效果：
16.然后在利用map遍历，把reducer数据渲染到页面

import React, { Component } from 'react';
import { ListItem, ListInfo } from '../style';
import { connect } from 'react-redux';

class List extends Component{
    render() {
        //这里的list就是我们拿到的articleList中的list
        const { list } = this.props;
        return (
            <div>
                <hr />
                {
                    list.map((item) => {
                        return (
                     <div> 
                        <ListItem key={item.get('id')}>
                            <img className=" List-pic" src={item.get('img')}/>
                            <ListInfo>
                                <h3 className='title'>{item.get('title')}</h3>
                                <p className='desc'>{item.get('desc')}</p>
                            </ListInfo>
                         </ListItem>
                     </div>
                        )
                    
                })}
            </div>
        )
    }
}
//mapState是从store拿数据到list中
const mapState = (state) => ({
    list:state.getIn(['home','articleList'])
})
export default connect(mapState)(List);

现在这个背景透明，我们需要在header目录下的styled中：