// Tutorial //

The Best React Extension for VS Code

Published on September 21, 2020 · Updated on September 15, 2020
    Default avatar

    By James Quick

    The Best React Extension for VS Code

    While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

    When working with React, there’s lots of code that gets repeated over and over…and over and over again. Eventually, you start to think, “there’s got to be a better way”. Don’t worry, there is!

    In this article we will look at the ES7 React/Redux/GraphQL/React-Native snippets** **extension. Yes, it’s a mouthful to spell it all out, but it provides an amazing set of snippets that are invaluable when writing React code.

    The ES7 React/Redux/GraphQL/React-Native Snippets Extension

    This snippets extension (I won’t type the entire name out again) is incredibly popular with over 2 million downloads. To back this up, every big time developer I’ve heard talk about React on a podcast, YouTube video, etc. uses this extension and loves it.

    I’ve always said that developers are “intentionally lazy”. In other words, we find ways to constantly improve the speed at which we right code by writing less of it ourselves. These snippets making writing React much much faster!

    JavaScript Imports

    Although this article is focused on snippets for React, React code is primarily made up of modern JavaScript. For this reason, this extension includes several useful JavaScript snippets.

    In modern JavaScript, code is broken up to different modules and then reused in other areas using the import syntax. Here’s a couple of import snippets to consider.

    Import a default export.

    import moduleName from 'module'

    Import a named export.

    import { destructuredModule } from 'module'

    To get a little more specific to React, here’s a couple of React imports.

    Import React

    import React from 'react'

    Import React and Component.

    import React, { Component } from 'react'

    JavaScript Iteration

    Iterating through a list of items is not difficult but it does get repetetive (no pun intended).

    For each iteration

    arrayName.forEach(element => { }

    For of iteration

    for(let itemName of objectName { }

    For in Iteration

    for(let itemName in objectName { }

    JavaScript Functions

    Functions are obviously something that we write every day. Here’s a few different ways to generate them.

    Anonymous Function

    (params) => { }

    Named Function

    const functionName = (params) => { }

    React Lifecycle Methods

    Now, we can dive into more React specific stuff. Let’s start with Lifecycle Methods.


    componentDidMount = () => { }


    componentDidUpdate = (prevProps, prevState) => { }


    componentWillUnmount = () => { }

    React Components

    With the snippets we’ve mentioned so far, you have the ability to stub out most of a React component by combining them, but it gets better! Here’s some snippets that will generate an entire component for you!

    React Class Component

    import React, { Component } from 'react'
    export default class FileName extends Component {
      render() {
        return <div>$2</div>

    React Class Component With Prop Types

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    export class FileName extends Component {
      static propTypes = {}
      render() {
        return <div>$2</div>
    export default $1

    React Functional Component

    import React from 'react'
    export default function $1() {
      return <div>$0</div>

    Other Snippets

    We’ve covered a bunch of snippets in this article, but there are several more. Here’s a couple of categories that might be worth a deeper look!

    • React Native
    • Prop Types
    • Redux
    • Tests
    • Writing to the Console


    Never write code that you don’t have to. My only caveat to that statement comes if you are learning. If you’re new to a language or framework, avoid snippets while you’re learning. Write it all out for the experience! After that, SNIPPETS AWAY!

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us

    About the authors
    Default avatar
    James Quick


    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    2020 and still talking about Class Components? O_o

    IMHO there are only 3 useful snippets:

    1. For creating new Components with TypeScript import React from “react”;

    interface ComponentProps { }

    const TM_FILENAME_BASE = React.FC<ComponentProps> = () => { return <></>; }

    export default TM_FILENAME_BASE; 2-3. For creating useState and useCallback

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    card icon
    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Sign up
    card icon
    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We’d like to help.

    Learn more
    card icon
    Become a contributor

    You get paid; we donate to tech nonprofits.

    Learn more
    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow – whether you’re running one virtual machine or ten thousand.

    Learn more ->
    DigitalOcean Cloud Control Panel
    Get started for free

    Enter your email to get $200 in credit for your first 60 days with DigitalOcean.

    New accounts only. By submitting your email you agree to our Privacy Policy.

    © 2023 DigitalOcean, LLC.