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:

import React from 'react';

function Name() {
  return (
    <div>
      <div>Name</div>
    </div>
  );
}

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`

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Happy coding!🤓</h1>
      </div>
    );
  }
}

export default App;

Developers

This extension developed by Sharafdin
GitHub | Twitter | LinkedIn

Better ReactJS Code Snippet

Mr Sharafdin