This extension helps you to write ReactJs 10x faster.
- JavaScript (.js)
- ReactJS (.jsx)
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;| 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 |
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Happy coding!🤓</h1>
</div>
);
}
}
export default App;This extension developed by Sharafdin
GitHub |
Twitter |
LinkedIn