Tips To Increase Productivity In A React Application

Introduction

In this blog, you will learn about productivity tools and code formatting extensions in a React App using Visual Studio Code. This will help you to achieve faster development.

Step 1

Install Visual Studio Code. If you already have it installed, install a prettier code formatter. It is an opinionated code formatter that enforces a consistent style by parsing your code and re-printing it with its own rules. It takes the maximum line length into account, wrapping code when necessary.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Step 2

Now Go to File > Preferences > Settings

Step 3

Install simple react snippets, an essential collection of React Snippets and commands.

These snippets were selected carefully from my own day-to-day React use. Not everything in React is included here. This is a hand-selected set of snippets that work the way that you would expect, not just a copy of the documentation.

https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets

To import a react module type imr and tab. It will import your react module.

imr - Import React

import React from 'react';

To create a class, type cc and tab. It will create a class component.

cc - Class Component

class | extends Component {
state = { | },
render() {
return ( | );
}
}

To create a class with a constructor, type ccc and tab. It will create a class component with a constructor.

ccc - Class Component With Constructor

class | extends Component {
constructor(props) {
super(props);
this.state = { | };
}
render() {
return ( | );
}
}
export default |;

Snippet	Renders
imr	Import React
imrc	Import React / Component
imrs	Import React / useState
imrse	Import React / useState useEffect
impt	Import PropTypes
impc	Import React / PureComponent
cc	Class Component
ccc	Class Component With Constructor
cpc	Class Pure Component
sfc	Stateless Function Component
cdm	componentDidMount
uef	useEffect Hook
cwm	componentWillMount
cwrp	componentWillReceiveProps
gds	getDerivedStateFromProps
scu	shouldComponentUpdate
cwu	componentWillUpdate
cdu	componentDidUpdate
cwu	componentWillUpdate
cdc	componentDidCatch
gsbu	getSnapshotBeforeUpdate
ss	setState
ssf	Functional setState
usf	Declare a new state variable using State Hook
ren	render
rprop	Render Prop
hoc	Higher Order Component