WebStorm functional snippet React

Please try rsf - it creates a code like

import React from 'react';

function Func(props) {
  return (<div></div>);
}

export default Func;

I use the rsc live template a lot for new components.

This creates code like:

import React from 'react';

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

export default MyComponent;

Apart from that I created my own live template in the JavaScript category for creating arrow functions to save even more time, which creates code like:

const myFunction = () => {
    
};

Just add a new Live Template under the JavaScript category with this template text:

const $1$ = () => {
    $END$
};

And make sure to set applicable in to JavaScript and TypeScript and select the checkboxes for:

• statement
• top level statement

i. rsf - Creates a stateless React component as a named function without PropTypes.

import React from 'react';

function AppComponent(props) {
    return (
        <div></div>
    );
}

export default AppComponent;

ii. rsfp - Creates a stateless React component as a named function with PropTypes.

import React from 'react';
import PropTypes from 'prop-types';

AppComponent.propTypes = {
    
};

function AppComponent(props) {
    return (
        <div></div>
    );
}

export default AppComponent;