Eric Ogden parties

Create React App does not provide watching build mode oficially (#1070).

This script provides watching build mode for an external tool such as Chrome Extensions or Firebase app.

How to Use

Create a React app.

Put the script into scripts/watch.js.

Create React App does not provide watching build mode oficially (#1070).

This script provides watching build mode for an external tool such as Chrome Extensions or Firebase app.

How to Use

Create a React app.

Put the script into scripts/watch.js.

This is my typical decorator stack for a 'smart component' used as the component for react-router route. Note some code is missing here but this should give you the idea.

Example usage:

StateDetailsScene.js

import React from 'react'
import _ from 'lodash'
import route from 'core/decorators/route'

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

The Ultimate Unit Testing Cheat-sheet

Sinon Chai
Chai
Sinon

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

How to fix Razer Synapse in Mac OSX 10.0 Yosemite

Start Terminal.app and type:

sudo nvram boot-args="kext-dev-mode=1"

Verify that command works by typing:

sudo nvram -p | grep -i boot-args

JavaScript Log Wrapping

Wrapping console.log (et al.) in your own function to modify logging behavior.

Why?

You may want a simple way to:

	import * as React from 'react'
	import * as Redux from 'redux'

	import { MyReduxState } from './my-root-reducer.ts'

	export interface OwnProps {
	propFromParent: number
	}

	interface StateProps {

	import React from "react";
	import ReactDOM from "react-dom";

	import configureStore from "./store/configureStore";


	const store = configureStore();


	const rootEl = document.getElementById("root");