Please enable JavaScript.

Coggle requires JavaScript to display documents.

FED (JS (Arrays (indexOf() const a = [2,9,9] a.indexOf(2); //- a…

FED

Arrays

indexOf()

const a = [2,9,9]
a.indexOf(2); //-
a.indexOf(7); // -1

Concat

var num1 = [1, 2, 3],
    num2 = [4, 5, 6],
    num3 = [7, 8, 9];
var nums = num1.concat(num2, num3);
console.log(nums); 
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

Slice

var a = ['zero', 'one', 'two', 'three'];
var sliced = a.slice(1, 3);
console.log(a);      // ['zero', 'one', 'two', 'three']
console.log(sliced); // ['one', 'two']

filter

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];
var longWords = words.filter(word => word.length > 6);
// Filtered array longWords is ["exuberant", "destruction", "present"]

forEach

colors.forEach((color) => console.log(color))

Map

numbers.map((number,index) => number*2)

find

users.find((user) => user.name === "dror")

every/some

array.every/some((val) => val > 2) 
//[1,2,3,4] => false/true
//[3,4,5] => true/true

reduce

numbers.reduce((sum,number) => number + sum, 0)

Rest and Spred

[...array1, ...array2]
function doSomething(...numbers) // can add multiple numbers as arrguments

for of

for (let color of colors) {
  //dosomthing
}

Unshift

var a = [1, 2, 3];
a.unshift(4, 5);

console.log(a); // [4, 5, 1, 2, 3]

from

randomArray(length){
  return Array.from({length: length}, () => ~~(Math.random() * 400));
}

splice

myFish.splice(2, 1); // remove 1 item at 2-index position

reverse

var a = ['one', 'two', 'three'];
a.reverse(); 
console.log(a); // ['three', 'two', 'one']

join

var a = ['Wind', 'Rain', 'Fire'];
a.join();    // 'Wind,Rain,Fire'
a.join('-'); // 'Wind-Rain-Fire'

Lodash

_.keyBy or mapKeys

var array = [
  { 'dir': 'left', 'code': 97 },
  { 'dir': 'right', 'code': 100 }
];
_.keyBy(array, 'dir');
// => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }

_.get

var object = { 'a': [{ 'b': { 'c': 3 } }] };
_.get(object, 'a[0].b.c');
// => 3

_.orderBy

_.orderBy(users, ['user', 'age'], ['asc', 'desc']);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

_.keys

_.keys({a:"hello",b:"world"}) 
//['a','b'] Returns the array of property names.

_.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
  console.log(key);
});
// => Logs 'a' then 'b' (iteration order is not guaranteed).

_.map

const obj = {
  1234: {name: 'dror', age: 31},
  5678 : {name: 'joe', age: 32}
}

const arr = _.map(dobj, (value,index) => {
  return {...value, id: index}; 
})
// => [{id:1234, name:'dror',age:31},{id:5678,name:'joe',age:32}]

Creates an array of values by running each element in collection thru iteratee. The iteratee is invoked with three arguments: (value, index|key, collection).

npm install --save lodash
import _ from 'lodash';

uniqBy

_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }]

omit

postIdToDelete = 42;
return _.omit(state,postIdToDelete)

truncate

_.truncate('hi-diddly-ho there, neighborino');
// => 'hi-diddly-ho there, neighbo...'

String

Split

"hello".split("") //["h","e","l","l","o"]

RegExp

exec

/d(b+)d/.exec('cdbbdbsbz') => ["abbd","bb"]

Slice

str1 = "hello world"
str2 = str1.slice(1,4) // 'ell'

indexOf

'Blue Whale'.indexOf('Blue');     // returns  0
'Blue Whale'.indexOf('Blute');    // returns -1

replace

"054-5434 916".replace(/[\D]/g,"") //0545434916

Math

Objects

Creating an object

const newPerson = {...person, y:'snow'}; //create a new object

Computed property names (ES2015)

var prop = 'foo';
var o = {
  [prop]: 'hey',
  ['b' + 'ar']: 'there'
};

keys

const obj = {a: "hi", b:"world"}
Object.keys(obj) //["a","b"]

Destructuring

const {name, age} = person
const [ firstnumber] = [1,2,3,4,5]

Constructor function

function Car(options) {
  this.title = options.title;
}
Car.prototype.drive = function() {
  return 'vroom'
}
const car1 = new Car({ title: 'Focus'})

Classes

class Car {
  constructor(options) {
    this.title = options.title
  }
  drive() {
    return 'vroom'
  }
}

const car1 = new Car();

extends

class Toyota extends Car {
  constructor(options){
    super(options);
    this.color = options.color;
  }
  hunk() {
    return 'beep';
  }
}

Static Methods

static hunk(){return 'hunk hunk'}
console.log(Car.hunk()) //hunk hunk

Fetch

fetch

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))

fetch+async

