Useful extensions for Visual Studio code when coding with React
After finishing my react project for Flatiron’s Software Engineering program, I want to share some useful tools that can make coding faster and more efficient. Just like how Rails have generators and scaffold to help coders with the initial setup or structure of the app, there are similar helpful extensions for React. I will be sharing two of the extensions that I found to be useful during my coding Journey, and they are ES7 + React/Redux/React-Native Snippets and Reactjs Code snippets.
However, I don’t recommend these two extensions to coders that is just learning about React. The extension provides a lot of shortcut and will auto import libraries or components for the user. Although it saves a lot time and typing, it does encourage coders to take many things for granted and become ignorant to a lot of the basics information. But once the coders have fully grasp the structure and libraries of React, the extensions will make coding very time efficient. Since components are at the core of React, and components are designed to be reusable piece, there is bound to be a certain pattern. When there is a pattern, that is bound to be certain level of code repetition. With short code snippets provided by the two extension, coders can cut down on writing a lot of repetitive code.
Once the user install the extensions, the coders can start utilizing the extension without any other setup. The coder can enter different snippets of code to generate different empty framework of react components.
Once a corresponding code snipped is entered/triggered, a selection menu will pop out and the user can either hand pick to confirm the snipped or simply press tab to skip the confirmation and generate the skeletal component right away.
For Reactjs code snippets, I have listed below a few of the code snippets that is frequently used for different React components.
- rcc, can be used to generate a bare skeletal structure of a react class component.
- rrc, can be used to generate a react class component with react-redux connect library(comes with mapStateToProps). Can be used with the disp snippets to add mapDispatchToProps to the component (or use rrdc below).
- rrdc, can be used to generate a bare skeleton of a react class component with react-redux connect library. Comes with mapStateToProps and mapDispatchToProps function.
- rsf can be used to generate a skeletal of a react functional component with prop.
- rsi can be used to generate a skeletal of a react functional component with prop and implicit return
There also other small time saving code snippets such as con, conc, est, cdm, sst, ssf, and disp. These snippets will generate constructor, state, setState, and mapDispatchToProps code blocks. Since these code generally does not take too long to write out, they are not as useful as skeletal components so you can explore them in your free time. The detailed documentation for Reactjs code snippets can be found here https://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md.
Code snippets that are worth mentioning for the ES7 + React/Redux/React-Native Snippets include:
*rxreducer, the code snippet will generate a skeletal reducer template with an initial state and switch statement for coders.
*reduxmap, the code snippet will generate skeletal functions for mapStateToProps and mapDispatchToProps function incase coders forgot to add it from the begining.
There are many other useful code blocks or code snippets, but for novice coders like me, fully utilizing the one listed above should be sufficient. Although the two extensions have a lot of overlapping code snippets, but each extension comes with varying code blocks. The detailed documentation for ES7 + React/Redux/React-Native Snippet s can be found here https://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md.
