Code Snippets
This VS Code Extension provides snippets to make it easy to code.
References
React JS
react.class
React Component is named based on its filename
// MyComponent.js
import React, { Component } from "react";
class MyComponent extends Component {
render() {
return (
<div className="MyComponent">
</div>
);
}
}
export default MyComponent;
react.constructor
Creates the Constructor for a Class component
constructor(props) {
super(props);
this.state = {
};
}
react.mount
Creates the componentDidMount method for a Class component
componentDidMount() {
}
react.unmount
Creates the componentWillUnmount method for a Class component
componentWillUnmount() {
}
react.catch
Creates the componentDidCatch method for a Class component
componentDidCatch(error, info) {
}
react.props-state
Creates the getDerivedStateFromProps method for a Class component
static getDerivedStateFromProps(props, state) {
return null;
}
react.error-state
Creates the getDerivedStateFromError method for a Class component
static getDerivedStateFromError(error) {
}
react.render
Creates the render method for a Class component
ClassName is derived from its filename
render() {
return (
<div className="MyComponent">
</div>
);
}
react.export
Creates export statement for React component.
export default MyComponent;
react.export-redux
Creates export statement for React component with Redux.
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
React-Redux
react.connect-redux
Create everything needed to export the component with redux.
const mapStateToProps = state => {
return {
};
};
const mapDispatchToProps = {
};
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
redux.mapStateToProps
Creates mapStateToProps function.
const mapStateToProps = state => {
return {
};
};
redux.mapDispatchToProps
Creates mapDispatchToProps object.
const mapDispatchToProps = {
};
Redux
redux.reducer
Creates the starter code for Redux Reducer
const initialState = {
};
export default function(state = initialState, action) {
switch(action.type) {
default:
return state;
}
};
redux.action.const
Creates the Redux action constant
export const CONSTANT_NAME = "CONSTANT_NAME";
redux.action.function
Creates the Redux action function
export const functionName = () => {
return {
type: CONSTANT_NAME,
payload: {
},
};
};
redux.action.function.dispatch
Creates the Redux action function using dispatch
export const functionName = () => {
return dispatch => {
};
};
