React 开发片段

作者： jeantimex 全部

编写 React 代码节约时间

详情

版本 3.0.2
主页 github.com
问题 github.com
修改时间 8 年前
最近查看 44 分钟前
首次查看 8 年前

安装次数

总数 34K
Win 18K
Mac 11K
Linux 6K

	Aug 6	Aug 5	Aug 4	Aug 3	Aug 2	Aug 1	Jul 31	Jul 30	Jul 29	Jul 28	Jul 27	Jul 26	Jul 25	Jul 24	Jul 23	Jul 22	Jul 21	Jul 20	Jul 19	Jul 18	Jul 17	Jul 16	Jul 15	Jul 14	Jul 13	Jul 12	Jul 11	Jul 10	Jul 9	Jul 8	Jul 7	Jul 6	Jul 5	Jul 4	Jul 3	Jul 2	Jul 1	Jun 30	Jun 29	Jun 28	Jun 27	Jun 26	Jun 25	Jun 24	Jun 23	Jun 22
Windows	0	0	0	1	1	3	0	0	0	0	0	0	1	1	1	2	0	0	0	0	0	0	0	0	0	3	1	1	1	3	2	0	0	1	0	0	1	0	1	1	0	0	0	0	0	0
Mac	1	1	1	0	1	0	0	0	1	0	0	0	0	0	0	1	0	1	0	0	0	0	0	0	0	0	0	0	0	1	2	1	0	1	0	0	0	0	0	0	0	0	0	1	0	1
Linux	0	0	0	0	0	0	0	1	0	2	0	0	0	0	1	0	0	0	1	0	0	0	0	0	0	0	0	0	1	0	0	1	1	0	0	0	1	0	0	0	1	0	0	0	0	0

README

源代码: raw.githubusercontent.com

React 开发片段

编写 React 组件和测试用例时感到厌烦？如果你使用 Sublime，这些代码片段可能会帮助你享受编写你的 React 组件。

这些片段遵循 JavaScript ES6 语法，我们不再使用旧的 React.createClass({...})，我们写类组件和函数组件。我们还提供了快速编写 React 生命周期函数的片段（例如，componentDidMount）。

安装

使用包控制

确保你已经安装了包管理器
启动命令面板：MacOS 上 ⌘+shift+p，Windows 上 ctrl+shift+p
输入 install，选择 Package Control: Install Package
输入 React，选择 React Development Snippets

不使用包控制

导航到你的 Sublime Text 包夹文件夹，并克隆我们的项目。

MacOS

“/Users/{user}/Library/Application Support/Sublime Text {2|3}/Packages”

Windows

“C:\Users{user}\AppData\Roaming\Sublime Text {2|3}\Packages”

git clone https://github.com/jeantimex/react-sublime-snippet.git "React-Development-Snippets"

片段

React

ES6 类组件 rcc + <TAB>
rcc
“javascript import React, { Component, PropTypes } from 'react';

class ${1:Component} extends Component { static propTypes = { className: PropTypes.string, };

constructor(props) {
    super(props);
}

render() {
    return (
        ${0}
    );
}

}

export default ${1:Component};

**ES6 Class Component with injectIntl** `rcci + <TAB>`
```javascript
import React, { Component, PropTypes } from 'react';
import { injectIntl, intlShape } from 'react-intl';

class ${1:Component} extends Component {
    static propTypes = {
        intl: intlShape.isRequired,
    };

    constructor(props) {
        super(props);
    }

    render() {
        const { formatMessage } = this.props.intl;

        return (
            ${0}
        );
    }
}

export default injectIntl(${1:Component});

函数组件 rfc + <TAB>
rfc
”javascript import React, { PropTypes } from 'react';

const ${1:Component} = ({ className = '', }) => { return (

${0}

); };

${1:Component}.displayName = '${1:Component}';

${1:Component}.propTypes = { className: PropTypes.string, };

export default ${1:Component};

**Functional Component with injectIntl** `rfci + <TAB>`
```javascript
import React, { PropTypes } from 'react';
import { injectIntl, intlShape } from 'react-intl';

