https://github.com/sharafdin/better-react-js-code-snippet-extension

Simply ReactJS Code Snippet.
https://github.com/sharafdin/better-react-js-code-snippet-extension

code-snippets json reactjs vscode-extension

Last synced: 3 months ago
JSON representation

Simply ReactJS Code Snippet.

• Host: GitHub
• URL: https://github.com/sharafdin/better-react-js-code-snippet-extension
• Owner: sharafdin
• License: mit
• Created: 2023-07-13T13:57:28.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-14T15:06:01.000Z (12 months ago)
• Last Synced: 2024-02-15T15:57:49.789Z (12 months ago)
• Topics: code-snippets, json, reactjs, vscode-extension
• Homepage: https://marketplace.visualstudio.com/items?itemName=Sharafdin.better-reactjs-code-snippet
• Size: 35.2 KB
• Stars: 20
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Better React JS Code Snippet

This extension helps you to write ReactJs 10x faster.

## Supported languages (file extensions)

- JavaScript (.js)

- ReactJS (.jsx)

## How to use this extension?

Well, Create js or jsx file and start writing your code by using this extension, Simply writing the prefix you want, for example: 


To generate a function component simply write **rfc** and enter or tab it will generate this:

```javascript

import React from 'react';

function Name() {

  return (

    


      
Name

    

  );

}


export default HelloWorld;

```

## The methods are available for now

|  Prefix | Method                                              |

| ------: | --------------------------------------------------- |

|  `ir` | `Imports react`                   |

|  `irc` | `Imports React, { Component }`                                   |

|  `irrd` | `Imports react and ReactDOM`       |

|  `ird` | `Imports ReactDOM`       |

|  `irs` | `Imports React & { useState }`                   |

|  `irbh` | `Imports React & the basic hooks` |

|  `ibh` | `Imports the basic hooks { useState, useEffect, useContext }`                         |

|  `ipt` | `import PropTypes from 'prop-types';`       |

|  `ipc` | `Imports React & { PureComponent }` |

|  `rcc` | `Creates a React component class with ES6 module system`       |

|  `rcpc` | `React Class Pure Component`                    |

|  `cpc` | `Adds a default constructor for the class that contains props and context as arguments`                      |

|  `rrdc` | `Creates a React component class connected to redux with dispatch`                  |

|  `rafc` | `Creates a React arrow function component`                |

|  `rafcp` | `Creates a stateless React component as a named function with PropTypes`                |

|  `rfc` | `Creates a React function component`                |

|  `afsc` | `Arrow Function Syntax Component`                |

|  `fsc` | `Function Syntax Component`                |

|  `ueh` | `useEffect Hook`              |

|  `ush` | `Declare a state variable using the useState Hook`              |

|  `uch` | `Declare a context variable using the useContext Hook`              |

| `urh` | `Declare a ref variable using the useRef Hook`                                   |

| `urdh` | `Declare a reducer variable using the useReducer Hook`                                   |

| `umh` | `Declare a memo variable using the useMemo Hook`                                   |

| `uth` | `Declare a transition variable using the useTransition Hook`                                   |

| `ren` | `Render`                                   |

| `cdm` | `componentDidMount`                                   |

| `cwm` | `componentWillMount`                                   |

| `cwrp` | `componentWillReceiveProps`                                   |

| `gds` | `getDerivedStateFromProps`                                   |

| `scu` | `shouldComponentUpdate`                                   |

| `cwu` | `componentWillUpdate`                                   |

| `cdu` | `componentDidUpdate`                                   |

| `cwun` | `componentWillUnmount`                                   |

| `cdc` | `componentDidCatch`                                   |

| `gsbu` | `getSnapshotBeforeUpdate`                                   |

| `sst` | `Performs a shallow merge of nextState into current state`                                   |

|                                |

### `Keep Coding`

```javascript

import React from 'react';

class App extends React.Component {

  render() {

    return (

      


        
Happy coding!🤓

      

    );

  }

}


export default App;

```

### Developers

This extension developed by [Sharafdin](https://www.sharafdin.com) 


[GitHub](https://github.com/sharafdin) |

[Twitter](https://twitter.com/sharafdincorp) |

[LinkedIn](https://www.linkedin.com/company/sharafdin/)