Visual Studio Code functional snippet React

Question

Does anybody knows what's the shortcut for React functional components snippet in Visual Studio? I have the ES7 React/Redux/GraphQL/React-Native snippets extension enabled in the editor.

Answer 1

If you wish to create React functional component snippet in VS Code follow these steps.

1. Go to File - Preferences - Configure User Snippets
2. Dropdown will appear. Select New Global Snippets file and type <any-name> you want and hit enter
3. File should be created with the following name <any-name>.code-snippet
4. Paste this code. Anything you type in prefix will be your component trigger

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from \"react\"",
      "",
      "const ${1:name} = (props) => {",
      "  return (",
      "    <div>",
      "      $2",
      "    </div>",
      "  )",
      "};",
      "",
      "export default ${1:name};",
      ""
    ],
    "description": "React Functional Component"
  }
}

5. Save the file
6. Type (in this case) rfc and hit enter.

Answer 2

I used the rafce live template for new components.

This creates code like:

import React from 'react';

const MyComponent = () => {
    return (
        <div>
        
        </div>
    );
};

export default MyComponent;