const ${1:Component} = ({
    intl,
}) => {
    const { formatMessage } = intl;

    return (
        ${0}
    );
};

${1:Component}.displayName = '${1:Component}';

${1:Component}.propTypes = {
    intl: intlShape.isRequired,
};

export { ${1:Component} };

export default injectIntl(${1:Component});

静态属性类型 rspt + “javascript static propTypes = { ${1:prop}: PropTypes.${2:string}, };

**static defaultProps** `rdp + <TAB>`
```javascript
static defaultProps = {
    ${1:prop}: ${2:value},
};

定义格式化消息 rdm + ”javascript const messages = defineMessages({ ${1:message}: { defaultMessage: '${2:default message}', description: '${3:description}', id: '${4:id}', }, });

**Define New Formatted Message** `rnm + <TAB>`
```javascript
${1:message}: {
    defaultMessage: '${2:default message}',
    description: '${3:description}',
    id: '${4:id}',
},

componentDidMount方法 rcdm + “javascript componentDidMount() { ${1} }

**componentDidUpdate(prevProps, prevState)** `rdu + <TAB>`
```javascript
componentDidUpdate(prevProps, prevState) {
    ${1}
}

componentWillMount方法 rcwm + ”javascript componentWillMount() { ${1} }

**componentWillReceiveProps(nextProps)** `rcwrp + <TAB>`
```javascript
componentWillReceiveProps(nextProps) {
    ${1}
}

componentWillUnmount方法 rcwum + “javascript componentWillUnmount() { ${1} }

**componentWillUpdate(nextProps, nextState)** `rcwu + <TAB>`
```javascript
componentWillUpdate(nextProps, nextState) {
    ${1}
}

shouldComponentUpdate函数 rscu + ”javascript shouldComponentUpdate(nextProps, nextState) { return ${1}; }

### Redux ###
**Redux Component** `rrc + <TAB>`<br />
![rrc](screenshots/rrc.gif)<br />
```javascript
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import {
    ${2:action} as ${2:action}Action,
} from '${3:path}';

const mapDispatchToProps = (dispatch) => {
    return {
        ${2:action}: () => {
            dispatch(${2:action}Action());
        },
    };
};

const mapStateToProps = ({ state }) => ({
    ${4:prop}: state.${4:prop}
});

export class ${1:Component} extends Component {
    render() {
        const {
            ${2:action}
        } = this.props;

        return (
            ${0}
        );
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(${1:Component});

Redux动作 rra + “javascript export const ${1:action} = (${2:payload}) => ({ type: ${3:type}, ${2:payload} });

**Reducer** `rrr + <TAB>`
```javascript
import {
    ${2:Action}
} from '${3:path}';

const defaultState = {
    ${4:prop},
};

const ${1:Reducer} = (state = defaultState, action = {}) => {
    switch (action.type) {
        case ${5:type}:
            return {
                ...state,
            };

        default:
            return state;
    }
};

export default ${1:Reducer};

测试

React测试用例（chai断言和enzyme） rt +

”javascript import React from 'react'; import { assert } from 'chai'; import { shallow } from 'enzyme'; import ${1:Component} from '${2:../component}';

const sandbox = sinon.sandbox.create();

describe('${1:Component}', () => { afterEach(() => { sandbox.verifyAndRestore(); });

beforeEach(() => {
    ${3}
});

it('should render ${1:Component} correctly', () => {
    const component = shallow(
        <${1:Component} />
    );
    ${4}
});

});

**React Test Describe** `rtd + <TAB>`
```javascript
describe('${1:...}', () => {
    afterEach(() => {
        ${2}
    });

    beforeEach(() => {
        ${3}
    });

    it('should ${4:...}', () => {
        ${0}
    });
});

React测试it函数 rti + “javascript it('should ${1:…}', () => { ${0} });

**import** `rim + <TAB>`
```javascript
import ${1:Package} from '${2:path}';

作者

苏永 - Box Inc. - jeantimex

许可

本项目基于MIT许可协议。