mhaagens

FROM node:alpine
WORKDIR /code
run apk --no-cache add --virtual native-deps \
  g++ gcc libgcc libstdc++ linux-headers make python && \
  npm install --quiet node-gyp -g && \
  npm rebuild node-sass --force && \
  apk del native-deps
CMD ["yarn", "start"]
EXPOSE 9000

mhaagens

/* HOC fundamentally is just a function that accepts a Component and returns a Component:
  (component) => {return componentOnSteroids; } or just component => componentOnSteroids;
  Let's assume we want to wrap our components in another component that is used for debugging purposes, 
  it just wraps them in a DIV with "debug class on it".
  Below ComponentToDebug is a React component.
*/

//HOC using Class
  //it's a function that accepts ComponentToDebug and implicitly returns a Class
let DebugComponent = ComponentToDebug => class extends Component {

mhaagens

import React from "react";
import { Route } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import { firstChild } from "../../utils/helpers";

const AnimatedRoute = ({ component: Component, exact, path }) => (
  <Route
    exact={exact}
    path={path}
    render={({ match, ...rest }) => (

mhaagens

const CustomDiv = styled(Animated.view)`
  transform: ${props => `rotate(props.rotateDeg)`}
`;

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      rotate: new Animated.Value(0)
    }

mhaagens

import React, { Component } from "react";

class AutoComplete extends Component {

	constructor(props) {
		super(props)
		this.state = {
			query: ""
		}
	}

mhaagens

import http from 'http';
import app from './server';

const port = 3000;

const server = http.createServer(app.callback()).listen(3000);

if (module.hot) {
    module.hot.accept('./server', () => {
        server.removeAllListeners('request', server);

mhaagens

const FadeRoute = ({ component: Component, ...rest }) => {

  return (
    <Route {...rest} children={({ location, match }) => (
      <TransitionMotion
        willEnter={() => {return {opacity: 0, translateX: 24}}}
        willLeave={() => {return {opacity: spring(0, animationPresets.out), translateX: spring(24)}}}
        defaultStyles={[ {
          key: location.pathname,
          style: { opacity: 0, translateX: 24},