### 组件
`components` 存放项目共用的组件

#### 现有组件及规范
`components` 下的组件按照文件夹进行管理，文件夹的名称既是组件的名称   
组件目录下必须要有一个`index.jsx`文件, 该文件为组件的对外接口

#### 目录结构
```
-- /components
   |
   |-- /Header
   |   |
   |   |-- index.jsx
   |   |
   |   |-- style.scss
   |
   |-- /Footer
   |   |
   |   |-- index.jsx
   |   |
   |   |-- style.scss
   |
   |-- index.jsx

```

#### 添加新组件 `Header`

1. `mkdir components/Header`

2. 新建 `components/Header/index.jsx `
    
    ```
    // 导入样式
    import styles from './style'

    // generate classnames from key-value-object
    // Cx('nav-menu', { true :'active', false: 'nav-link' }) => 'nav-menu active'
    import Cx from 'classnames'

    import { Link } from 'react-router-component'
    
    export default class Header extends React.Component {
        constructor(){
            super();
    
            this.state = {
                menus: [{
                    text: 'Index',
                    href: 'javascript:void(0)'
                }]
            }
        }
    
        onMenuClick(menu, e) {
            
        }
    
        render(){
            return <header className="header nav">
                {
                    this.state.menus.map((menu, index) => {
                       return <Link className={Cx('nav-menu', {})} onClick={this.onMenuClick.bind(this, menu)}>{menu.text}</Link> 
                    })
                }
            </header>
        }
    }
    
    export default Hello    
    
    ```
3. 新建 `components/Hello/index.scss`

    ```
    $color-primary: #63c7d3;
    $color-bg: #efefef;
    
    .container {
        margin: 10px;
        padding: 10px;
        background-color: $color-bg;
    }
    
    .text-center {
        text-align: center;
    }
    
    .btn {
        border-radius: 2px;
        border: none;
        box-shadow: none;
        text-align: center;
        padding: 5px 10px;
        line-height: 1em;
    }
    
    .btn-primary{
        background-color: $color-primary;
        color: white;
    }
    ```
4. 编辑`components/index.js`,导出组件

    ```
    import Hello from './Hello'
    
    ...
    
    export {
        ...,
        Hello
    }
    ```
#### 使用现有组件   

    ```
    // 引用多个组件
    import { Hello, ... } from 'wepiao'
    // 引用单个组件
    //import Hello from 'wepiao/Hello'
   
    ...


    // just render the component in render() func 
    render () {
        return (
            <Hello />
        )
    }
    ```

#### NOTE  
`import { Hello } from 'wepiao'`?  
这条能够生效的原理在webpack的配置里
```
// webpack.config.js

    resolve: {
        root: __dirname,
        alias: {
            wepiao: path.join(__dirname, '/components')
        },
        modulesDirectories: ["web_modules", "node_modules", 'bower_components'],
        extensions: ['', '.js', '.json', '.jsx', '.sass', '.css']
    }
```

`alias`是上述规则生效的关键，so cool