gcanti

/* @flow */

import React from 'react'
import ReactDOM from 'react-dom'

type FunctionComponent<A> = (props: A) => ?React$Element<any>;

type ClassComponent<D, A, S> = Class<React$Component<D, A, S>>;

type Component<A> = FunctionComponent<A> | ClassComponent<any, A, any>;

chrisui

These stats were made available from https://github.com/lystable/recon

Num modules parsed
How many modules did we explore?

1243

---

Num components

Aldredcz

Notes

• This code handles any JS runtime error during rendering React components. Without this handling, once an error occurs, whole component tree is damaged and can't be used at all. With this handling, nothing will be rendered in production environment (error span in dev env.) + in production the error is logged to Sentry (if you are not using it just delete related code)
• This is basicaly a workaround for proposed feature in React core - described in Issue: facebook/react#2461
• Works for all variants of Component creation - React.createClass, extending React.Component and also stateless functional components.
• To get this work, just put this snippet into your entry js file. Then it will work in whole application.
• Also supporting React Hot Reload!
• If you find this useful, please retweet https://twitter.com/Aldredcz/status/744650159942995968 :)

Ideas

• specify custom error renderer (global / per component, e.g. by implementing method renderOnError() in a comp

toddgeist

// load as early as possible
if(process.env.NOW){
  require('dotenv').config({path:'./.envnow', silent:true});
}else{
  require('dotenv').config({silent:true});
}

// now you can deploy with:

//$cp .env .envnow && now  && rm -r .envnow

MoOx

# ...

[options]
# webpack loaders
module.name_mapper='.*\.css$' -> '<PROJECT_ROOT>/flow/stub/css-modules.js'
module.name_mapper='.*\.\(svg\|png\|jpg\|gif\)$' -> '<PROJECT_ROOT>/flow/stub/url-loader.js'

jimfb

class MyWrapper {
  return React.Children.only(this.props.children);
}


class MyLibraryComponent {
  render() {
    return <div><span><whatever><MyWrapper ref=...>{this.props.statelessComponentThatIWantToReference}</MyWrapper></whatever></span></div>;
  }

bcoe

npm Users By Downloads (git.io/npm-top)

---

npm users sorted by the monthly downloads of their modules, for the range May 6, 2018 until Jun 6, 2018.

Metrics are calculated using top-npm-users.

#	User	Downloads

DrBoolean

//https://gist.github.com/quelgar/4661081

const daggy = require('daggy');
const {range} = require('ramda');

// type to hold an index and the array
const Pointer = daggy.tagged('i', 'a')

// Comonad instance
Pointer.prototype.extract = function() { return this.a[this.i] }

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

natchiketa

Installation

1)

brew install nginx
sudo cp /usr/local/Cellar/nginx/1.8.0/homebrew.mxcl.nginx.plist /Library/LaunchAgents

2)

Replace /usr/local/etc/nginx/nginx.conf with the nginx.conf in this gist. I'm using port 5000 for my current project. Obviously, change server_name as well, and probably the name of its access log.