Devkant Swargiary

React Boilerplate Generation

Boilerplate generation through the ES7 extension (dsznajder)

Devkant Swargiary's photo
Devkant Swargiary
·

1 min read

React Boilerplate Generation

Imagine you have an ally to help you generate the boilerplate while writing codes in React.js , so that you could be prevented from commiting petty mistakes such as missing out on tokens, parenthesis etc.

Well there's one extension in Visual Studio Code, ES7+ React/Redux/React-Native snippets. Credits to dsznajder, it's developer.

Let's get started.

  • To enable the extension. Search for ES7 in the extension search box and install ES7+ React/Redux/React-Native snippets by dsznajder.

Screen Shot 2022-01-21 at 12.41.12 PM.png

Suppose you want to write your codes in webapp.js file.

Screen Shot 2022-01-21 at 12.39.23 PM.png

  • Type rafce and press enter.

rafce stands for React Arrow Function Export Component.

Screen Shot 2022-01-21 at 12.39.38 PM.png

  • There you go, you have the React boilerplate code. Now you could breeze through writing functional codes without having to write the repetitive lines.

Screen Shot 2022-01-21 at 12.39.59 PM.png

Thanks for reading.

ReactJavaScript100DaysOfCode