arackaf

plugins: [
    (isProduction ? 
        new BundleAnalyzerPlugin({
            analyzerMode: 'static'
        }) : null),

    new webpack.optimize.CommonsChunkPlugin({
        name: 'node-static',
        minChunks(module, count) {
            var context = module.context;

arackaf

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var path = require('path');
var webpack = require('webpack');
var noVisualization = process.env.NODE_ENV === 'production' 
        || process.argv.slice(-1)[0] == '-p'
        || process.argv.some(arg => arg.indexOf('webpack-dev-server') >= 0);

module.exports = {
    entry: {
        main: './reactStartup.js'

arackaf

class Counter extends Component {    
    componentWillMount() {
        let self = this;
        class IfEven extends Component {
            render() {
                let {children} = this.props;
                return !(self.props.value % 2) ? children : null;
            }
        }

arackaf

class CurrentTime extends Component {
    state = {time: ''};
    componentDidMount() {
        this._interval = setInterval(() => this.setState({time: this.getTime()}), 50);
    }
    componentWillUnmount() {
        clearInterval(this._interval);
    }
    getTime(){
        let t = new Date();

arackaf

class ShowCurrentTime extends Component {
    render() {
        return (
            <div>
                <span style={{color: 'blue'}}>Time is {this.props.time}</span>
            </div>
        );
    }
}

arackaf

import {render} from 'react-dom';
import React, {Component, Children, cloneElement} from 'react';

class CurrentTime extends Component {
    state = {time: ''};
    componentDidMount() {
        this._interval = setInterval(() => this.setState({time: this.getTime()}), 50);
    }
    componentWillUnmount() {
        clearInterval(this._interval);

arackaf

render(
    <div>
        <CurrentTime>
            <div>
              <span>{/* Can't get time here :( */}</span>
            </div>
        </CurrentTime>
    </div>, document.getElementById('home')
);

arackaf

import {render} from 'react-dom';
import React, {Component, Children, cloneElement} from 'react';

const currentTime = OriginalComponent => class extends Component {
    state = {time: ''};
    componentDidMount() {
        this._interval = setInterval(() => this.setState({time: this.getTime()}), 50);
    }
    componentWillUnmount() {
        clearInterval(this._interval);

arackaf

class ShowCurrentTimeRaw extends Component {
    render() {
        return (
            <div style={this.props.style}>
                <span style={{color: 'purple'}}>Time is {this.props.time}</span>
            </div>
        );
    }
}
const ShowCurrentTime = currentTime(ShowCurrentTimeRaw);

arackaf

import {render} from 'react-dom';
import React, {Component, Children, cloneElement} from 'react';

class CurrentTime extends Component {
    state = {time: ''};
    componentDidMount() {
        this._interval = setInterval(() => this.setState({time: this.getTime()}), 50);
    }
    componentWillUnmount() {
        clearInterval(this._interval);