Masterstvo

Можно без контекста:

import React, { Component, cloneElement } from 'react';

export default class Parent extends Component {
  
  render() {
    const { data, children } = this.props;
    const childrensArray = React.Children.toArray(children);
    return (
      <div>
          {childrensArray.map((children) => cloneElement(children, { data }))}
      </div>
    );
  }
}

А чем setTimeout не устраивает? Добавить переменную, отвечающую за количество отображаемых элементов, если её значение меньше общего количества элементов - сделать ей ++ с задержкой. Как-то так.

Забыли дописать:

case 'TOGGLE_COMPLETED':
            return Object.assign({}, state, {
                todo: state.todo.map((item) => {
                    if(item.id == action.id) {
                        item.completed = !item.completed
                    }
                    return item;
                })
            })

1 вариант - использовать стрелочные функции:

method(function() {
...
});

// заменить на 
method(() => {
...
})

2 вариант - привязать контекст к переменной:

const that = this;
that.context;

Почитайте это

Для Bootstrap и Font Awesome есть отдельные загрузчики: bootstrap-loader и font-awesome-loader.

Достаточно просто добавить их в секцию devDependencies в package.json.

В коде инициализации приложения подключить, например так:

require('bootstrap-loader');
require('font-awesome-loader');

Для шрифтов, в webpack.config.js, прописать примерно такие правила:

module {
  loaders: [
    {
      test: /\.woff(.*)$/,
      loader: 'url',
      query: {
        limit: 10000,
        mimetype: 'application/font-woff',
        name: 'fonts/[name].[ext]' // путь output, куда будут скопированы файлы
      }
    },
    {
      test: /\.woff2(.*)$/,
      loader: 'url',
      query: {
        limit: 10000,
        mimetype: 'application/font-woff',
        name: 'fonts/[name].[ext]'
      }
    },
    {
      test: /\.ttf(.*)$/,
      loader: 'url',
      query: {
        limit: 10000,
        mimetype: 'application/octet-stream',
        name: 'fonts/[name].[ext]'
      }
    },
    {
      test: /\.eot(.*)$/,
      loader: 'file',
      query: {
        limit: 10000,
        name: 'fonts/[name].[ext]'
      }
    },
    {
      test: /\.svg(.*)$/,
      loader: 'url',
      query: {
        limit: 10000,
        mimetype: 'image/svg+xml',
        name: 'fonts/[name].[ext]'
      }
    }
  ]
}

Если понадобится выделить CSS из JavaScript, то можно использовать extract-text-webpack-plugin.

webpack.config.js:

var extractTextPlugin = require('extract-text-webpack-plugin');
// ...
module.exports = {
  // ...
  module: {
    loaders: [
      {
        test: /\.scss$/, // для scss
        loader: extractTextPlugin.extract('style', 'css!sass')
      }
    ]
  },

  plugins: [
    new extractTextPlugin('bundle.css') // вынести css в файл bundle.css в папку output
  ]
}

Для копирования других статичных файлов можно использовать copy-webpack-plugin.

либо модалку юзать либо toast(https://github.com/PointInside/ng2-toastr). я и то и то использую

blog.angular-university.io/angular-2-what-is-unidi...

Сделайте под это дело отдельный компонент. Никаких appChild - это реакт.

class MyClickableComponent extends React.PureComponent {
  construct(props, context) { 
    super(props, context)

    this.state = {
      isOpen: false,
    }
  }

  handleClick = e => {
    this.setState({ isOpen: true })
  }

  render() {
   const { isOpen } = this.state

    return (
      <div>
        <div onClick={this.handleClick }>click on me</div>
        {isOpen && (
          <b>opened!</b>
        )}
      </div>
    )
  }
}

ReactDOM.render(
        <div>
            <Month />
                   <MyClickableComponent  />
            <Content />
        </div>,
  document.getElementById('root')
);

Если нечиго из вышесказанного не поможет, вставьте

.......
e.preventDefault()
e.stopImmediatePropagation()
........

или можете сразу вставить =)

Возможно у вас вызываются несколько событий на одном элементе.

Во-первых, если вы создаёте множество динамических элементов, не используйте в них id и не ссылайтесь на них по id. Селектор по id выбирает только первый элемент из списка, потому что такой элемент должен быть один.
Во-вторых, метод .click() не работает с динамически добавленными элементами. Поэтому событие вешается только на тот элемент, который уже был на странице. Навешивайте обработчик события методом .on() на элемент html. Это проделегирует обработчик на все элементы, указанные в качестве контекста, включая те, что были созданы динамически.
Суммируем:

<span class="addField add">
    <i class="icon"></i>Добавить
</span>
<div class="inputs">
    <div>
        <input type="file" name="dynamic[]" class="field" > 
        <span class="remove">Удалить</span>
    </div>
</div>

$(document).ready(function () {
    $('html').on('click','.add',function () {
        $('<div><input type="file" class="field" name="dynamic[]" /><span class="remove">Удалить</span></div> ').fadeIn('slow').appendTo('.inputs');                                
    });
    $('html').on('click','.remove', function () {                               
        $(this).parent().remove();    
    });
});