tbranyen

import React, { Component, PropTypes } from 'react';
import htr from 'hooks-theme-refs';

export class Chip extends Component {
  render() {
    const { label, hooks, theme, refs, children, ...rest } = htr(this);

    return (
      <div {...rest} className={theme.chip} onClick={hooks.onClick} ref={refs.chip}>
        {children}

bvaughn

React lifecycle cheatsheet

Method	Side effects1	State updates2	Example uses
Mounting
componentWillMount		✓	Constructor equivalent for createClass
render			Create and return element(s)
componentDidMount	✓	✓	DOM manipulations, network requests, etc.
Updating
componentWillReceiveProps		✓	Update state based on changed props

threepointone

// inifinite scrolling of content without extra wrappers 
const { render, findDOMNode  } = ReactDOMFiber

class App extends React.Component {
  render() {
  // wrap the root element with an Intersection Observer, exposing .observe for children
    return <Intersection>
      <div style={{ height: 200, overflow: 'auto' }}>
        <Page offset={0} count={10} />
      </div>

NervosaX

#!/usr/bin/env node
"use strict";
const _ = require("lodash");
const fs = require("fs");
const path = require("path");
const jspm = require("jspm");
const build = new jspm.Builder();
const System = build.loader;

// Generate the path to the root of the project... We can use this to

getify

Parens And Performance

Years ago, some smart folks that worked on JS engines realized that not all JS that's loaded into a page/app initially is needed right away. They implemented JIT to optimize this situation.

JIT means Just-In-Time, which means essentially that the engine can defer processing (parsing, compiling) certain parts of a JS program until a later time, for example when the function in question is actually needed. This deferral means the engine is freer to spend the important cycles right now on the code that's going to run right now. This is a really good thing for JS performance.

Some time later, some JS engine devs realized that they needed to get some hints from the code as to which functions would run right away, and which ones wouldn't. In technical speak, these hints are called heuristics.

So they realized that one very common pattern for knowing that a function was going to run right away is if the first character before the function keyword was a (, because that usually m

jeffmo

A few reasons why we decided to build Flow

tldr: Flow is built to find a lot more kinds of bugs than what TypeScript is built for.

Flow avoids as much gratuitous unsoundness as possible in order to find more bugs: It never infers any, it models variance for objects/functions/type parameters soundly (this is critical), it minimizes type precision loss, it has sound support for various dynamic features with inference (Function.prototype.bind()/Function.prototype.call()/Object.assign()/etc), etc.

Flow infers and understands more kinds of types with fewer annotations. Extensive inference was important to us for easing the process of converting untyped code without missing errors as much as possible. It also helps reduce boilerplate when writing new, typed code. You get to decide if and when you want to express types in your code (with type annotations), but Flow will pick things up from there without much worry of losing type info.

Flow is built on top of a more general level of code understandi

sebmarkbage

function measure(box) {
  const width = box.width + box.borderLeft + borderRight;
  return {
    width,
    offset(position) {
      return { left: position.left + box.borderLeft };
    }
  }
}

gaearon

import React, { Component } from 'react'
import Subapp from './subapp/Root'

class BigApp extends Component {
  render() {
    return (
      <div>
        <Subapp />
        <Subapp />
        <Subapp />

jbristowe

NativeScript LiveSync with Console Output with iOS Simulator

NativeScript LiveSync does not currently emit console output (via console.log()) via the CLI:

$ tns livesync ios --emulator —watch

There's a couple of ways to make this work. In both cases, you'll need the hash for the iOS simulator/device you're targeting:

$ instruments -s devices

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent