vernondegoede

// File: .storybook/config.js

import { configure, addDecorator } from '@kadira/storybook';
import Theme from './../src/ui/theme';
import React from 'react';
import { ThemeProvider } from 'styled-components'

function loadStories() {
  require('../stories');
}

mjackson

// In v2/3 you did this:
import ReactDOM from 'react-dom'
import { Router, browserHistory, Route } from 'react-router'

ReactDOM.render(
  <Router>
    <Route path="/about" component={About}/>
    <Route path="/:username" component={User}/>
  </Router>
)

DimitryDushkin

import { browserHistory } from 'react-router';

/**
 * @param {Object} query
 */
export const addQuery = (query) => {
    const location = Object.assign({}, browserHistory.getCurrentLocation());
    Object.assign(location.query, query);
    browserHistory.push(location);
};

DimitryDushkin

import Modal from 'react-modal';
import { addQuery, removeQuery } from './utils-router.js';

const OPEN_MODAL_QUERY = 'openModal';

function SomeComponent({ location }) {
    return <div>
        <button onClick={ () => addQuery({ OPEN_MODAL_QUERY : 1 })}>Open modal</button>
        <Modal
            isOpen={ location.query[OPEN_MODAL_QUERY] }

KyleAMathews

Design systems and atomic design

• http://bradfrost.com/blog/post/atomic-web-design/
• https://24ways.org/2012/design-systems/

CSS-in-JS libraries

• https://github.com/KyleAMathews/typography.js
• https://github.com/threepointone/glamor
• https://github.com/styled-components/styled-components

EmielM

import fs from 'fs';
import path from 'path';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript';
import replace from 'rollup-plugin-replace';

function findVersion(file, extensions) {
    for (let e of extensions) {

benlesh

function getErroringPromise() {
  console.log('getErroringPromise called');
  return Promise.reject(new Error('sad'));
}

Observable.defer(getErroringPromise)
  .retry(3)
  .subscribe(x => console.log);

// logs "getErroringPromise called" 4 times (once + 3 retries), then errors

Mohamed3on

1. Install prettier
2. Make a .prettierignore file, and add directories you'd like prettier to not format, for example: **/node_modules
3. Run prettier --write "**/*.js" *Don't forget the quotes.
4. Optional: if you want to format JSON/SCSS files too, replace js with json/scss.

kitze

import React from 'react';

const ConditionalWrap = ({condition, wrap, children}) => condition ? wrap(children) : children;

const Header = ({shouldLinkToHome}) => (
  <div>
    <ConditionalWrap
      condition={shouldLinkToHome}
      wrap={children => <a href="/">{children}</a>}
    >

ryanflorence

import React, { Component } from "react"
import { Machine } from "xstate"
import * as PropTypes from "prop-types"

class FiniteMachine extends Component {
  machine = Machine(this.props.chart)

  state = {
    data: this.props.reducer(undefined, { type: "@init" }),
    machineState: this.machine.getInitialState()