wuct

 convert image.png  -bordercolor white -border 0 \
          \( -clone 0 -resize 16x16 \) \
          \( -clone 0 -resize 32x32 \) \
          \( -clone 0 -resize 48x48 \) \
          \( -clone 0 -resize 64x64 \) \
          -delete 0 -alpha off -colors 256 favicon.ico

wuct

import React from 'react';
import {GoogleMaps, InfoWindow} from 'react-google-maps';

class MapCanvas extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      zoomLevel: 3,
      center: new google.maps.LatLng(34.397, 60.644)
    };

wuct

import React from 'react';
import GoogleMapsInfobox from 'google-maps-infobox';
import SimpleChildComponent from 'react-google-maps/lib/internals/SimpleChildComponent';
import createRegisterEvents from 'react-google-maps/lib/internals/createRegisterEvents';
import exposeGetters from 'react-google-maps/lib/internals/exposeGetters';

const {PropTypes} = React;

class InfoBox extends SimpleChildComponent {
  constructor (...args) {

wuct

_animateIcon() {
  const initTime = Date.now();

  raf(function tick() {
    const {icon} = this.state;
    const diffTime = Date.now() - initTime;
    const renderTime = diffTime % 4000;
    const iconSize = (renderTime / 1000) * 10 + 10;

    // console.log(iconSize);

wuct

import React from 'react';
import MyStore from './MyStore';

class MyComponent extends React.Component {
  componentDidMount() {
    MyStore.addChangeListener(this._onChange.bind(this));
  }

  componentWillUnmount() {
    MyStore.removeChangeListener(this._onChange.bind(this)); // not working

wuct

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true,
    "jasmine": true
  },
  "plugins": [
    "react",
    "babel"

wuct

// get users list (array), convert it to object

users = users.reduce((res, user) => {
  res[user.id] = user;
  return res;
}, {})

// which will look like

wuct

工具
  NPM
    套件管理工具
    https://www.npmjs.com/

  Webpack
    前端打包工具，可用來合併、壓縮、優化各種檔案，且提供 live reloding dev server

wuct

import { emptyObject } from 'fbjs/lib/emptyObject';
import { connect } from 'react-redux';
import { pushState } from 'redux-router';
import pure from 'recompose/pure';
import defaultProps from 'recompose/defaultProps';
import doOnReceiveProps from 'recompose/doOnReceiveProps';
import renderNothing from 'recompose/renderNothing';
import renderComponent from 'recompose/renderComponent';
import branch from 'recompose/branch';
import compose from 'recompose/compose';

wuct

const mergeFuncs = (...funcs) => (...args) => {
	for (const func of funcs) {
	  if (typeof func === 'function') func(...args);
	}
}


const foo = e => console.log('foo', e)
const bar = (e, val) => console.log('bar', e, val)
const foobar = mergeFuncs(foo, bar)