Simple React Snippets installs statistics

Simple React Snippets

The essential collection of React Snippets and commands.

Features

Only what you need and nothing more. No Redux. No React Native.

Simply, simple React snippets.

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.

Snippets

| Snippet | Renders |

| ccc | Class Component With Constructor | | cc | Class Component | | cdc | componentDidCatch | | cdm | componentDidMount | | cdu | componentDidUpdate | | cp | Context Provider | | cpf | Class Property Function | | cpc | Class Pure Component | | cwm | componentWillMount | | cwrp | componentWillReceiveProps | | cwu | componentWillUpdate | | cwun | componentWillUnmount | | ffc | Function Component | | gds | getDerivedStateFromProps | | gsbu | getSnapshotBeforeUpdate | | hoc | Higher Order Component | | impc | Import React / PureComponent | | imrd | Import ReactDOM | | imrc | Import React / Component | | imr | Import React | | imrs | Import React / useState | | imrse | Import React / useState useEffect | | impt | Import PropTypes | | ren | render | | rprop | Render Prop | | scu | shouldComponentUpdate | | sfc | Stateless Function Component (Arrow function) | | ssf | Functional setState | | ss | setState | | ucb | useCallback Hook | | uef | useEffect Hook | | usf | Declare a new state variable using State Hook |

| Snippet Prefix | Description |

| ccc | Class Component with Constructor | | cc | Class Component | | cdm | componentDidMount | | cdu | componentDidUpdate | | cpc | Class Pure Component | | cp | Declare a new Context Provider. Hit Tab to apply PascalCase to type names. | | cwrp | componentWillReceiveProps | | cwu | componentWillUpdate | | cwun | componentWillUnmount | | cwm | componentWillMount | | cdc | componentDidCatch | | fc | Function Component | | ffc | Function Syntax Component | | gds | getDerivedStateFromProps | | gsbu | getSnapshotBeforeUpdate | | impc | Import React, { PureComponent } | | imrd | Import ReactDOM | | imrc | Import React, { Component } | | imrse | Import React, { useState, useEffect } | | imrs | Import React, { useState } | | imr | Import React | | ren | render | | rprop | Render Prop | | sfc | Stateless Function Component | | sfnc | Stateless Function Named Component | | ssf | Functional setState | | ss | setState | | ucb | useCallback Hook | | uef | useEffect Hook | | usf | Declare a new state Variable using the State Hook. Hit Tab to apply CamelCase to function | | usr | Declare a new ref Variable using the Ref Hook. | | scu | shouldComponentUpdate |

Full Expansions

imr - Import React

imrc - Import React, Component

imrd - Import ReactDOM

imrs - Import React, useState

imrse - Import React, useState, useEffect

impt - Import PropTypes

impc - Import PureComponent

cc - Class Component

ccc - Class Component With Constructor

cpc - Class Pure Component

ffc - Function Component

sfc - Stateless Function Component (Arrow function)

cdm - componentDidMount

uef - useEffect Hook

ucb - useCallback Hook

cwm - componentWillMount

cwrp - componentWillReceiveProps

gds - getDerivedStateFromProps

scu - shouldComponentUpdate

cwu - componentWillUpdate

cdu - componentDidUpdate

cwun - componentWillUnmount

cdc - componentDidCatch

gsbu - getSnapshotBeforeUpdate

ss - setState

ssf - Functional setState

usf - Declare a new state variable using State Hook

_Hit Tab to apply CamelCase to function. e.g. [count, setCount]_

ren - render

rprop - Render Prop

hoc - Higher Order Component

cpf - Class Property Function

Commands

React: class to className

Changes all occurences of class in JSX to className. This transform is safe to run multiple times on any document. No text needs to be selected as the command is executed on the entire document.

Thank You! ❤️

While I wrote the initial version of this extension, many people (too many to name) have helped make it what it is today. From providing TypeScript definitions to keeping up with changing API and best practices. If you are enjoying this extension, you have the great React community to thank.

Description from the VS Code Marketplace listing.