MicroBenz

export function isEmpty(test) {
  return test === null || test === undefined || test === '';
}

export function isNumber(test) {
  return test !== null && test !== undefined && typeof test === 'number';
}

export function isGreaterThanZero(test) {
  return !isEmpty(test) && isNumber(test) && test > 0; 

MicroBenz

// Async version
async function test(){
  for(let i = 0;i < list.length(); i++){
    const data = await getData(i);
    console.log(data);
  }
}
await test();
console.log('done');

MicroBenz

import { Switch, Route } from 'react-router-dom';
import Loadable from 'react-loadable';

const Login = Loadable({
  loader: () => import('./pages/Login'),
  loading: () => null
});

const Dashboard = Loadable({
  loader: () => import('./pages/Dashboard'),

MicroBenz

import { Switch, Route } from 'react-router-dom';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import User from './pages/User';

const Routes = () => {
  return (
    <Switch>
      <Route path="/login" exact component={Login} />
      <Route path="/dashboard" exact component={Dashboard} />

MicroBenz

import Loadable from 'react-loadable';

const Bar = Loadable({
  loader: () => import('./components/Bar'),
  loading: () => <div>Loading...</div>
});

class MyComponent extends React.Component {
  render() {
    return <Bar />;

MicroBenz

class MyComponent extends React.Component {
  state = {
    Bar: null
  };

  componentWillMount() {
    import('./components/Bar').then(Bar => {
      this.setState({ Bar });
    });
  }

MicroBenz

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Button, Welcome } from '@storybook/react/demo';

storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

MicroBenz

// 1.Create context via createContext()
import React, { createContext } from 'react';

const MediaPathContext = createContext({
  prefixPath: 'cloudfront-production' // as default
});

// 2.Use "Provider" at root component to make any sub-tree component can consume context data
const isProduction = process.env.NODE_ENV === 'production';

MicroBenz

// Inside app that use ui-lib as dependencies
import { UIKitContext, Image } from 'ui-lib';

const isProduction = process.env.NODE_ENV === 'production';

const mediaPath = isProduction ? 'cloudfront-production' : 'cloudfront-development';

const App = () => (
  <UIKitContext prefixPath={mediaPath}>
    <h1>Hello World</h1>

MicroBenz

const Button = (props, context) => (
  <button style={{background: context.color}}>
    {props.children}
  </button>
);

Button.contextTypes = {
  color: PropTypes.string
};