{"id":13682782,"url":"https://github.com/xabikos/vscode-react","last_synced_at":"2026-01-12T01:03:00.993Z","repository":{"id":54678054,"uuid":"45790755","full_name":"xabikos/vscode-react","owner":"xabikos","description":"Contains the code snippets for Reactjs development in VS Code editor","archived":false,"fork":false,"pushed_at":"2020-02-18T22:12:08.000Z","size":835,"stargazers_count":385,"open_issues_count":13,"forks_count":132,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-30T09:51:33.493Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/xabikos.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-08T17:29:40.000Z","updated_at":"2025-03-15T02:14:36.000Z","dependencies_parsed_at":"2022-08-13T23:40:48.729Z","dependency_job_id":null,"html_url":"https://github.com/xabikos/vscode-react","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/xabikos/vscode-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xabikos%2Fvscode-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xabikos%2Fvscode-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xabikos%2Fvscode-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xabikos%2Fvscode-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xabikos","download_url":"https://codeload.github.com/xabikos/vscode-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xabikos%2Fvscode-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28330166,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"ssl_error","status_checked_at":"2026-01-12T00:36:15.229Z","response_time":60,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-08-02T13:01:53.127Z","updated_at":"2026-01-12T01:03:00.978Z","avatar_url":"https://github.com/xabikos.png","language":null,"funding_links":[],"categories":["Others","Index"],"sub_categories":["VSCode"],"readme":"# Reactjs\n\n## VS Code Reactjs snippets\n\n---\n\n[![Version](https://vsmarketplacebadge.apphb.com/version/xabikos.ReactSnippets.svg)](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets)\n[![Installs](https://vsmarketplacebadge.apphb.com/installs/xabikos.ReactSnippets.svg)](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets)\n[![Ratings](https://vsmarketplacebadge.apphb.com/rating/xabikos.ReactSnippets.svg)](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets)\n\nThis extension contains code snippets for [Reactjs][react] and is based on the awesome [babel-sublime-snippets][babelsublime] package.\n\n## Installation\n\nIn order to install an extension you need to launch the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions.\nThere you have either the option to show the already installed snippets or install new ones.\n\n## Supported languages (file extensions)\n\n- JavaScript (.js)\n- TypeScript (.ts)\n- JavaScript React (.jsx)\n- TypeScript React (.tsx)\n\n## Breaking change in version 2.0.0\n\nRemoved support for jsx language as it was giving errors in developer tools [#39](https://github.com/xabikos/vscode-react/issues/39)\n\n## Breaking change in version 1.0.0\n\nUp until verion 1.0.0 all the [JavaScript snippets][javacript] where part of the extension. In order to avoid duplication\nthe snippets are now included only to this extension and if you want to use them you have to install it explicitly.\n\n## Usage\n\nWhen installing the extension React development could be really fun\n![create react component](images/component.gif)\n\nAs VS Code from version 0.10.10 supports React components syntax inside js files the snippets are available for JavaScript language as well.\nIn the following example you can see the usage of a React stateless component with prop types snippets inside a js and not jsx file.\n![create react stateless component](images/stateless.gif)\n\n## Snippets\n\nBelow is a list of all available snippets and the triggers of each one. The **⇥** means the `TAB` key.\n\n|  Trigger | Content                                                          |\n| -------: | ---------------------------------------------------------------- |\n|   `rcc→` | class component skeleton                                         |\n|   `rrc→` | class component skeleton with react-redux connect                |\n|  `rrdc→` | class component skeleton with react-redux connect and dispatch   |\n|  `rccp→` | class component skeleton with prop types after the class         |\n|  `rcjc→` | class component skeleton without import and default export lines |\n|  `rcfc→` | class component skeleton that contains all the lifecycle methods |\n|  `rwwd→` | class component without import statements                        |\n|   `rpc→` | class pure component skeleton with prop types after the class    |\n|   `rsc→` | stateless component skeleton                                     |\n|  `rscp→` | stateless component with prop types skeleton                     |\n|  `rscm→` | memoize stateless component skeleton                             |\n| `rscpm→` | memoize stateless component with prop types skeleton             |\n|   `rsf→` | stateless named function skeleton                                |\n|  `rsfp→` | stateless named function with prop types skeleton                |\n|   `rsi→` | stateless component with prop types and implicit return          |\n|   `fcc→` | class component with flow types skeleton                         |\n|   `fsf→` | stateless named function skeleton with flow types skeleton       |\n|   `fsc→` | stateless component with flow types skeleton                     |\n|   `rpt→` | empty propTypes declaration                                      |\n|   `rdp→` | empty defaultProps declaration                                   |\n|   `con→` | class default constructor with props                             |\n|  `conc→` | class default constructor with props and context                 |\n|   `est→` | empty state object                                               |\n|   `cwm→` | `componentWillMount method`                                      |\n|   `cdm→` | `componentDidMount method`                                       |\n|   `cwr→` | `componentWillReceiveProps method`                               |\n|   `scu→` | `shouldComponentUpdate method`                                   |\n|  `cwup→` | `componentWillUpdate method`                                     |\n|  `cdup→` | `componentDidUpdate method`                                      |\n|  `cwun→` | `componentWillUnmount method`                                    |\n|  `gsbu→` | `getSnapshotBeforeUpdate method`                                 |\n| `gdsfp→` | `static getDerivedStateFromProps method`                         |\n|   `cdc→` | `componentDidCatch method`                                       |\n|   `ren→` | `render method`                                                  |\n|   `sst→` | `this.setState with object as parameter`                         |\n|   `ssf→` | `this.setState with function as parameter`                       |\n| `props→` | `this.props`                                                     |\n| `state→` | `this.state`                                                     |\n|   `bnd→` | `binds the this of method inside the constructor`                |\n|  `disp→` | `MapDispatchToProps redux function`                              |\n\nThe following table lists all the snippets that can be used for prop types.\nEvery snippet regarding prop types begins with `pt` so it's easy to group it all together and explore all the available options.\nOn top of that each prop type snippets has one equivalent when we need to declare that this property is also required.\n\nFor example ```pta``` creates the ```PropTypes.array``` and ```ptar``` creates the ```PropTypes.array.isRequired```\n\n| Trigger  | Content |\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| `ptsm→`  | `PropTypes.symbol,` |\n| `ptsmr→` | `PropTypes.symbol.isRequired,` |\n| `ptan→`  | `PropTypes.any,` |\n| `ptanr→` | `PropTypes.any.isRequired,` |\n| `ptnd→`  | `PropTypes.node,` |\n| `ptndr→` | `PropTypes.node.isRequired,` |\n| `ptel→`  | `PropTypes.element,` |\n| `ptelr→` | `PropTypes.element.isRequired,` |\n| `pti→`   | `PropTypes.instanceOf(ClassName),` |\n| `ptir→`  | `PropTypes.instanceOf(ClassName).isRequired,` |\n| `pte→`   | `PropTypes.oneOf(['News', 'Photos']),` |\n| `pter→`  | `PropTypes.oneOf(['News', 'Photos']).isRequired,` |\n| `ptet→`  | `PropTypes.oneOfType([PropTypes.string, PropTypes.number]),` |\n| `ptetr→` | `PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,` |\n| `ptao→`  | `PropTypes.arrayOf(PropTypes.number),` |\n| `ptaor→` | `PropTypes.arrayOf(PropTypes.number).isRequired,` |\n| `ptoo→`  | `PropTypes.objectOf(PropTypes.number),` |\n| `ptoor→` | `PropTypes.objectOf(PropTypes.number).isRequired,` |\n| `ptoos→` | `PropTypes.objectOf(PropTypes.shape()),` |\n| `ptoosr→`| `PropTypes.objectOf(PropTypes.shape()).isRequired,` |\n| `ptsh→`  | `PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),` |\n| `ptshr→` | `PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,` |\n\n[react]: https://facebook.github.io/react/\n[babelsublime]: https://github.com/babel/babel-sublime-snippets\n[javacript]: https://github.com/xabikos/vscode-javascript\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxabikos%2Fvscode-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxabikos%2Fvscode-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxabikos%2Fvscode-react/lists"}