{"id":15141862,"url":"https://github.com/muradmy00/es7-javascript-react-snippets","last_synced_at":"2026-02-09T19:06:28.109Z","repository":{"id":251905625,"uuid":"838803272","full_name":"muradmy00/ES7-Javascript-React-Snippets","owner":"muradmy00","description":"Help for shortcut in project","archived":false,"fork":false,"pushed_at":"2024-08-06T11:26:22.000Z","size":79,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T14:25:24.098Z","etag":null,"topics":["es7","js-snippets","nativescript","reactjs"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/muradmy00.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-06T11:25:36.000Z","updated_at":"2024-11-20T06:02:37.000Z","dependencies_parsed_at":"2024-08-06T13:39:46.551Z","dependency_job_id":null,"html_url":"https://github.com/muradmy00/ES7-Javascript-React-Snippets","commit_stats":null,"previous_names":["muradmy00/es7-javascript-react-snippets"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/muradmy00/ES7-Javascript-React-Snippets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muradmy00%2FES7-Javascript-React-Snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muradmy00%2FES7-Javascript-React-Snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muradmy00%2FES7-Javascript-React-Snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muradmy00%2FES7-Javascript-React-Snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/muradmy00","download_url":"https://codeload.github.com/muradmy00/ES7-Javascript-React-Snippets/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muradmy00%2FES7-Javascript-React-Snippets/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266524888,"owners_count":23942834,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es7","js-snippets","nativescript","reactjs"],"created_at":"2024-09-26T09:03:14.027Z","updated_at":"2026-02-09T19:06:23.199Z","avatar_url":"https://github.com/muradmy00.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# VS Code ES7 React/Redux/React-Native/JS snippets\n\n[![Version](https://vsmarketplacebadge.apphb.com/version/dsznajder.es7-react-js-snippets.svg)](https://vsmarketplacebadge.apphb.com/version-short/dsznajder.es7-react-js-snippets.svg)\n[![Install](https://vsmarketplacebadge.apphb.com/installs/dsznajder.es7-react-js-snippets.svg)](https://vsmarketplacebadge.apphb.com/installs-short/dsznajder.es7-react-js-snippets.svg)\n[![Ratings](https://vsmarketplacebadge.apphb.com/rating-short/dsznajder.es7-react-js-snippets.svg)](https://vsmarketplacebadge.apphb.com/rating-short/dsznajder.es7-react-js-snippets.svg)\n\nThis extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for [VS Code](https://code.visualstudio.com/)\n\nHere is direct link to marketplace [ES7 React/Redux/React-Native/JS Snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)\n\n## Supported languages (file extensions)\n\n- JavaScript (.js)\n- JavaScript React (.jsx)\n- TypeScript (.ts)\n- TypeScript React (.tsx)\n\n## Snippets info\n\nEvery space inside `{ }` and `( )` means that this is pushed into next line :)\n`$` represent each step after `tab`.\n\n## Basic Methods\n\n| Prefix  | Method                                              |\n| ------: | --------------------------------------------------- |\n| `imp→`  | `import moduleName from 'module'`                   |\n| `imn→`  | `import 'module'`                                   |\n| `imd→`  | `import { destructuredModule } from 'module'`       |\n| `ime→`  | `import * as alias from 'module'`                   |\n| `ima→`  | `import { originalName as aliasName} from 'module'` |\n| `exp→`  | `export default moduleName`                         |\n| `exd→`  | `export { destructuredModule } from 'module'`       |\n| `exa→`  | `export { originalName as aliasName} from 'module'` |\n| `enf→`  | `export const functionName = (params) =\u003e { }`       |\n| `edf→`  | `export default (params) =\u003e { }`                    |\n| `met→`  | `methodName = (params) =\u003e { }`                      |\n| `fre→`  | `arrayName.forEach(element =\u003e { }`                  |\n| `fof→`  | `for(let itemName of objectName { }`                |\n| `fin→`  | `for(let itemName in objectName { }`                |\n| `anfn→` | `(params) =\u003e { }`                                   |\n| `nfn→`  | `const functionName = (params) =\u003e { }`              |\n| `dob→`  | `const {propName} = objectToDescruct`               |\n| `dar→`  | `const [propName] = arrayToDescruct`                |\n| `sti→`  | `setInterval(() =\u003e { }, intervalTime`               |\n| `sto→`  | `setTimeout(() =\u003e { }, delayTime`                   |\n| `prom→` | `return new Promise((resolve, reject) =\u003e { }`       |\n| `cmmb→` | `comment block`                                     |\n| `cp→`   | `const { } = this.props`                            |\n| `cs→`   | `const { } = this.state`                            |\n\n## React\n\n| Prefix      | Method                                                                              |\n| ----------: | ----------------------------------------------------------------------------------- |\n| `imr→`      | `import React from 'react'`                                                         |\n| `imrd→`     | `import ReactDOM from 'react-dom'`                                                  |\n| `imrc→`     | `import React, { Component } from 'react'`                                          |\n| `imrcp→`    | `import React, { Component } from 'react' \u0026 import PropTypes from 'prop-types'`     |\n| `imrpc→`    | `import React, { PureComponent } from 'react'`                                      |\n| `imrpcp→`   | `import React, { PureComponent } from 'react' \u0026 import PropTypes from 'prop-types'` |\n| `imrm→`     | `import React, { memo } from 'react'`                                               |\n| `imrmp→`    | `import React, { memo } from 'react' \u0026 import PropTypes from 'prop-types'`          |\n| `impt→`     | `import PropTypes from 'prop-types'`                                                |\n| `redux→`    | `import { connect } from 'react-redux'`                                             |\n| `rconst→`   | `constructor(props) with this.state`                                                |\n| `rconc→`    | `constructor(props, context) with this.state`                                       |\n| `est→`      | `this.state = { }`                                                                  |\n| `cwm→`      | `componentWillMount = () =\u003e { }` DEPRECATED!!!                                      |\n| `cdm→`      | `componentDidMount = () =\u003e { }`                                                     |\n| `cwr→`      | `componentWillReceiveProps = (nextProps) =\u003e { }` DEPRECATED!!!                      |\n| `scu→`      | `shouldComponentUpdate = (nextProps, nextState) =\u003e { }`                             |\n| `cwup→`     | `componentWillUpdate = (nextProps, nextState) =\u003e { }` DEPRECATED!!!                 |\n| `cdup→`     | `componentDidUpdate = (prevProps, prevState) =\u003e { }`                                |\n| `cwun→`     | `componentWillUnmount = () =\u003e { }`                                                  |\n| `gdsfp→`    | `static getDerivedStateFromProps(nextProps, prevState) { }`                         |\n| `gsbu→`     | `getSnapshotBeforeUpdate = (prevProps, prevState) =\u003e { }`                           |\n| `ren→`      | `render() { return( ) }`                                                            |\n| `sst→`      | `this.setState({ })`                                                                |\n| `ssf→`      | `this.setState((state, props) =\u003e return { })`                                       |\n| `props→`    | `this.props.propName`                                                               |\n| `state→`    | `this.state.stateName`                                                              |\n| `rcontext→` | `const ${1:contextName} = React.createContext()`                                    |\n| `cref→`     | `this.${1:refName}Ref = React.createRef()`                                          |\n| `fref→`     | `const ref = React.createRef()`                                                     |\n| `bnd→`      | `this.methodName = this.methodName.bind(this)`                                      |\n\n## React Native\n\n| Prefix     | Method                                 |\n| ---------: | -------------------------------------- |\n| `imrn→`    | `import { $1 } from 'react-native'`    |\n| `rnstyle→` | `const styles = StyleSheet.create({})` |\n\n## Redux\n\n| Prefix       | Method                    |\n| -----------: | ------------------------- |\n| `rxaction→`  | `redux action template`   |\n| `rxconst→`   | `export const $1 = '$1'`  |\n| `rxreducer→` | `redux reducer template`  |\n| `rxselect→`  | `redux selector template` |\n\n## PropTypes\n\n| Prefix    | Method                                   |\n| --------: | ---------------------------------------- |\n| `pta→`    | `PropTypes.array`                        |\n| `ptar→`   | `PropTypes.array.isRequired`             |\n| `ptb→`    | `PropTypes.bool`                         |\n| `ptbr→`   | `PropTypes.bool.isRequired`              |\n| `ptf→`    | `PropTypes.func`                         |\n| `ptfr→`   | `PropTypes.func.isRequired`              |\n| `ptn→`    | `PropTypes.number`                       |\n| `ptnr→`   | `PropTypes.number.isRequired`            |\n| `pto→`    | `PropTypes.object`                       |\n| `ptor→`   | `PropTypes.object.isRequired`            |\n| `pts→`    | `PropTypes.string`                       |\n| `ptsr→`   | `PropTypes.string.isRequired`            |\n| `ptnd→`   | `PropTypes.node`                         |\n| `ptndr→`  | `PropTypes.node.isRequired`              |\n| `ptel→`   | `PropTypes.element`                      |\n| `ptelr→`  | `PropTypes.element.isRequired`           |\n| `pti→`    | `PropTypes.instanceOf(name)`             |\n| `ptir→`   | `PropTypes.instanceOf(name).isRequired`  |\n| `pte→`    | `PropTypes.oneOf([name])`                |\n| `pter→`   | `PropTypes.oneOf([name]).isRequired`     |\n| `ptet→`   | `PropTypes.oneOfType([name])`            |\n| `ptetr→`  | `PropTypes.oneOfType([name]).isRequired` |\n| `ptao→`   | `PropTypes.arrayOf(name)`                |\n| `ptaor→`  | `PropTypes.arrayOf(name).isRequired`     |\n| `ptoo→`   | `PropTypes.objectOf(name)`               |\n| `ptoor→`  | `PropTypes.objectOf(name).isRequired`    |\n| `ptsh→`   | `PropTypes.shape({ })`                   |\n| `ptshr→`  | `PropTypes.shape({ }).isRequired`        |\n| `ptany→`  | `PropTypes.any`                          |\n| `ptypes→` | `static propTypes = {}`                  |\n\n## GraphQL\n\n|`graphql→`|`import { compose, graphql } from 'react-apollo'`|\n\n### `expgql`\n\n```js\nexport default compose(graphql($1, { name: $2 }))($3)\n```\n\n## Console\n\n| Prefix | Method                              |\n| -----: | ----------------------------------- |\n| `clg→` | `console.log(object)`               |\n| `cas→` | `console.assert(expression,object)` |\n| `ccl→` | `console.clear()`                   |\n| `cco→` | `console.count(label)`              |\n| `cdi→` | `console.dir`                       |\n| `cer→` | `console.error(object)`             |\n| `cgr→` | `console.group(label)`              |\n| `cge→` | `console.groupEnd()`                |\n| `ctr→` | `console.trace(object)`             |\n| `cwa→` | `console.warn`                      |\n| `cin→` | `console.info`                      |\n\n## React Components\n\n### `rcc`\n\n```javascript\nimport React, { Component } from 'react'\n\nexport default class FileName extends Component {\n  render() {\n    return \u003cdiv\u003e$2\u003c/div\u003e\n  }\n}\n```\n\n### `rce`\n\n```javascript\nimport React, { Component } from 'react'\n\nexport class FileName extends Component {\n  render() {\n    return \u003cdiv\u003e$2\u003c/div\u003e\n  }\n}\n\nexport default $1\n```\n\n### `rcep`\n\n```javascript\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nexport class FileName extends Component {\n  static propTypes = {}\n\n  render() {\n    return \u003cdiv\u003e$2\u003c/div\u003e\n  }\n}\n\nexport default $1\n```\n\n### `rpc`\n\n```javascript\nimport React, { PureComponent } from 'react'\n\nexport default class FileName extends PureComponent {\n  render() {\n    return \u003cdiv\u003e$2\u003c/div\u003e\n  }\n}\n```\n\n### `rpcp`\n\n```javascript\nimport React, { PureComponent } from 'react'\nimport PropTypes from 'prop-types'\n\nexport default class FileName extends PureComponent {\n  static propTypes = {}\n\n  render() {\n    return \u003cdiv\u003e$2\u003c/div\u003e\n  }\n}\n```\n### `rpce`\n\n```javascript\nimport React, { PureComponent } from 'react'\nimport PropTypes from 'prop-types'\n\nexport class FileName extends PureComponent {\n  static propTypes = {}\n\n  render() {\n    return \u003cdiv\u003e$2\u003c/div\u003e\n  }\n}\n\nexport default FileName\n```\n\n### `rccp`\n\n```javascript\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nexport default class FileName extends Component {\n  static propTypes = {\n    $2: $3,\n  }\n\n  render() {\n    return \u003cdiv\u003e$4\u003c/div\u003e\n  }\n}\n```\n\n### `rfcp`\n\n```javascript\nimport React from 'react'\nimport PropTypes from 'prop-types'\n\nfunction $1(props) {\n  return \u003cdiv\u003e$0\u003c/div\u003e\n}\n\n$1.propTypes = {}\n\nexport default $1\n```\n\n### `rfc`\n\n```javascript\nimport React from 'react'\n\nexport default function $1() {\n  return \u003cdiv\u003e$0\u003c/div\u003e\n}\n```\n\n### `rfce`\n\n```javascript\nimport React from 'react'\n\nfunction $1() {\n  return \u003cdiv\u003e$0\u003c/div\u003e\n}\n\nexport default $1\n```\n\n### `rafcp`\n\n```javascript\nimport React from 'react'\nimport PropTypes from 'prop-types'\n\nconst $1 = props =\u003e {\n  return \u003cdiv\u003e$0\u003c/div\u003e\n}\n\n$1.propTypes = {}\n\nexport default $1\n```\n### `rafc`\n\n```javascript\nimport React from 'react'\n\nconst $1 = () =\u003e {\n  return \u003cdiv\u003e$0\u003c/div\u003e\n}\n\nexport default $1\n```\n\n### `rafce`\n\n```javascript\nimport React from 'react'\n\nconst $1 = () =\u003e {\n  return \u003cdiv\u003e$0\u003c/div\u003e\n}\n\nexport default $1\n```\n\n### `rmc`\n\n```javascript\nimport React, { memo } from 'react'\n\nexport default memo(function $1() {\n  return \u003cdiv\u003e$0\u003c/div\u003e\n})\n```\n\n### `rmcp`\n\n```javascript\nimport React, { memo } from 'react'\nimport PropTypes from 'prop-types'\n\nconst $1 = memo(function $1(props) {\n  return \u003cdiv\u003e$0\u003c/div\u003e\n})\n\n$1.propTypes = {}\n\nexport default $1\n```\n\n### `rcredux`\n\n```javascript\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\n\nexport class FileName extends Component {\n  static propTypes = {\n    $2: $3,\n  }\n\n  render() {\n    return \u003cdiv\u003e$4\u003c/div\u003e\n  }\n}\n\nconst mapStateToProps = state =\u003e ({})\n\nconst mapDispatchToProps = {}\n\nexport default connect(\n  mapStateToProps,\n  mapDispatchToProps,\n)(FileName)\n```\n\n### `reduxmap`\n\n```javascript\nconst mapStateToProps = state =\u003e ({})\n\nconst mapDispatchToProps = {}\n```\n\n## React Native Components\n\n### `rnc`\n\n```javascript\nimport React, { Component } from 'react'\nimport { Text, View } from 'react-native'\n\nexport default class FileName extends Component {\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText\u003e $2 \u003c/Text\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n### `rncs`\n\n```javascript\nimport React, { Component } from 'react'\nimport { Text, StyleSheet, View } from 'react-native'\n\nexport default class FileName extends Component {\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText\u003e $2 \u003c/Text\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n\nconst styles = StyleSheet.create({})\n```\n\n### `rnce`\n\n```javascript\nimport React, { Component } from 'react'\nimport { Text, View } from 'react-native'\n\nexport class FileName extends Component {\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText\u003e $2 \u003c/Text\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n\nexport default $1\n```\n\n### `rncredux`\n\n```javascript\nimport React, { Component } from 'react'\nimport { View, Text } from 'react-native'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\n\nexport class FileName extends Component {\n  static propTypes = {\n    $2: $3,\n  }\n\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText\u003e $2 \u003c/Text\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n\nconst mapStateToProps = state =\u003e ({})\n\nconst mapDispatchToProps = {}\n\nexport default connect(\n  mapStateToProps,\n  mapDispatchToProps,\n)(FileName)\n```\n\n## Others\n\n### `cmmb`\n\n```JS\n/**\n|--------------------------------------------------\n| $1\n|--------------------------------------------------\n*/\n```\n\n### `desc`\n\n```javascript\ndescribe('$1', () =\u003e {\n  $2\n})\n```\n\n### `test`\n\n```javascript\ntest('should $1', () =\u003e {\n  $2\n})\n```\n\n### `tit`\n\n```javascript\nit('should $1', () =\u003e {\n  $2\n})\n```\n\n### `stest`\n\n```javascript\nimport React from 'react'\nimport renderer from 'react-test-renderer'\n\nimport { ${1:ComponentName} } from '../${1:ComponentName}'\n\ndescribe('\u003c${1:ComponentName} /\u003e', () =\u003e {\n  const defaultProps = {}\n  const wrapper = renderer.create(\u003c${1:ComponentName} {...defaultProps} /\u003e)\n\n  test('render', () =\u003e {\n    expect(wrapper).toMatchSnapshot()\n  })\n})\n```\n\n### `srtest`\n```javascript\nimport React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Provider } from 'react-redux'\n\nimport store from 'src/store'\nimport { ${1:ComponentName} } from '../${1:ComponentName}'\n\ndescribe('\u003c${1:ComponentName} /\u003e', () =\u003e {\n  const defaultProps = {}\n  const wrapper = renderer.create(\n    \u003cProvider store={store}\u003e\n      \u003c${1:${TM_FILENAME_BASE}} {...defaultProps} /\u003e)\n    \u003c/Provider\u003e,\n  )\n\n  test('render', () =\u003e {\n    expect(wrapper).toMatchSnapshot()\n  })\n})\n```\n\n### `sntest`\n\n```javascript\nimport 'react-native'\nimport React from 'react'\nimport renderer from 'react-test-renderer'\n\nimport ${1:ComponentName} from '../${1:ComponentName}'\n\ndescribe('\u003c${1:ComponentName} /\u003e', () =\u003e {\n  const defaultProps = {\n\n  }\n\n  const wrapper = renderer.create(\u003c${1:ComponentName} {...defaultProps} /\u003e)\n\n  test('render', () =\u003e {\n    expect(wrapper).toMatchSnapshot()\n  })\n})\n```\n\n### `snrtest`\n\n```javascript\nimport 'react-native'\nimport React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Provider } from 'react-redux'\n\nimport store from 'src/store/configureStore'\nimport ${1:ComponentName} from '../${1:ComponentName}'\n\ndescribe('\u003c${1:ComponentName} /\u003e', () =\u003e {\n  const defaultProps = {}\n  const wrapper = renderer.create(\n    \u003cProvider store={store}\u003e\n      \u003c${1:ComponentName} {...defaultProps} /\u003e\n    \u003c/Provider\u003e,\n  )\n\n  test('render', () =\u003e {\n    expect(wrapper).toMatchSnapshot()\n  })\n})\n```\n\n### `hocredux`\n\n```javascript\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\n\nexport const mapStateToProps = state =\u003e ({\n\n})\n\nexport const mapDispatchToProps = {\n\n}\n\nexport const ${1:hocComponentName} = (WrappedComponent) =\u003e {\n  const hocComponent = ({ ...props }) =\u003e \u003cWrappedComponent {...props} /\u003e\n\n  hocComponent.propTypes = {\n  }\n\n  return hocComponent\n}\n\nexport default WrapperComponent =\u003e connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))\n```\n\n### `hoc`\n\n```javascript\nimport React from 'react'\nimport PropTypes from 'prop-types'\n\nexport default WrappedComponent =\u003e {\n  const hocComponent = ({ ...props }) =\u003e \u003cWrappedComponent {...props} /\u003e\n\n  hocComponent.propTypes = {}\n\n  return hocComponent\n}\n```\n# ES7-Javascript-React-Snippets\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuradmy00%2Fes7-javascript-react-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmuradmy00%2Fes7-javascript-react-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuradmy00%2Fes7-javascript-react-snippets/lists"}