Obie 0bie

Understanding ES6 Concepts

Variables
Temporal Dead Zone (TDZ)
Destructuring
[ES6 property value shorthand](#es6-property-value-shorthandhttpsponyfoocomarticleses6-object-literal-features-in-depth)
Template strings
Classes
Arrow functions
Modules

Boilerplate structure for working w/ classes in ES5

function Module(variable1, variable2) {
    this.variable1 = variable1;
    this.variable2 = variable2;
}
Module.prototype = {
   constructor: Module, // specifies the constructor for new instances of the Module class
   currentScope: function() {console.log(this);},

It is considered best practice to manage scope using the Module Pattern
It enables access to both a public and private scope in your code
In basic terms you may get this done by wrapping a function inside a function like so:

var Module = (function() {
  var _privateMethod1 = function() {
    console.log("private 1");  
  };
 var _privateMethod2 = function() {

Guideline: Z-Index Scale

The default scale is a set of variables numbered from 1 - 9 E.g:

/* Base z-index scale */

:root {
  --zIndex-1: 10;
 --zIndex-2: 20;

React Notes

JSX

JSX adds XML syntax to JS
JSX tags have a tag name, attributes, and children (similar to XML)
Similar to JS, quotes in JSX attributes represent strings. Numeric values and/or expressions should be wrapped in a curly brace.

React Notes 2

To prevent syntax repetition you can abstract common properties from the React object using ES6 Destructuring E.g:

//before
import React from 'react';

class Searchbar extends React.Component {
 static propTypes = {

Intro:

Resources:

Notes:

An ES2016 decorator is an expression which returns a function and can take a target, name and property descriptor as arguments.
A decorator takes an argument (the function being decorated) and returns the same function with added functionality.
Decorators are helpful for anything you want to transparently wrap with extra functionality.

Its simplest form (React):

const HOC = (Component) => (props) => <Component {...props} />;

npm commands

Update npm: npm install npm --global || npm i npm -g
New package: npm init --yes || npm init -y
Scopes: npm init --scope=myusername npm install @myusername/mypackage require('@myusername/mypackage')
Add dependencies: npm install --save package-name || npm i -s package-name
Add devDependencies: npm install --save-dev package-name || npm i -D package-name
Skip devDependencies: npm install --production
Add bundled dependencies: npm install --save --save-bundle package-name
Update dependencies: npm outdated && npm update

	const overlay = (element) => {
	const newElement = document.createElement(element);
	newElement.style.height = '100vh';
	return newElement;
	};

	const onEvent = (inputType, DOMElement, callback) => {
	if (DOMElement.addEventListener){
	DOMElement.addEventListener(inputType, callback);
	}