{
// Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Create Functional React Component": {
"prefix": "cfrc",
"body": [
"import React from 'react';",
"",
"const ${TM_FILENAME_BASE} = () => {",
" return (",
" <>",
" ${TM_FILENAME_BASE}",
" </>",
" );",
"}",
"",
"export default ${TM_FILENAME_BASE};"
],
"description": "Create Functional React Component"
},
"Styled Functional React Component": {
"prefix": "sfrc",
"body": [
"import React from 'react';",
"import styled from 'styled-components';",
"",
"const ${TM_FILENAME_BASE}Block = styled.div``;",
"",
"const ${TM_FILENAME_BASE} = () => {",
" return (",
" <${TM_FILENAME_BASE}Block>",
" ${TM_FILENAME_BASE}",
" </${TM_FILENAME_BASE}Block>",
" );",
"}",
"",
"export default ${TM_FILENAME_BASE};"
],
"description": "Styled Functional React Component"
},
"Create Class React Component": {
"prefix": "ccrc",
"body": [
"import React, { Component } from 'react';",
"",
"class ${TM_FILENAME_BASE} extends Component {",
" render() {",
" return (",
" ${TM_FILENAME_BASE}",
" )",
" }",
"}",
"",
"export default ${TM_FILENAME_BASE};"
],
"description": "Create Class React Component"
},
"Create Redux Module": {
"prefix": "crdm",
"body": [
"import { createAction, handleActions } from 'redux-actions';",
"// import { takeLatest, call } from 'redux-saga/effects';",
"// import createRequestSaga, { createRequestActionTypes } from '../lib/createRequestSaga';",
"",
"const INITIALIZE = '${TM_FILENAME_BASE}/INITIALIZE';",
"const CHANGE_VALUE = '${TM_FILENAME_BASE}/CHANGE_VALUE';",
"// const [ACTION, ACTION_SUCCESS, ACTION_FAILURE] = createRequestActionTypes('${TM_FILENAME_BASE}/ACTION');",
"// const [REACTION, REACTION_SUCCESS, REACTION_FAILURE] = createRequestActionTypes('${TM_FILENAME_BASE}/REACTION');",
"",
"export const ${TM_FILENAME_BASE}Initialize = createAction(INITIALIZE);",
"export const ${TM_FILENAME_BASE}ChangeValue = createAction(CHANGE_VALUE, ({key, value}) => ({key, value}));",
"// export const action = createAction(ACTION, data => data);",
"",
"// const actionSaga = createRequestSaga(ACTION, actionAPI.action);",
"// function reactionSaga() {",
"// try {",
"// yield call(actionAPI.reaction);",
"// } catch (e) {",
"// console.error(e);",
"// }",
"// }",
"",
"export function* ${TM_FILENAME_BASE}Saga() {",
" // yield takeLatest(ACTION, actionSaga);",
" // yield takeLatest(REACTION, reactionSaga);",
"}",
"",
"const initialState = {",
" ${TM_FILENAME_BASE}: null,",
" error: null",
"};",
"",
"const ${TM_FILENAME_BASE} = handleActions(",
" {",
" [INITIALIZE]: () => initialState,",
" [CHANGE_VALUE]: (state, { payload: {key, value}}) => ({",
" ...state,",
" [key]: value,",
" }),",
" },",
" initialState,",
");",
"",
"export default ${TM_FILENAME_BASE};"
],
"description": "Create Redux Module"
}
}