async function getMoviesFromApi() {
  try {
    let response = await fetch('https://facebook.github.io/react-native/movies.json');
    let responseJdon = await response.json();
    return responseJson.movies;
  } catch(error) {
    console.log(error);
  }
}

Promises

promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve();
  } , 3000);
});

promis
  .then(() => console.log('finished')
  .catch(() => console.log('oops...'))

async await

doLongRunningThing = async() => {
    let result = await myRequest();
    console.log(result)
}

ES6

const COLORS = { red: red, blue: blue } 
is the same as
const COLORS = {red,blue}

Generators

function* TeamIterator(team) {
  yield team.lead;
  yield team.manager;
  yield team.engineer;
}

const names =[];
for (let name of TeamIterator(teamA)) {
  names.push(name);
} // => [jhon,james,Sara]

Teach the for of loop how to iterate

[Symbol.iterator] : function* () {
  yield this.lead;
  yield this.manager;
}

In a class

*[Symbol.iterator](){
  yield this.content
  for (let child of this.children) {
  yield* child
  }
}

React Native

Class Component

import React, {Component, PropTypes} from 'react';

class Video extends React.Component {
  static defaultProps = {
     title: "",
  }
  static propTypes = {
   titile: PropTypes.string
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

Components

Button

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

Styling

alignSelf: 'auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')

controls how a child aligns in the cross direction

justifyContent: 'flex-start', center, flex-end, space-around, and space-between.

determines the distribution of children along the primary axis.text

textAlign?: enum('auto', 'left', 'right', 'center', 'justify')

flexWrap

flexWrap: 'nowrap', 'wrap', 'wrap-reverse'

alignConent
space betweens lines

alignContent: 'flex-start','flex-end','center','space-between','space-around','stretch'

react-native run-ios --simulator="iPhone 6s"
emulator -avd Pixel_XL &

solving Android issues

adb reverse tcp:3000 tcp:3000 &&
adb reverse tcp:3001 tcp:3001
adb reverse tcp:3000 tcp:3000 &&
adb reverse tcp:8081 tcp:8081
adb shell input keyevent 82

git

remotes

git remote -v
git remote rm origin
git remote add origin <url>
git push -u origin master

Create a branch

git checkout -b [name_of_your_new_branch]
git checkout [name_of_your_new_branch]
git push origin [name_of_your_new_branch]

Merge a branch

git checkout master
git pull origin master
git merge test
git push origin master

Rebase in branch

$ git checkout experiment
$ git rebase master

Tools

NPM

rm -rf node_modules && rm -f package-lock.json && npm i

npm config

npm config set registry http://npm.dev.wixpress.com/
npm config set registry https://registry.npmjs.org/

RNX

Brew

brew cask search macdown
brew cask install macdown

SERVER

FireBase

firebase.auth().signInWithEmailAndPassword(email,password)
        .then(user => console.log(user));

                firebase.auth().createUserWithEmailAndPassword(email,password)                   .then(user => console.log(user));

Saving data

import firebase from 'firebase';
    firebase.database().ref(`/users/${currentUser.uid}/employees`)
        .push({name,phone,shift});

Getting the current user uid*

    const {currentUser.uid} = firebase.auth();

Fetch

        firebase.database().ref(`/users/${currentUser.uid}/employees`)
            .on('value', snapshot => {
                dispatch({type: EMPLOYESS_FETCH_SUCCESS, payload: sanpeshot.val()})
            })

Updating data

firebase.database().ref('users/' + userId).set

Data Flow

Redux

Wiring up an action creator

import { connect } from 'react-redux'
export default connect(null,{<emailChange>})(<LoginForm>);

Reducer Boiler Plate

import {EMAIL_CHANGED} from '../actions/types';

const INITIAL_STATE = { email: ''};

export default (state=INITIAL_STATE, action) => {
    switch(action.type){
        case EMAIL_CHANGED:
            return {...state, email: action.payload};
        default:
            return state;
    }
};

Reducer index boiler plate

import {combineReducers} from 'redux';
import AuthReducer from './AuthReducer';


export default combineReducers({
    auth: AuthReducer
});

mapStateToProps - so you will have access to email in props (this.props.email)

const mapStateToProps = state => {
    return{
        email: state.auth.email
    };
};
export default connect(mapStateToProps,{emailChanged})(LoginForm);

Thunk

npm install --save redux-thunk

Inside app.js

import reduxThuck from 'reduc-thunk';
import {createStore,applyMiddleware} from 'redux';
const store = createStore(reducers,{},applyMiddleware(ReduxThunk));
        return (
            <Provider store={store}>
...

Create the action

export const facebookLogin = () => async dispatch => {
    let token = await AsyncStorage.getItem('fb_token');
    if (token) {
        //Dispatch an action saying FB is done
        dispath({type: FACEBOOK_LOGIN_SUCCESS, payload: token })
    } else {
        //Start up FB Login process
    }
}

Action Creator

In src/action/index.js

export const emailChange = (text) => {
   return {
       type: 'email_change',
       payload: text
   }
}