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