boykopetevboev/softuni-react-js-june-2020

COMPONENTS / ROUTING / SPA / FORMS / REACT HOOKS

---

Themes

• Components
• Routing
• Single Page Applicaion
• Forms
• React Hooks
• Authentication
• Advanced Techniques

JavaScript code snippets

Import

imn→

import 'module';

imp→

import moduleName from 'module';

imd→

import {  } from 'module';

Require

rqr→

require('package');

req→

const Name = require('Name');

Export

mde→

module.exports = { };

enf→

export const functionName = (params) => {};

edf→

export default function TEST(params) {};

ecl→

export default class className {};

Class

con→

constructor(params) {}

met→

methodName(params) {}

pge→

get propertyName() {}

pse→

set propertyName(value) {}

Various methods

anfn→

(params) => {}

nfn→

const name = (params) => {}

thenc→

.then(result => {})
.catch(err => {});

Loops

fre→

forEach loop in ES6 syntax

array.forEach(currentItem => {});

fof→

for ... of loop

for (const item of object) {}

fin→

for ... in loop

for (const item in object) {}

Destructing

dob→

const {propertyName} = object;

dar→

const [propertyName] = array;

Console

clg→

 console.log(object);

cer→

 console.error(object);

clt→

 console.table(object);

Reactjs

rcc→

class component skeleton

import React, { Component } from 'react';

class TEST extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}
export default TEST;

rrc→

class component skeleton with react-redux connect

import React, { Component } from 'react';
import { connect } from 'react-redux';

function mapStateToProps(state) {
    return {

    };
}
class TEST extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}
export default connect(
    mapStateToProps,
)(TEST);

rccp→

class component skeleton with prop types after the class

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class TEST extends Component {
    render() {
        return (
            <div>

            </div>
        );
    }
}
TEST.propTypes = {

};
export default TEST;

rcjc→

class component skeleton without import and default export lines

class TEST extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

rwwd→

class component without import statements

class TEST extends React.Component {
    constructor(props) {
        super(props);

        this.state = {};
    }
    render() {
        return (
            <div>
                
            </div>
        );
    }
}
TEST.propTypes = {

};
export default TEST;

rpc→

class pure component skeleton with prop types after the class

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

class TEST extends PureComponent {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}
TEST.propTypes = {

};
export default TEST;

rsc→

stateless component skeleton

import React from 'react';

const TEST = () => {
    return (
        <div>
            
        </div>
    );
};
export default TEST;

rscp→

stateless component with prop types skeleton

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

const TEST = props => {
    return (
        <div>
            
        </div>
    );
};
TEST.propTypes = {
    
};
export default TEST;

rscm→

memoize stateless component skeleton

import React, { memo } from 'react';

const TEST = memo(() => {
    return (
        <div>
            
        </div>
    );
});
export default TEST;

rscpm→

memoize stateless component with prop types skeleton

import React, { memo } from 'react';
import PropTypes from 'prop-types';

const TEST = memo((props) => {
    return (
        <div>
            
        </div>
    );
});
TEST.propTypes = {
    
};
export default TEST;

rsf→

stateless named function skeleton

import React from 'react';

function TEST(props) {
    return (
        <div>
            
        </div>
    );
}
export default TEST;

rsfp→

stateless named function with prop types skeleton

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

TEST.propTypes = {
    
};
function TEST(props) {
    return (
        <div>
            
        </div>
    );
}
export default TEST;

rsi→

stateless component with prop types and implicit return

import React from 'react';

const TEST = (props) => (
    
);
export default TEST;

fcc→

class component with flow types skeleton

import * as React from 'react';
type Props = {
  
};
type State = {
  
};
export class TEST extends React.Component<Props, State>{
  render() {
    return (
      <div>
        
      </div>
    );
  };
};

fsf→

stateless named function skeleton with flow types skeleton

import * as React from 'react';
type Props = {
  
};
export function TEST(props: Props) {
  return (
    <div>
      
    </div>
  );
};

fsc→

stateless component with flow types skeleton

import * as React from 'react';
type Props = {
    
};
export const TEST = (props: Props) => {
    return (
        <div>
            
        </div>
    );
};

rpt→

empty propTypes declaration

TEST.propTypes = {};

rdp→

empty defaultProps declaration

TEST.defaultProps = {};

con→

class default constructor with props

constructor(params) {}

conc→

class default constructor with props and context

constructor(props, context) {
    super(props, context);
    
}

est→

empty state object

this.state = {};

cwm→

componentWillMount method

componentWillMount() {}

cdm→

componentDidMount method

componentDidMount() {}

cwr→

componentWillReceiveProps method

componentWillReceiveProps(nextProps) {}

scu→

shouldComponentUpdate method

shouldComponentUpdate(nextProps, nextState) {}

cwup→

componentWillUpdate method

componentWillUpdate(nextProps, nextState) {}

cdup→

componentDidUpdate method

componentDidUpdate(prevProps, prevState) {}

cwun→

componentWillUnmount metho

componentWillUnmount() {}

gsbu→

getSnapshotBeforeUpdate method

getSnapshotBeforeUpdate(prevProps, prevState) {}

gdsfp→

static getDerivedStateFromProps method

static getDerivedStateFromProps(nextProps, prevState) {}

cdc→

componentDidCatch method

componentDidCatch(error, info) {}

ren→

render method

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

sst→

this.setState with object as parameter

this.setState();

ssf→

this.setState with function as parameter

this.setState((state, props) => { 
    return {  }
});

props→

this.props

this.props.

state→

this.state

this.state.

bnd→

binds the this of method inside the constructor

this. = this..bind(this);

disp→

MapDispatchToProps redux function

function mapDispatchToProps(dispatch) {
    return {
    }
}

PropTypes

Trigger	Content
pta→	PropTypes.array
ptar→	PropTypes.array.isRequired
ptb→	PropTypes.bool
ptbr→	PropTypes.bool.isRequired
ptf→	PropTypes.func
ptfr→	PropTypes.func.isRequired
ptn→	PropTypes.number
ptnr→	PropTypes.number.isRequired
pto→	PropTypes.object
ptor→	PropTypes.object.isRequired
pts→	PropTypes.string
ptsr→	PropTypes.string.isRequired
ptsm→	PropTypes.symbol
ptsmr→	PropTypes.symbol.isRequired
ptan→	PropTypes.any
ptanr→	PropTypes.any.isRequired
ptnd→	PropTypes.node
ptndr→	PropTypes.node.isRequired
ptel→	PropTypes.element
ptelr→	PropTypes.element.isRequired
pti→	PropTypes.instanceOf(ClassName)
ptir→	PropTypes.instanceOf(ClassName).isRequired
pte→	PropTypes.oneOf(['News', 'Photos'])
pter→	PropTypes.oneOf(['News', 'Photos']).isRequired
ptet→	PropTypes.oneOfType([PropTypes.string, PropTypes.number])
ptetr→	PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
ptao→	PropTypes.arrayOf(PropTypes.number)
ptaor→	PropTypes.arrayOf(PropTypes.number).isRequired
ptoo→	PropTypes.objectOf(PropTypes.number)
ptoor→	PropTypes.objectOf(PropTypes.number).isRequired
ptoos→	PropTypes.objectOf(PropTypes.shape())
ptoosr→	PropTypes.objectOf(PropTypes.shape()).isRequired
ptsh→	PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number})
ptshr→	PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired