React Fast and Productive Extension

Snippet	Content
`rgctx →`	React Generate Context
`rue →`	React useEffect
`rus →`	React useState
`ref →`	React Export Function
`recf →`	React Export Const Function
`refn →`	React Export Function Nested
`recfn →`	React Export Const Function Nested
`redf →`	React Export Default Function
`redcf →`	React Export Default Const Function
`redfn →`	React Export Default Function Nested
`redcfn →`	React Export Default Const Function Nested
`ref-ts →`	React Export Function Typescript
`refn-ts →`	React Export Function Nested Typescript
`redf-ts →`	React Export Default Function Typescript
`redfn-ts →`	React Export Default Function Nested Typescript
`rip-ts →`	React Interface Props Typescript
`rgctx-ts →`	React Generate Context Typescript
`rns →`	React Native Styles
`rnsb →`	React Native Styles Blocks
`jsf →`	Javascript Function
`jscf →`	Javascript Const Function
`jsaf →`	Javascript Async Function
`jsac →`	Javascript Async Const Function
`jsfetch →`	Javascript Fetch
`jsafetch →`	Javascript Async Fetch
`cgm →`	Create Generate Media
`sc →`	Styled Components
`sct →`	Sytled Components Theme
`sct:css →`	Sytled Components Theme CSS

hover text

start + ((modifier + action) || hook) + variant

Starts with

r → Refers to React environment;
rn → Refers to React Native environment;
js → JavaScript.

Modifiers

e → export;
ed → export default;
a → async.

Action

f → function;
c → função com constante;
s → styles;
sb → style block;
sc → styled components.

Variants (if available)

n → nested (set component name same as folder name);
t → use the TypeScript variant.

Using with React

Everything related to React environment will use the r prefix.

Specials Variant

These modifiers, at the moment, are available only within a React environment. They must be added at the end of the snippet query and must be in alphabetical order.

n → It means that your current .tsx/.jsx file is nested into a folder. If used it will automatically set the created function’s name to be the same as the folder above (father) your file.
t → This indicates that you want to use the TypeScript variant, if exists, of this snippet.

Hooks

Can replace the modifiers and starts with *u (use)* followed by the first letter of the hook’s name:

Snippet	Content
`rue`	React useEffect
`rus`	React useState

hover text

Exporting Components

By default, when you use the snippet to create/export a function/component it will use the current .tsx/.jsx to set its name. If you want it to use the folder’s name it is nested in, use the n variant, as you can see here

React ( .js and Native)

When you are creating a new component you can use the following snippets to automatically generate its structure:

Snippet	Content
`ref`	React Export Function
`redf`	React Export Default Function
`recf`	React Export Const Function
`redcf`	React Export Default Const Function

hover text

If you need a typescript function with a Props Interface, you can just add a t to the end of the snippet:

Snippet	Content
`reft`	React Export Function (TypeScript)
`redft`	React Export Default Function (TypeScript)

hover text

Now, if you want to go wild and use the nested and typescript variant AT THE SAME TIME (insane…) you should do this way:

Snippet	Content
`refnt`	React Export Function (Nested and TypeScript)
`redfnt`	React Export Default Function (Nested and TypeScript)

hover text

React Native (only)

Everything exclusively related to React Native will use the rn prefix. When you are creating the styles of your component, you can use the following snippets to get it done quickly:

Snippet	Content
`rns`	React Native Styles
`rnsb`	React Native Style Block
`rnsc`	React Native Styled Components

These only work on .ts/.js files, because are intended to be used as styles snippets

Using with JavaScript/TypeScript

Everything related to JavaScript will use the js prefix. You can create functions, arrow functions and

Snippet	Content
`jsf`	JavaScript Function
`jscf`	JavaScript Const Function
`jsaf`	JavaScript Async Function
`jsac`	JavaScript Async Const Function

hover text

JavaScript/TypeScript Utils

This section still in development and will be completed in future updates. Right now you can use soma snippets to quickly access some built-in JavaScript methods.

Fetch

Here you can see some snippets to create a .fetch. Te async one will create a

Snippet	Content
`jsfetch`	JavaScript Fetch
`jsafetch`	JavaScript Async Fetch

React Fast and Productive

EvertonVargas

React Fast and Productive Extension

Starts with

Modifiers

Action

Variants (if available)

Using with React

Specials Variant

Hooks

Exporting Components

React ( .js and Native)

React Native (only)

Using with JavaScript/TypeScript

JavaScript/TypeScript Utils

Fetch

Contribution

Éverton Vargas

Luca Rampinelli