staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

kottenator

// Implementation in ES6
function pagination(c, m) {
    var current = c,
        last = m,
        delta = 2,
        left = current - delta,
        right = current + delta + 1,
        range = [],
        rangeWithDots = [],
        l;

ctavan

import hoistNonReactStatic from 'hoist-non-react-statics';
import React from 'react';

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

// See: https://facebook.github.io/react/docs/higher-order-components.html
export default function mutatable({ mutationName = 'mutate' } = {}) {
  return (SourceComponent) => {

brennanMKE

class EventEmitter

    /// Shared Instance.
    public static var sharedInstance = EventEmitter()

    // ReactNativeEventEmitter is instantiated by React Native with the bridge.
    private static var eventEmitter: ReactNativeEventEmitter!

    private init() {}

ericksli

import com.facebook.react.bridge.Arguments
import com.facebook.react.bridge.WritableArray
import com.facebook.react.bridge.WritableMap

fun writableMapOf(vararg values: Pair<String, *>): WritableMap {
    val map = Arguments.createMap()
    for ((key, value) in values) {
        when (value) {
            null -> map.putNull(key)
            is Boolean -> map.putBoolean(key, value)

iremlopsum

import React, { PureComponent } from 'react';
import { InteractionManager } from 'react-native';

class WaitForUI extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      interactionsComplete: false,
    };
  }

achuvm

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <application>
        <meta-data
            android:name="com.samsung.android.vr.application.mode"
            android:value="vr_only"/>
    </application>

</manifest>

luyx2412

// Author: @tomzaku from https://gist.github.com/tomzaku/ccda8d03b8a35c92025a84cd14d0369b
// import liraries

import React, { Component } from 'react';
import _ from 'lodash'

// create a component
export const isEqualObjectIncludeFunction = (first, second) => {
  return _.isEqualWith(first, second, (val1, val2) => {
    // Compare include function

bnjm

// @flow
import { ARKit } from 'react-native-arkit'
import { branch, compose, lifecycle, renderComponent } from 'recompose'
import { unzip } from 'react-native-zip-archive'
import RNFetchBlob from 'react-native-fetch-blob'
import React from 'react'

const getModelPath = modelId => (
  `${RNFetchBlob.fs.dirs.CacheDir}/models/${modelId}/`
)

inspireui

Author: inspireUI
Website: inspireui.com 

- Should be use PureComponent to avoid re-render many times --> https://reactjs.org/docs/react-api.html#reactpurecomponent
- Seperate Container file and Component file --> https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
- Avoid use .bind when handle function --> https://stackoverflow.com/a/32192892/6622971
- Don’t use arrow functions in your render methods --> onPress={(e) => this.handlePress(e)} --> only use when need pass params to handle, or 
  export default ({deleteItem, item}) => {
      const _onDeleteTap(){
          deleteItem(item.id)