组件的定义

  1. 需要管理内部状态/涉及生命周期，使用class（类组件）

  2. 否则优先使用普通函数（函数组件）

命名

  • 规则：帕斯卡命名法
  • 文件名
    • 目录的根组件：index.jsx
    • 其它：MyComponent.jsx
  • 引用组件名：const MyComponent = require('./List')
  • 属性名
    • 规则：驼峰式
    • 例：<Index firstName="foo">

对齐

1
2
3
4
<Index
  config="foo"
  second="bar"
/>

引号

  • 在JSX中应使用""

  • 在JS中应使用''

    1
    <Index name="EvanYou" style={{left: '20px'}} />

空格

  • 标签闭合：标签名和/中保留一个空格 <Index />
  • 插值表达式：插值括号和内容之间不应该有空格 <Index style={styleObj}>

props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { PropTypes } from 'react'
const propTypes = {
  id: PropTypes.number.isRequired,
  text: PropTypes.string
}
const defaultProps = {
  text: 'hello, world!'
}
class App extends React.component {
  render () {
    return (
        <div class="index">{this.props.text}</div>
    )
  }
}
App.propTypes = propTypes
App.defaultTypes = propTypes
export default App