parshap

Running Node Modules in React Native

How to use packages that depend on Node.js core modules in React Native.

See the [node-libs-react-native][node-libs-react-native] library as a convenience for implementing this method.

Node.js Core Modules

markerikson

Cheng Lou - On the Spectrum of Abstraction

Cheng Lou, a former member of the React team, gave an incredible talk at React Europe 2016 entitled "On the Spectrum of Abstraction". That talk is available for viewing here: https://www.youtube.com/watch?v=mVVNJKv9esE

It's only a half-hour, but it is mind-blowing. It's worth re-watching two or three times, to let the ideas sink in.

I just rewatched the talk for some research, and wrote down a summary that's semi-transcript-ish. I didn't see any other transcripts for this talk, other than the auto-generated closed captions, so I wanted to share for reference.

Summary

jarretmoses

RN < 0.50 - watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
RN >= 0.50 -  watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
RN >= 0.63 - watchman watch-del-all && rm -rf node_modules && npm install && rm -rf /tmp/metro-* && npm run start --reset-cache

npm >= 5 - watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start -- --reset-cache

Windows - del %appdata%\Temp\react-native-* & cd android & gradlew clean & cd .. & del node_modules/ & npm cache clean --force & npm install & npm start -- --reset-cache

abhiaiyer91

Redux Selector Pattern

Imagine we have a reducer to control a list of items:

function listOfItems(state: Array<Object> = [], action: Object = {}): Array<Object> {
  switch(action.type) {
    case 'SHOW_ALL_ITEMS':
      return action.data.items
    default:

cherta

export function retrieve(nodeId) {
  return { type: 'RETRIEVE_NODE', payload: { nodeId: nodeId } }
}

export function show(nodes) {
  return { type: 'SHOW_NODE', payload: { nodes: nodes } }
}

jamsesso

var express = require('express');
var path = require('path');
var webpackConfig = require('./webpack.config');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var proxyMiddleware = require('http-proxy-middleware');

var devConfig = webpackConfig.devServer;
var app = express();

mdp

package com.dotp;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;

import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;

LearnCocos2D

For background and further references see: Entity Component Systems on Wikipedia

ECS by Scott Bilas (GDC 2002)

Entity->Components->Update

• entity = class: no logic + no data OR at most small set of frequently used data (ie position)
• component = class: logic + data

foreach entity in allEntities do
    foreach component in entity.components do

sebmarkbage

/** @jsx React.DOM */

var Graphic = React.createClass({ 

  componentDidMount: function() {
    var context = this.getDOMNode().getContext('2d');
    this.paint(context);
  },

  componentDidUpdate: function() {

krishamoud

option_settings:

  - option_name: AWS_SECRET_KEY
    value: -------------------------------------------

  - option_name: AWS_ACCESS_KEY_ID
    value: ------------------------------

  - option_name: PORT
    value: 8081