React Sublime-text 3 snippets

README.md

Sublime-text 3 Snippets

以下是我自己開發 React 時覺得常用的語法，我會把它們寫成 Snippets，快速產生樣板後可以提升開發的速度。

Create Store Template

<snippet>
<content><![CDATA[
import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
import rootReducer from './reducers'

const loggerMiddleware = createLogger()

export default function configureStore(initialState) {
	return createStore(
		rootReducer,
		initialState,
		applyMiddleware(
			thunkMiddleware,
			loggerMiddleware
		)
	)
}
]]></content>
    <tabTrigger>createStore</tabTrigger>
    <scope>source.js</scope>
    <description>React Create Store</description>
</snippet>

Create Root Component

<snippet>
<content><![CDATA[
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import Root from './component/Root.jsx'
import reducers from './reducers.js'

const store = createStore(reducers)

render(
	<Provider store={store}>
		<Root />
	</Provider>
	,document.getElementById('section')
)
]]></content>
    <tabTrigger>createRoot</tabTrigger>
    <scope>source.js</scope>
    <description>React Create RootComponent</description>
</snippet>

Create Reducer Template

<snippet>
<content><![CDATA[
import { combineReducers } from 'redux'

function ${1:}(state=${2:},action){
	${3:}
}

const rootReducer = combineReducers({
	${1:}
})

export default rootReducer
]]></content>
    <tabTrigger>createReducer</tabTrigger>
    <scope>source.js</scope>
    <description>React Create Reducer</description>
</snippet>

Create Component Template

<snippet>
<content><![CDATA[
import React, { PropTypes } from 'react'

const ${1:} = ({ ${2:} }) => (
	<div></div>
)

Todo.propTypes = {
	${2:}: PropTypes.func.isRequired
}

export default ${1:}
]]></content>
    <tabTrigger>createComponent</tabTrigger>
    <scope>source.js</scope>
    <description>React Create Component</description>
</snippet>

define .propTypes

<snippet>
<content><![CDATA[
propTypes = {
	${1:}: React.PropTypes.${2:number}.${3:isRequired}
}
]]></content>
    <tabTrigger>propTypes</tabTrigger>
    <scope>source.js</scope>
    <description>React .propTypes{}</description>
</snippet>

Create Container

<snippet>
<content><![CDATA[
import { connect } from 'react-redux'
import ${2:Component} from '${3:}'

const mapStateToProps = (state) => {
  return {
    
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    
  }
}

const ${1:Container} = connect(
  mapStateToProps,
  mapDispatchToProps
)(${2:Component})

export default ${1:Container}
]]></content>
    <tabTrigger>createContainer</tabTrigger>
    <scope>source.js</scope>
    <description>React Create Container</description>
</snippet>

Require

如果要用 ES5 開發，只能使用 reuqire 最好也可以快速產生

<snippet>
	<content><![CDATA[
var ${1:} = require('${2:}');
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>require</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>source.js</scope>
	<description>NodeJS require()</description>
</snippet>

Export

如果要用 ES5 開發，只能使用 module.export 最好也可以快速產生

<snippet>
	<content><![CDATA[
module.exports = ${1:};
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>module</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>source.js</scope>
	<description>NodeJS module.exports</description>
</snippet>

如果有更多好用的 Snippet 也歡迎分享