React, React-Native, Redux, and Test snippets to help with building your React apps in Atom.
imr
Import Reactimport React from "react";
imrc
Import React with Componentimport React, { Component } from "react";'
ed
Export Defaultexport default ${1}
rsl
React Stateless Component import React from 'react';
const ${1} = () => (
);
export default ${1};
rcon
React Constructor': constructor(props) {
super(props);
this.state = {$1};
}
rcom
React Component import React, { Component } from 'react';
class $1 extends Component {
render() {
return (
<div>
<h1>$1 Component</h1>
</div>
);
}
}
export default ${1};
rcwu
React Component Will Mount componentWillMount() {
${1}
}
rcdm
React Component Did Mount componentDidMount() {
${1}
}
rcwrp
React Component Will Receive Props componentWillReceiveProps() {
${1}
}
rcum
React Component Did Unmount componentDidUnmount() {
${1}
}
rcwu
React Component Will Update componentDidWillUpdate() {
${1}
}
rcdu
React Component Did Update componentDidDidUpdate() {
${1}
}
rrat
React-Redux App Template import React from 'react';
import ReactDom from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
// install of react-router@3.0.1 or change line below and routing to reflect latest version
import { Router, Route, IndexRoute, browserHistory} from 'react-router';
import thunk from 'redux-thunk';
import App from './components/App';
import reducers from './reducers';
const createStoreWithMiddleWare = applyMiddleware(thunk)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router history={browserHistory}>
<Route path="/" component={App} >
<IndexRoute component={$1} />
<Route path="${2}" component={${3}} />
</Route >
</Router>
</Provider>,
document.getElementById('app')
);
rrr
React-Router Route <Route path="${1}" component={${2}} />
rncom
React-Native Component import React, { Component } from 'react';
import { Text, View } from 'react-native';
class ${1} extends Component {
render() {
return (
<View>
<Text>${1} Component</Text>
</View>
);
}
}
export default ${1};
rnsl
React-Native Stateless Component import React from 'react';
import { Text, View } from 'react-native';
const $1 = () => (
<View>
<Text>${1} Component</Text>
</View>
)
export default ${1};
ess
React Native EStyleSheet import EStyleSheet from 'react-native-extended-stylesheet';
const styles = EStyleSheet.create({
${1}
});
export default styles;
rrd
Redux Reducer export default (state = INITIAL_STATE, action) => {
switch(action.type) {
case ${1}:
default:
return state;
}
}
rrs
Redux Reducer Initial State const INITIAL_STATE: {
${1}
};
rat
Redux Action Typeexport const ${1} = "${1}"'
tdesc
Test Describe describe('${1}', () => {
${2}
})
tit
Test It it('should ${1}', () => {
${2}
});
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.