Typescript React code snippets

1. tsrcc class component skeleton

import * as React from 'react';

export interface IAppProps {
}

export default class App extends React.Component<IAppProps> {
  public render() {
    return (
      <div>
        
      </div>
    );
  }
}

2. tsrcfull class component skeleton with Props, State, and constructor

import * as React from 'react';

export interface IAppProps {
}

export interface IAppState {
}

export default class App extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppProps) {
    super(props);

    this.state = {
    }
  }

  public render() {
    return (
      <div>
        
      </div>
    );
  }
}

3. tsrcjc class component skeleton without import and default export lines

export interface IAppProps {
}

class App extends React.Component<IAppProps> {
  public render() {
    return (
      <div>
        
      </div>
    );
  }
}

4. tsrpcc class purecomponent skeleton

import * as React from 'react';

export interface IAppProps {
}

export default class App extends React.PureComponent<IAppProps> {
  public render() {
    return (
      <div>
        
      </div>
    );
  }
}

5. tsrpcjc class purecomponent without import and default export lines

export interface IAppProps {
}

class App extends React.PureComponent<IAppProps> {
  public render() {
    return (
      <div>
        
      </div>
    );
  }
}

6. tsrpfc pure function component skeleton

import * as React from 'react';

export interface IAppProps {
}

export function App (props: IAppProps) {
  return (
    <div>
      
    </div>
  );
}

7. tsdrpfc stateless functional component with default export

import * as React from 'react';

export interface IAppProps {
}

export default function App (props: IAppProps) {
  return (
    <div>
      
    </div>
  );
}

8. tsrsfc stateless functional component

import * as React from 'react';

interface IAppProps {
}

const App: React.FunctionComponent<IAppProps> = (props) => {
  return ;
};

export default App;

9. conc class default constructor with props and context

constructor(props) {
  super(props);
  
}

10. cwm componentWillMount method

componentWillMount() {
  
}

11. ren render method

public render() {
  return (
    
  );
}

12. cdm componentDidMount method

componentDidMount() {
  
}

13. cwrp componentWillReceiveProps method

componentWillReceiveProps(nextProps: ) {
  
}

14. scu shouldComponentUpdate method

shouldComponentUpdate(nextProps: , nextState) {
  
}

15. cwu componentWillUpdate method

componentWillUpdate(nextProps: , nextState) {
  
}

16. cdu componentDidUpdate method

componentDidUpdate(prevProps: , prevState) {
  
}

17. cwum componentWillUnmount method

componentWillUnmount() {
  
}

18. gdsfp getDerivedStateFromProps method

static getDerivedStateFromProps(nextProps: any, prevState: any) {
  
}

19. gsbu getSnapshotBeforeUpdate method

getSnapshotBeforeUpdate(prevProps: any, prevState: any) {
  
}

20. sst this.setState with object as parameter

this.setState();

21. bnd binds the this of method inside the constructor

this. = this..bind(this);

22. met simple method

methodName = (e) => {
  
}

23. tscntr react redux container skeleton

import * as React from 'react';
import { connect } from 'react-redux'

export interface IAppProps {
}

class App extends React.Component<IAppProps> {
  public render() {
    return (
      <div>
        
      </div>
    );
  }
}

const mapState2Props = state => {
  return {
  };
}

export default connect(mapState2Props)(App);

24. imt create a import

import {  } from '';

https://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescript

Trigger	Content
tsrcc→	class component skeleton
tsrcfull→	class component skeleton with Props, State, and constructor
tsrcjc→	class component skeleton without import and default export lines
tsrpcc→	class purecomponent skeleton
tsrpcjc→	class purecomponent without import and default export lines
tsrpfc	pure function component skeleton
tsdrpfc	stateless functional component with default export
tsrsfc	stateless functional component
conc→	class default constructor with props and context
cwm→	componentWillMount method
ren→	render method
cdm→	componentDidMount method
cwrp→	componentWillReceiveProps method
scu→	shouldComponentUpdate method
cwu→	componentWillUpdate method
cdu→	componentDidUpdate method
cwum→	componentWillUnmount method
gdsfp→	getDerivedStateFromProps method
gsbu	getSnapshotBeforeUpdate method
sst→	this.setState with object as parameter
bnd→	binds the this of method inside the constructor
met→	simple method
tscntr→	react redux container skeleton
imt	create a import