https://github.com/sergeysova/react-snippets
Snippets for Sublime Text 3 to easy create Components, Props, Actions for React.JS
https://github.com/sergeysova/react-snippets
Last synced: over 1 year ago
JSON representation
Snippets for Sublime Text 3 to easy create Components, Props, Actions for React.JS
- Host: GitHub
- URL: https://github.com/sergeysova/react-snippets
- Owner: sergeysova
- Created: 2015-10-20T12:51:31.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-03-15T20:26:53.000Z (over 10 years ago)
- Last Synced: 2025-03-29T11:06:16.505Z (over 1 year ago)
- Language: Shell
- Homepage:
- Size: 7.81 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Snippets for sublime react
## Mac OS X
Install:
```bash
./installMac
# snippets will be copied to `~/Library/Application Support/Sublime Text 3/Packages/User/react`
```
Uninstall:
```bash
./uninstallMac
```
## Ubuntu
Install:
```bash
./installUbuntu
# snippets will be copied to `~/.config/sublime-text-3/Packages/User/react`
```
Uninstall:
```bash
./uninstallUbuntu
```
For other platforms:
```bash
# Install
cp -r ./*.sublime-snippet ~/.Sublime\ Text\ 3/Packages/User/react
# Remove
rm -rf ~/.Sublime\ Text\ 3/Packages/User/react
```
## Props
Trigger: `defaultProps`
Tab switch: 2
Template: `1:children`, `2:''`
Result:
```js
static defaultProps = {
children: ''
};
```
---
Trigger: `propTypes`
Tab switch: 2
Template: `1:children`, `2:any`
Result:
```js
static propTypes = {
children: React.PropTypes.any
};
```
## Context
Trigger: `getChildContext`
Tab switch: 2
Template: `1:name`, `2:string`
Result:
```js
static childContextTypes = {
name: React.PropTypes.string
};
getChildContext() {
return {
name: string
};
}
```
---
Trigger: `contextTypes`
Tab switch: 2
Template: `1:name`, `2:string`
Result:
```js
static contextTypes = {
name: React.PropTypes.string
};
```
## Imports
Trigger: `imports`
Tab switch: 2
Template: `1:Directory`, `2:Component`
Result:
```js
import DirectoryComponent from 'Directory/Component/DirectoryComponent';
```
## Component
Trigger: `rComponent`
Tab switch: 1
Template: `1:ComponentName`
Result:
```js
import React, { Component } from 'react';
export default class ComponentName extends Component {
/**
* Render component ComponentName
*/
render() {
return (
);
}
}
```
---
Trigger: `rComponentStyled` (`rcs`)
Tab switch: 1
Template: `1:ComponentName`
Result:
```js
import CN from 'classnames';
import css from './ComponentName.styl';
import React, { Component } from 'react';
export default class ComponentName extends Component {
/**
* Render component ComponentName
*/
render() {
return (
);
}
}
```
---
Trigger: `rBranch` (`rba`)
Tab switch: 3
Template: `1:ComponentName`, `2:baobab_branch`, `3:array`
Result:
```js
import React, { Component } from 'react';
@SubscribedTo('baobab_branch')
export default class ComponentName extends Component {
static propTypes = {
baobab_branch: React.PropTypes.array.isRequired
};
/**
* Render component ComponentName
*/
render() {
return (
);
}
}
```
---
Trigger: `rBranchStyled` (`rbs`)
Tab switch: 3
Template: `1:ComponentName`, `2:baobab_branch`, `3:array`
Result:
```js
import CN from 'classnames';
import css from './ComponentName.styl';
import React, { Component } from 'react';
@SubscribedTo('baobab_branch')
export default class ComponentName extends Component {
static propTypes = {
baobab_branch: React.PropTypes.array.isRequired
}
/**
* Render component ComponentName
*/
render() {
return (
);
}
}
```
## Actions
Trigger: `rAction` (`rac`)
Tab switch: 4
Template: `1:getAccount`, `2:userID`, `3:get`, `4:account/${userID}`
Result:
```js
/**
* !!
*
* @returns {Promise} Thenable/Catcheable
*/
export function getAccount(userID) {
return get(`/account/${userID}`)
.then((response) => {
return response;
});
}
```