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

Activity

1. wssgcg1213 commented on Dec 13, 2016

   

   wssgcg1213

   on Dec 13, 2016

   MemberAuthor

   More actions

   独立项目目录结构

   单页（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
   
2. wssgcg1213 commented on Dec 13, 2016

   

   wssgcg1213

   on Dec 13, 2016

   MemberAuthor

   More actions

   可复用组件文件组织形式

   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;
   }
3. wssgcg1213

   changed the title [-]redfile.json 规范[/-] [+]项目/组件目录结构 以及 redfile.json 规范[/+] on Dec 13, 2016