项目/组件目录结构 以及 redfile.json 规范

[wssgcg1213]

redfile.json

该文件用来描述整个项目的基本信息

选项

选项名	可选项	默认值	描述	参数类型
type	project/component	project	描述项目类型，project 表示独立项目，component 表示可复用UI组件	string
spa	true/false	false	如果type为project，该选项表示项目的类型，true 为单页应用(SPA)，false 表示传统多页面应用	boolean
options	{}	N/A	传递给编译器的选项，详细见下表	object
author			项目作者信息	string

[wssgcg1213]

独立项目目录结构

单页（SPA）应用 src 目录

src
├── components        # 可复用业务组件
│   │── World         # 复杂可复用组件
│   │   │── World.jsx
│   │   │── World.less
│   │   └── index.js
│   └── Hello.jsx     # 简单可复用组件
│
├── pages             # 页面
│   └── HomePage.jsx
│
├── index.jsx         # 入口 jsx 文件，使用 react-router 
└── index.html        # dev 访问入口

传统多页（多入口）应用 src 目录

src
├── components         # 可复用业务组件
│   │── World
│   │   │── World.jsx
│   │   │── World.less
│   │   └── index.js
│   └── Hello.jsx
│
├── pages              # 页面
│   └── home
│       │── index.jsx  # home 页面入口
│       │── index.html # dev 访问入口
│       └── style.less # 页面级样式文件
│   └── about
│       │── index.jsx  # about 页面入口
│       │── index.html # dev 访问入口
└─      └── style.less # 页面级样式文件

组件项目目录结构

.
├── demo
│   └── simple.jsx      # demo
├── package.json
├── readme.md
├── redfile.json
└── src
    ├── Component.jsx
    ├── Component.less
    └── index.js

[wssgcg1213]

可复用组件文件组织形式

1. 简单可复用组件(单文件)

• Component.jsx

/**
 * Created at 2016/12/7.
 * @Author Ling.
 * @Email i@zeroling.com
 */
import React, { Component, PropTypes } from 'react'

export default class extends Component {
  static propTypes = {}
  static defaultProps = {}
  render() {
    return (
      <div>Hello World.</div>
    );
  }
}

2. 复杂可复用组件

• Component
  • index.js
  • Component.jsx
  • Component.[less/scss/css]

index.js:

export default from './Component'

Component.jsx

/**
 * Created at 2016/12/7.
 * @Author Ling.
 * @Email i@zeroling.com
 */
import React, { Component, PropTypes } from 'react'
import './Component.less'

export default class extends Component {
  static propTypes = {}
  static defaultProps = {}
  render() {
    return (
      <div className="component">Hello World.</div>
    );
  }
}

Component.less:

.component {
  color: red;
}